CircleCIを使ってS3にブログをデプロイする

Hexoを使ってブログに記事を追加するごとにlocalのVMでページを生成してS3にデプロイしているが、ページを生成する時間が長い！だから贅沢に無料のCIサービスを使ってCIから記事を生成してデプロイしてみる。

やりたいこと

レポジトリのmasterが更新されたらcloneして記事を生成してS3にデプロイしてcloudfrontのキャッシュを削除する。

CIサービス

レポジトリを公開しているので、S3にデプロイするためのアクセスキーが隠せるCIサービスを選ぶ必要がある。

CIサービスのドキュメントをあさるとCircleCI、Codeshipあたりはサービス側にアクセスキーの設定を持てるようなのでCircleCIを使うことにした。

Travis CIとかwerckerは設定ファイルにアクセスキーを書いてレポジトリに含めないといけないらしいので選択肢からはずした。

CircleCI

1,500 build minutes per month / 1containerは無料で使える。ブログをビルドしてデプロイするくらいであれば事足りそう。

CIの設定を追加

CIしたいレポジトリのrootにcircle.ymlを追加する。ここでは以下のファイルを作って追加した。

machine:
  node:
    version: 0.12.10
  timezone: Asia/Tokyo

dependencies:
  pre:
    - sudo pip install awscli

test:
  override:
    - echo "skip test"

deployment:
  deploy:
    branch: master
    commands:
      - hexo clean
      - hexo g
      - hexo d
      - aws configure set preview.cloudfront true
      - aws cloudfront create-invalidation --distribution-id *** --paths '/*'

簡単に説明すると、

node.jsは0.12.10を使う
timezoneはAsia/Tokyo
awscliをインストール
testは特に何もしていないのでskipする
何かを実行しないと常にNO TESTと表示されてしまうのでechoコマンドを実行しておく
レポジトリのmasterに対してはデプロイコマンドを実行する

GitHubと連携

https://circleci.com/
GitHubのアカウントを使ってログインする。

ログインしたら左側のメニューバーに表示されているADD PROJECTSでCIするプロジェクトを選択する。

AWSの鍵を設定

S3にデプロイしたり、Cloudfrontのキャッシュを削除するためにaws cliで使うので鍵を設定する。

dashboardに表示されているプロジェクトの歯車をクリックすると設定画面が表示されるので、表示された設定の下に表示されているAWS CodeDeployをクリックする。

AWS CodeDeployは使わないが、Step1のフォームに鍵を入力すると、~/.aws/credentialsに鍵の設定ができる。

動作確認

masterに変更をpushするとcircle.ymlに記述した設定内容にしたがってjobが実行される。

成功すると次のようにSUCCESSと表示される。細かな出力についても確認できる様になっている。

slackに通知

ついでにCircleCIの出力をSlackに送る。SlackのwebhookのURLをCircleCIに設定をすれば簡単に通知することができる。

Slackにログインしてユーザ設定のApps & integrationsを選択して、遷移後の画面でCircleCIを検索するとCircleCIの設定が表示されるのでAdd Configurationをクリックする。出力するSlackチャンネルを選択するとwebhookのURLが表示されるのでそのURLをCircleCIで設定する。

PROJECT SETTINGSのChat NotificationsでSlackのWebhook URLをコピペする。

Rebuildか何かでCIを起動してjobが終わるとSlackに以下の様にメッセージが通知される。

いい感じ。

おわり。

参考

https://circleci.com/docs/