Share

コーディングが終わり、サーバーにアップロードする際、わざわざFTPソフトを立ち上げてデプロイするのが非常にめんどくさくないですか?

Gitリモートリポジトリへpushと同時に本番環境へデプロイできれば一番良いのでしょうが、それができない場合にはFTPでアップロードするようになるかと思います。

FTP(File Transfer Protocol)・・・サーバーとクライアント間で、ファイルを送受信する通信のルールのこと

デプロイ・・・サーバーで提供するサービス、webサイトを公開すること

こんな時に役に立つのが本日紹介する「ftp-deploy」です。

「ftp-deploy」はnpmのパッケージの一つです。

これを使うと、指定したディレクトリをサーバーの指定した箇所にアップロードしてくれる優れものです。

Gitでコード管理をする場合は、push時に自動デプロイする方が良いかと思いますが、それができない時にぴったりです。

では早速設定方法を見ていきましょう。

ftp-deployの事前準備

今回は下記の環境で使用したいと思います。

Node.js v10.16.3
npm 6.11.2
gulp 4.0.2

構成は下記の通りです。

node_modules
gulpfile.js
package.json
ftp_deploy_test // アップロードするフォルダ
 ├ index.html
 ├ css  
 |  └ style.css
 ├ js
 |  └ script.js
 └ img
    ├ sample.jpg
    └ sample.png

ターミナル上でパッケージをインストールします。

npm i -D ftp-deploy gulp

インストールできたら、早速設定していきます。

gulpfile.jsで設定を行う

今回もみんな大好きgulpで使うように設定を書いていきます。

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

// 接続情報を設定
const ftpOptions = {
  user: 'FTPユーザー名',
  password: 'FTPパスワード',
  host: 'FTPホスト',
  localRoot: '/Users/hoge/Desktop/test/ftp_deploy_test/', //アップロードするファイルがあるフォルダを指定
  remoteRoot:'/home/test/www/ftp_deploy_test/', //サーバーのアップロード先を指定
  include: ['*'], //アップロードするファイルを指定できます。
  exclude: [], //アップロードしないファイルを指定できます。
  deleteRemote: false
}

//タスクを登録
gulp.task('ftp', done = > {
  ftpDeploy.deploy(ftpOptions, (error)=> {
    if(error) {
      console.log('Error', error);
    }
  });
  done();
});

これで設定完了です。

ftpOptionsでサーバー接続に関する情報、ローカルやサーバー上のディレクトリの情報を設定します。

最後にgulpのタスクを登録して準備完了です。

アップロードを行う

ここまでできたら、ターミナルに以下を入力してアップロードしてみます。

gulp ftp

ターミナルとアップロード先を確認します。

$ gulp ftp
[14:13:21] Using gulpfile ~/Desktop/test/gulpfile.js
[14:13:21] Starting 'ftp'...
[14:13:21] Finished 'ftp' after 3.16 ms

問題なくアップロードされています。

アップロードするファイルを指定する

ftpOptionのincludeを編集してアップロードするファイルを指定します。
下記のように設定してみます。

include: ['index.html', '*.png'],

これでアップロードされるのは、「index.html」と「img/sample.png」がアップロードされます。

ファイルを除外する

この場合、ftpOptionのexcludeを編集します。
除外するファイルを下記のように設定します。

exclude: ['img/*.png','css/*'],

これで「img/sample.png」と「css/style.css」は除外された状態でアップロードされます。

アップロード中の処理をみる

下記を追記すれば、アップロード中の処理をターミナル上で見ることもできます。

// 1つのファイルアップロードが終わった時にログを出力
  ftpDeploy.on('uploaded', (data) => {
    console.log('Uploaded', data);
  });

dataには下記のような情報が含まれています。

data.totalFilesCount;       // アップロードするファイルの総数
data.transferredFileCount; // アップロードするファイルのカウント
data.filename;             // アップロードするファイル名。パスも含む

また、エラーがあった場合、下記を追記すればエラー情報をターミナル上で見ることができます。

// アップロード中にエラーが発生した時にログを出力
  ftpDeploy.on('upload-error', (data) => {
    console.log('Upload Error', data);
  });

おわりに

ftp-deployを使えばFTPソフトを立ち上げることなくファイルをアップロードできるので非常に便利です。

次回は、今までの復習をかねて、僕の静的サイトのコーディング環境を紹介したいと思います。

株式会社 ヤップ エンジニア

升田 圭亮

ヤップのコーディング、プログラミング担当。日々学んだことを発信。

記事中の画像データを使いたい!や、この記事もっと詳しく書いて欲しいなどのご要望、ご意見は上記お問合せをクリック、もしくはお電話ください。

06-6445-7317