【Gulp】gulp-s3-uploadプラグインで静的コンテンツをAmazon S3へ転送する

概要

フロントエンドのタスクランナーであるgulpの「gulp-s3-upload」プラグインを使い、フォルダへのファイル追加を監視して、Amazon S3にリソースを自動転送します。
単純に静的リソースを動的コンテンツと切り離して、全てAmazon S3に格納しようという魂胆で試しました。
ここではやってませんが、抱き合わせでクライアントPCでGulpで画像の最適化タスクを実施するのが理想だと思います。

準備・必要なもの

・AWSアカウント
・Amazon S3バケット（バケット名）
・Amazon S3を操作できる権限を持ったIAMアカウント
（IAMアカウントのキーとシークレットキー）

※バケットとIAMアカウントの設定方法は割愛します

gulp諸々の準備

プロジェクトの作業ディレクトリに移動してお決まりのコマンド

npm init

続いてgulpをインストール

npm install gulp --save-dev

プラグインのインストール

「gulp-s3-upload」というプラグインと、フィイル更新監視用に「gulp-watch」プラグインをインストールします。

・gulp-s3-upload
・gulp-watch

npm install --save-dev gulp-s3-upload gulp-watch

ファイル構成

このサンプルでは「resource」に追加されたファイルをuploadさせます。

glupタスクを作る

glupfile.js

var gulp = require('gulp');
var s3 = require('gulp-s3-upload')({
  /*IAMアカウントのキーとシークレットキー*/
  accessKeyId:"********",
  secretAccessKey:"******************"
});

gulp.task("upload", function() {
  gulp.src("./resource/**")
    .pipe(s3({
      /*バケット名*/
      Bucket:'******',
      ACL:'public-read'
    }))
  ;
});

gulp.task('watch', function(){
  gulp.watch('./resource/**',['upload']);
});

実行

gulp watch

画像を「resource」フォルダに追加すると

バケットの中を確認

以上です。