gulpを使ってローカルファイルをS3にデプロイする

gulpを使ってS3にWebサイトをアップロードしてみたのでメモ。
今までは作成したWebサイトをプレビューするとき、CyberduckというFTPツールを使用してS3のプレビュー環境にデプロイしていましたが、セキュリティソフトとの相性などが原因で接続が不安定になることが多くなったので、gulp-s3というプラグインを使用してみました。

ダウンロード

まずはターミナル画面で
npm install --save-dev gulp-s3

gulpfile.js

次にgulpfile.jsに以下の通り追記。

gulpfile.js

var s3   = require('gulp-s3')
var gulp = require('gulp')
 
var AWS = {
  "key":    process.env.AWS_ACCESS_KEY_ID, //＜＝これでダメなら　"AWS_ACCESS_KEY_ID"　で。
  "secret": process.env.AWS_SECRET_ACCESS_KEY,　//＜＝これでダメなら　"AWS_SECRET_ACCESS_KEY"　で。
  "bucket": "dev.example.com",　//バケット名
  "region": "eu-west-1"　//リージョン名
}
 
gulp.task('upload', () => {
  gulp.src('./dist/**').pipe(s3(AWS));
});
// es6使えないときは下記で
//gulp.task('upload', function(){
//	gulp.src('./dist/**').pipe(s3(AWS));
//});

タスク実行

ターミナル画面で
gulp upload

参考

• 脱ＦＴＰ！一瞬でS3にファイル転送 https://speakerdeck.com/mi/tuo-ftp-shun-des3nihuairuzhuan-song
• GulpでAWSのS3に簡単デプロイして静的サイトを作成する http://qiita.com/narikei/items/9179cfd234adb20d5da8

所感

FTPツールを使うよりも高速にアップロードすることができ便利さを実感。
待ち時間もエラーもなくなりストレスが一つ減らすことができました！