はじめに

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 - オプショナル」のチェックがオンになっていることを確認し、「ビルドプロジェクトを作成する」をクリックします。

ビルド実行

ビルドを実行するには、ビルドプロジェクトのページ右上の「ビルドの開始」ボタンをクリックします。ビルドステータスが「成功」と表示されていれば、ビルド成功です。もし、成功しなかった場合は、画面下の「ビルドログ」欄にログが表示されているので、それを見て調査します。