Angular 製 SPA を AWS CodeBuild を使ってデプロイする

SPA を CloudFront + S3 で配信する状況です。ここでCIをまわすことになった場合、以下のような選択肢があります：

• CircleCI や TravisCI などのサードパーティ製ツールを使う
• AWS CodeBuild を使う

すでにプロジェクトが走っていて、CircleCI や TravisCI を利用している場合はそれに乗せることになると思います。一方、SPA単体のプロジェクトをこれから始めるというようなケースでは、 CodeBuild を使うほうがシンプルかつすぐに適用できる場合もあります。今回は CodeBuild を用いてSPAを配信してみます。

対象とするSPA

サーバーレス可視化の記事で作成したSPAをを配信してみます。

作業内容

すでにSPAプロジェクトがあり、配信もできているという前提で、配信用S3へ成果物を置くためには以下の手順を踏みます：

• buildspec.ymlの定義
• CodeBuild で新しいプロジェクトを作成
• CodeBuild 実行

buildspec.ymlの定義

SPAのプロジェクトに新しく追加します。

buildspec.yml

version: 0.2

phases:
  install:
    commands:
      - pip install --upgrade pip
      - pip install --upgrade awscli
      - npm install -g n
      - n latest
      - npm update -g npm
      - npm install
      - npm -g --unsafe-perm install node-sass
      - npm install --unsafe-perm -g @angular/cli@1.4.9
      - npm install
  build:
    commands:
      - ng build
  post_build:
    commands:
      - aws s3 sync dist s3://vote-uploader/site --delete # 1
      - aws cloudfront create-invalidation --distribution-id 　${CLOUDFRONT_DISTRIBUTION_ID} --paths '/*'　# 2

• 1: SPA を置く S3 のパスを指定し、そこへ dist 以下すべてのファイルをアップロードします。
• 2: S3 上の SPA は CloudFront 経由で配信しています。ファイルアップロード後、CloudFront の Cache を無効化するためのコマンドです。

これを、リポジトリへプッシュします。

CodeBuild のプロジェクト作成

以下のように作成しました。

このとき、CloudFront の ID を環境変数に設定してください。

ソース

今回は GitHub 上のプロジェクトを対象にしました。連携しようとすると GitHub の認証を求められますので、ウィザードに従って進めます。

ビルド方法

node.js のイメージをベースに、aws のコマンドクライアントを使うために pip でインストール、さらに Angular のビルドコマンドを利用するために npm で angular-cli をインストールしています。その後、 ng build を実行することで、 dist ディレクトリ以下に成果物が生成されます。

成果物のデプロイ

CodeBuild は、生成した成果物を EC2 なり他の場所へデプロイすることを前提としています。それをアーティファクトとしてS3に置きます。が、今回は CodeBuild によって生成されたものを直接配信用バケットに置くようにします。

vote-uploader(bucket)
├── site              # SPA 配信用

それを行っているのが post_build のコマンドです。

aws s3 sync dist s3://vote-uploader/site --delete

ビルド実行前に…IAMポリシーのアタッチ

これでビルド自体は実行できますが、このままではS3へのアクセス権限も、 CloudFront へのアクセス権限もないので、パーミッションエラーが発生します。IAMロールにポリシーをアタッチしましょう。

CodeBuild でビルド実行

あとは実行するだけです。CodeBuild の AWSコンソールで、ビルドプロジェクト＞プロジェクトを選択＞ビルドの開始 を押します。

成功したらS3バケットの配信元フォルダを見てみます。更新日時が新しくなっていればOKです。

CloudFront での Cache invalidation も正常に実行されています。

まとめ

AWS CodeBuild を使ってSPAを配信しました。CodeBuild の良い点は、S3へアクセスするためのアクセスキーの発行が不要な点です。GitHub や CodeCommit からコードさえ取得すれば、S3へのデプロイは容易です。今回は、成果物を直接指定したフォルダへアップロードするよう設定することですぐに新しいSPAが利用可能なようにしました。CodePipeline を利用すればコードをPUSHした時点でデプロイまで行ってくれるようになると思うので、今後はCodePipelineとも連携してみたいと思います。