# Node.js を使ってFTPアップロードをコマンド一発で完了させる

Tags: VuePress Node.js

ブログをWordPressからVuePressに移行した関係でログインして記事を書いて公開という手順がなくなったのは良かったのですが、今度はデプロイするのをどうするか問題が発生しました。

現時点で使ったことは無いのですが、静的コンテンツであればNetlifyが無料でビルドからデプロイまでやってくれるので便利かなと思いました。

しかし、個人的な事情で現状のレンサバから変えることができないので、結局FTPアップロードしなければならないのでした。

だけど、ビルドのたびにFTPクライアント（FileZillaとか）を立ち上げて〜という手順は面倒くさいので Node.js でどうにか上手いこと出来ないかなと考えたところ、それっぽいパッケージがあったので早速試してみることにしました。

# 環境

# ローカル

• Node.js
  • v8.10.0
• npm
  • v6.10.3
• yarn
  • v1.17.3

# リモート

• レンサバの安いやつ

# 必要なパッケージ

• ftp-deploy

ftp-deployをインストールします。

$ npm i -D ftp-deploy
or 
$ yarn add --dev ftp-deploy

ちなみに私の環境ではバージョン 2.3.3 がインストールされています。

# package.json

package.json の scripts にコマンドを追加します。
※それ以外の設定は省略させていただきます。

{
  "scripts": {
    "deploy": "node deploy"
  }
}

# ftp-deployの設定

プロジェクトルートに deploy.js を作成します。

作成した deploy.js に設定を追加していきます。

今回は説明のため設定を直接オブジェクトで渡していますが、実際には別ファイルにしておくか、.env で管理しておくと良いと思います。

const FtpDeploy = require('ftp-deploy')
const ftpDeploy = new FtpDeploy()

// アップロードが始まったことをコンソールに表示する
console.log('deploy start!!');
ftpDeploy.deploy({
  user: YOUR_FTP_USER,  // ユーザー名
  password: YOUR_FTP_PASSWORD,  // パスワード
  host: YOUR_FTP_HOST,  // ホスト名
  localRoot: __dirname + '/.vuepress/dist',  // アップロードしたいローカルのルート
  remoteRoot: '/',  // リモートのルート
  include: ['*', '**/*'],  // アップロードするファイルやディレクトリ。この場合はドットファイルを除くすべて
  deleteRemote: false,  // アップロード前にリモートのファイルを削除するか否か
  forcePasv: true  // Passiveモードを強制するか否か
})
  .then(res => {
    // アップロードが終わったことをコンソールに表示する
    console.log('deploy finished!!', res)
  })
  .catch(err => console.log(err))

上記設定が終わったらあとは次のコマンドを叩けばデプロイが始まります。

$ npm deploy
or 
$ yarn deploy

# アップロード状況をログに表示する

現状でもデプロイは問題ないのですが、ファイル数が多い場合、コンソールに deploy finished!! が表示さないのでヤキモキします。

ftp-deploy には uploading というアップロード中にコールされるメソッドを提供しているので、それを使います。

先程の deploy.js を修正していきます。

// deployメソッドの下に追記していく
ftpDeploy.on('uploading', (data) => {
  console.log('転送されたファイルの数: ', `${data.transferredFileCount} / ${data.totalFilesCount}`)
  console.log('ファイル名: ', data.filename)
})

こちらを追加した状態でデプロイコマンドを叩くと下記のように現在の状況がコンソールに表示されます。

# まとめ

これでビルド後に都度FTPクライアントを立ち上げずにデプロイすることが可能になりました。