Web – AAA Tech Blog

背景 リニューアルしたウェブサイトの公開にあたってアップロードの方法を検討したのですが、自分の環境だと普通にアップロードすることができず色々検討した結果「gulp-sftp-up4」を使ってアップロードすることにしました。 どんな環境かというと、WSL2のUbuntu上にプロジェクトディレクトリを配置し、pugなどのソースファイルを更新するとgulpでコンパイルを実行し、同じマシンの/var/www/html/下に出力するという形になっています。 コンパイルされたファイルがWSL上にあるためホストOSのWinSCPからアクセスすることができず、かといってftpコマンドでのアップロードは面倒すぎる……と言った感じです。せっかくgulpでコンパイルを行っているのでアップロードもgulpを使ってやることにしました。 この記事では、gulp自体の使い方は理解している前提でgulp-sftp-up4の使い方に絞って解説します。 やること /var/www/html下にあるコンパイル済みファイルを、階層構造を保ったまま単純にftpサーバにアップロードします。特に差分アップロードの設定などもせず、ローカルで削除されたファイルをリモートから削除するということもしません。また、FTPの認証情報はスクリプト内にべた書きとします。 gulp-sftp-up4とは gulp-sftp-up4はgulpにsftpでのアップロード機能を追加するプラグインです。 2021/12現在、gulpでsftpアップロードを行う方法をGoogle検索するとgulp-sftpを使う記事が多くヒットしますが、gulp4ではgulp-sftpは動作しないようです。 そこでgulp-sftpからフォークしてgulp4で動作するようにしたのがgulp-sftp-up4です。 https://www.npmjs.com/package/gulp-sftp-up4 gulp-sftp-up4のインストール npm,gulpが既に入っているゲストOS内の環境に、gulp-sftp-up4をインストールします。 $ npm install --save-dev gulp-sftp-up4 スクリプト gulpfile.jsにgulp-sftp-up4を使用したdeployタスクを追加します。当然ながらtaskの名前は任意です。今回、スクリプト内にFTPの認証情報を書いてしまっています。これをGitにコミットしたりしてしまうと面倒なことになるので気を付けましょう。必要に応じて外部からロードするなどのセキュリティ対策を取ってください。 var gulp = require( 'gulp' ) var sftp = require('gulp-sftp-up4') gulp.task('deploy', function(done) { gulp.src([ '/var/www/html/**/*' ]) .pipe(sftp({ host: "ftpdestination.sakura.ne.jp", user: "username", pass: "password", remotePath: "/home/username/www/" })) }) 課題 初回のアップロードはこれで問題無いですが、不要になったファイルをローカル側で消してもリモートには残ってしまい、手動で削除が必要になってしまいます。また、サイトの規模が大きくなってくるとデプロイのパフォーマンスが気になってきて差分アップロードを行いたくなるかもしれません。アップロード・デプロイの手法はサイトの規模やフェーズに合わせてよく考えて選択するのが良いでしょう。

gulp-sftp-up4を使った静的サイトのアップロード