Gulpを用いてサクッとS3に静的Webサイトをデプロイする

S3管理サイトで更新頻度の高いサイトが出てきた(といっても自分のサイト)ので、Gulp経由でS3に諸々をデプロイすることに。
そこまで時間はかからないだろうと思いやってみると、すぐに終わったのでなんか大仰な記事ばかりだったので、これだけしたい人のための記事としてまとめました。

前提条件

• AWSのアカウントを持っていること
• S3バケットがあること
• IAMの設定が完了していること
• Node.jsの環境が入ってること

動作確認環境

• Node.js 6.2.1
• gulp 3.9.1

やること

Gulpに設定を諸々書いてアップロードするまで

やらないこと

アップロードされているファイルを色々触ること

手順

インストール

まずはGulpが入っていない場合は導入。

terminal

$ npm i -D gulp

その後、プロジェクトにgulp-s3-uploadを導入。

terminal

$ npm i -D gulp-s3-upload

Gulpfileの記述

gulpfileは以下のように記述する。
requireしたgulp-s3-uploadをIAMキー,対象バケット, ACL設定を記述した上で走らせてやると、後は自動でアップロードしてくれる。

gulpfile.js

var s3 = require("gulp-s3-upload")(require("./iam.json"));
var 

gulp.task("deploy2s3", function(){
    return gulp.src([]) // デプロイ時にアップロードしたいファイル群
        .pipe(s3({
            Bucket: "バケット名",
            ACL: "public-read"
        }))
});

iam.json

{
    "accessKeyId"    : "********",
    "secretAccessKey": "********"
}

実行

設定ファイルが記述できたら gulp deploy2s3もしくて適当にnpm run deployでもして実行。

実行すると以下のような出力となる。

terminal

$ gulp deploy2s3

[04:49:52] Uploading .....  index.html
[04:49:52] No Change .....  images/favicon.png
[04:49:52] No Change .....  js/bundle.js
[04:49:52] No Change .....  css/style.css
[04:49:52] Updated .......  index.html

ポイントと課題

IAM関連が書かれたファイルは外に出るとまずいため外部ファイルにした

今回は個人サイトのユースケースだったため、別にIAMのキーが共有できなくても困らないので.gitignoreにignore対象として追記することにした。

チームでやる時も、そうそう本番環境にコロコロデプロイすることはないと思うので、別途管理しておいてそこに責任を持つ人が走らせるのがベターな運用となりそう。

ファイルが消せない

これだけのコードでの利用は初期アップロードやソースコードのみの更新、既存の画像の更新の場面では役に立つが、今まで利用していたファイルが必要でなくなったという場合にはゴミファイルが残ってしまう。

どうやらgulp-s3-uploadだけでは作成(Upload)/更新(Update)しか操作不可能な様子なので、削除までする場合は別途コードの追記が必要となる。