Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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)しか操作不可能な様子なので、削除までする場合は別途コードの追記が必要となる。

potato4d
Senior Front-End Engineer at LINE Corp.
https://potato4d.me
elevenback
合同会社ElevenBack は Web を通じたソフトウェアによる課題の解決を専門とする企業です。
https://elevenback.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away