angular

AngularをAWS CodeBuildでビルドしS3に上げてCloudFrontを更新するまでのメモ

やってみました。主に参考にしたのは以下の記事で、そちらも是非とも読んで欲しいです。

Angular 製 SPA を AWS CodeBuild を使ってデプロイする | Developers.IO

自分が工夫・アレンジしたポイントとか

基本的に上記リンクの記事通りにやれば上手く行くんですけども、自分的にもう少しアレンジしたかったというか、そのままやっちゃうと不安な点とかあったので、自分なりに改善をしてみました。

改善してみたポイントは以下の通りです。

  • CodeBuildが事前に用意しているイメージだとブラックボックスっぽいというか、インストールするものは自分で決めたい(執筆時点でCodeBuildが用意しているnode.jsイメージは8だが、最新版の10を使いたいケースに対応)
  • 以前AWS-CLIの最新バージョンがインストール出来ずに苦労したので、バンドルからインストールした最新版のAWS-CLIを使いたい。buildspec.ymlにそれを記述しても良いかもしれないがビルドに時間かかりそうなのと、記述が面倒くさい…
  • 要は自分が作ったdockerイメージを使ってビルドしたいだけ

という事で、事前にdockerイメージを用意して、そのイメージを使ってAngularをビルドすることにしてみました。

dockerイメージの準備

作ったDockerfileはこんな感じです。

FROM node:10-alpine

RUN apk add --no-cache curl python

RUN curl "https://s3.amazonaws.com/aws-cli/awscli-bundle.zip" -o "awscli-bundle.zip" && \
  unzip awscli-bundle.zip && \
  ./awscli-bundle/install -i /usr/local/aws -b /usr/local/bin/aws

CMD ["/bin/sh"]

ここは種も仕掛けもなくてnode:10-alpineのdockerイメージにAWS-CLIをインストールしているだけです(angular-cliは最新版をインストールするためbuildspecにてビルド時にインストールする)。

これをDockerHubのパブリックリポジトリに上げます。

CodeBuildにてビルドする

前準備はすっかり整ったので、実際にCodeBuildを設定していきます。

まず最初に、何をビルドするかを決めます。

codebuild1

今回はAWSのCodeCommitのレポジトリに上げたコードをビルドします。ここでGitHubのリポジトリも設定できるのですが、執筆時点ではmasterブランチのコードしかビルド出来ない模様です。自分の場合はgit-flowを使っていて、releaseやhotfixのブランチのコードをビルドする事もあり得るのでそれでは困る… という事でCodeCommitにpushすることにしました。

次にどのようにビルドするかを決めます。

codebuild2

先に述べた通り今回は自作dockerイメージを使ってビルドするので、DockerHubのパブリックリポジトリを指定します。

ビルド時に実行するbuildspec.ymlは以下の通りです。

version: 0.2

phases:
  pre_build:
    commands:
      - npm install
      - npm install -g @angular/cli
  build:
    commands:
      - ng build
  post_build:
    commands:
      - aws s3 sync dist/YOUR_PROJECT_NAME-admin-front s3://${BUCKET_NAME} --delete
      - aws cloudfront create-invalidation --distribution-id ${CLOUDFRONT_DISTRIBUTION_ID} --paths '/*'

簡単に解説すると、angular-cliをインストール後、ビルドしてS3にアップロードし、CloudFrontのキャッシュを更新しています(CloudFront使っていない場合は最後のコマンドは不要)。

S3のバケット名とCloudFrontのIDを環境変数にしているのは、stagingとproductionの環境を分けるためです。なのでこのCodeBuildの設定も、stagingとproductionとで2つ作ることになるでしょう。

その他のオプションについて見ていきます。

codebuild3

Artifactsの設定は今回は行いません。なぜならばaws-cliで直接S3に上げに行くからです。CloudFrontのキャッシュ更新の必要があるため、どうしてもこういう処理になってしまいます。

Service roleについても、後からIAM経由で権限を付与していきますので、とりあえず初期設定のままで良いです。

最後に環境変数の設定です。

codebuild4

先にも述べた通り、stagingとproductionとで環境を分けるので各々の値を入力します。

CodeBuildに必要な権限を付与

S3へのアップロード、CloudFrontのキャッシュ更新に必要な権限をCodeBuildに付与しましょう。IAMのRoleから権限を付与していきます。

codebuildrole1

実際にビルドしてみる

以上で設定は終了です。実際にビルドしてみましょう。まずはStart Buildボタンをポチッとします。

build1

次にビルドの詳細画面が出てきます。

build2

今回はstaging環境下でのビルドを想定し、developブランチからビルドします。

result1

無事にビルド出来た模様です。

pushと同時にビルドしたいのならばCodePipelineを利用する

Gitへのpushと同時にビルドしたいのならば、CodePipelineを使って設定します。

pipeline

ただし残念なのが、上の写真を見て分かる通り、現在存在するブランチ名しか指定する事ができません(写真でいうとmasterとdevelop)。本来ならば正規表現で指定してreleaseブランチやhotfixブランチも監視してくれるとありがたいんですけどね。hotfixブランチをビルドする場合は、今の所Codebuildの画面から手動でやるしか無いようです。