はじめに
Angular アプリケーションの CI/CD 自動化に AWS の CodePipeline を使うために CodeBuild を使ったので、備忘録として書きます。
前提
文章量を少なくするため、Angular のアプリケーションを既に作成し、GitHub に push しているものとします。
流れ
以下の流れで作業を行います。
S3 のバケットの作成 -> buildspec.ymlの作成 -> CodeBuild のプロジェクトの作成 -> ビルド実行
S3 のバケットの作成
今回は、ビルドの成果物をS3に保存します。そこで、まず S3 でバケットを作成します。
S3 の管理画面を開き、「バケットを作成する」 をクリックします。
すると、バケット作成の画面が表示されるので、
バケット名、リージョンを入力して、「作成」 をクリックします。この時、バケット名は全世界で一意でなくてはなりません。これでバケットが作成されます。
buildspec.ymlの作成
次に、Angular プロジェクトのルートディレクトリに buildspec.yml という名前の yml ファイルを作成します。CodeBuild を実行する時はこのファイルにしたがってビルドが実行されます。
version: 0.2
phases:
install:
runtime-versions:
nodejs: 10
commands:
- npm install -g
- npm install --save-dev @angular-devkit/build-angular
- npm install -g @angular/cli
build:
commands:
- ng build
artifacts:
files:
- '**/*'
base-directory: 'dist*'
「runtime-versions」 に使用する nodejs の version を記入し、「commands」 に インストールの command やビルド時の command を記入します。artifacts にはビルドの成果物の path を記入します。base-directoryが成果物のディレクトリで、filesが成果物のファイルです。ng new コマンドで Angular プロジェクトを作成した時のデフォルトでは、ng build でビルドすると、dist 下に成果物が作成されるので、base-directory に dist* を、files に */ を記入します。
詳しい buildspec.yml の仕様は AWS 提供の公式ガイドがありますのでそちらをご覧ください。
buildspec.yml を書き終えたら、commit して GitHub に push します。
CodeBuild のプロジェクトの作成
CodeBuild のプロジェクトを作成します。
CodeBuild のページの右上の 「ビルドプロジェクトを作成する」 ボタンをクリックします。すると、「ビルドプロジェクトを作成する」 画面に遷移するので、プロジェクト名に適当なものを入力し、ソースプロバイダにGitHub を選択します。
「リポジトリ」 は public か、private のどちらかを選択して、リポジトリの URL を記入します。GitHub の認証画面に飛ぶので GitHub の ID とパスワードを入力し、認証します。
環境欄は、マネージド型イメージにチェックを付け、オペレーティングシステムに ubuntu を選択します。ランタイムには Standard を選択します。イメージとイメージのバージョンは最新のものを選択します。
Buildspec 欄は、「buildspec ファイルを使用する」 にチェックを付けます。
アーティファクト欄には、ビルド成果物の格納先を記入します。今回は先ほど作成した S3 のバケットを使用するので、タイプを S3 にします。バケット名の欄にフォーカスすると自分のバケット名の一覧が表示されるので、先ほど作成したバケット名を選択します。名前は、今回はzip形式にするので、拡張子が .zip のファイル名にして、アーティファクトのパッケージ化で 「zip」 にチェックを入れます。
ログの欄は 「CloudWatch Logs - オプショナル」 のチェックがオンになっていることを確認し、「ビルドプロジェクトを作成する」 をクリックします。
ビルド実行
ビルドを実行するには、ビルドプロジェクトのページ右上の 「ビルドの開始」 ボタンをクリックします。ビルドステータスが 「成功」 と表示されていれば、ビルド成功です。もし、成功しなかった場合は、画面下の 「ビルドログ」 欄にログが表示されているので、それを見て調査します。
