CircleCIで静的サイトのS3向け自動デプロイ

手順

1. ビルドタスクなど調整
2. S3とCircle CIの環境を整える
3. circle.yml を作成

ビルドタスクなどを調整

gulpを叩きたいところだが、gulpコマンドのパスが…とか面倒なので、
npm run script で統一するほうが楽そう。

テスト実行時に npm run test が実行されるので、ココもエラーにならない形で修正を入れておく必要がある。

package.json

  ....
  "scripts": {
    "test": "echo \"PASSED: no test required\" && exit 0",
    "build": "gulp build"
  },
  ...

S3環境のセットアップ

S3でバゲットを作成して、右のメニューから「静的ウェブサイトホスティング」を有効にする。

「アクセス許可」でバゲットポリシーの編集を選択し、以下のようなポリシーを設定。

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "PublicReadGetObject",
			"Effect": "Allow",
			"Principal": "*",
			"Action": [
				"s3:GetObject"
			],
			"Resource": [
				"arn:aws:s3:::mybucket-site/*"
			]
		}
	]
}

mybucket-siteの記述は適宜自分で作成したバゲット名と置き換える。

CircleCI環境のセットアップ

リポジトリを登録し、ProjectSetting より「AWS Permission」を選択

IAM で作成したユーザのIDとキーを登録しておく。

circle.ymlを作成

以下の様な形で node 環境向けの circle.yml を作成する。

circle.yml

machine:
  node:
    version: 6.1.0
dependencies:
  override:
    - npm install
    - npm run build
deployment:
  production:
    branch: master
    commands:
      - aws s3 sync public s3://mybucket-site/ --delete

利用可能なnode.jsのバージョンなどは以下を参考に

トラブルシュート

sassまわりで以下の様なエラーが出てコケるケースがある。

> webhooker@1.0.0 build /home/ubuntu/mysite
> gulp build

/home/ubuntu/mysite/node_modules/gulp-sass/node_modules/node-sass/lib/binding.js:15
      throw new Error(errors.missingBinary());
      ^

Error: Missing binding /home/ubuntu/mysite/node_modules/gulp-sass/node_modules/node-sass/vendor/linux-x64-48/binding.node
Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 6.x

Found bindings for the following environments:
  - Linux 64-bit with Node.js 4.x

npm cache clean など色々な対応がつぶやかれているが、

Circle CI の上の方にある、「Rebuild」のメニューから「Rebuild without cache」を選択すれば、以降のビルドはすんなり通るようになった。