【初心者向け】Angular アプリケーションで AWS の CodeBuild を使う。

# はじめに
Angular アプリケーションの CI/CD 自動化に AWS の CodePipeline を使うために CodeBuild を使ったので、備忘録として書きます。

# 前提
文章量を少なくするため、Angular のアプリケーションを既に作成し、GitHub に push しているものとします。

# 流れ
以下の流れで作業を行います。
S3 のバケットの作成 -> buildspec.ymlの作成 -> CodeBuild のプロジェクトの作成 -> ビルド実行

### S3 のバケットの作成
今回は、ビルドの成果物をS3に保存します。そこで、まず S3 でバケットを作成します。
　S3 の管理画面を開き、「バケットを作成する」 をクリックします。
![Screen Shot 2019-09-14 at 13.51.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274610/765b8e5e-2589-505c-b80d-42c822c2e24b.png)

すると、バケット作成の画面が表示されるので、
バケット名、リージョンを入力して、「作成」 をクリックします。この時、バケット名は全世界で一意でなくてはなりません。これでバケットが作成されます。
![Screen Shot 2019-09-14 at 13.53.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274610/f67512c9-adea-8374-f527-ef8d18da4f3a.png)

### buildspec.ymlの作成
次に、Angular プロジェクトのルートディレクトリに buildspec.yml という名前の yml ファイルを作成します。CodeBuild を実行する時はこのファイルにしたがってビルドが実行されます。

```yaml

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 提供の公式ガイド](https://docs.aws.amazon.com/ja_jp/codebuild/latest/userguide/build-spec-ref.html#runtime-versions-buildspec-file)がありますのでそちらをご覧ください。
 buildspec.yml を書き終えたら、commit して GitHub に push します。

### CodeBuild のプロジェクトの作成
CodeBuild のプロジェクトを作成します。
　CodeBuild のページの右上の 「ビルドプロジェクトを作成する」 ボタンをクリックします。すると、「ビルドプロジェクトを作成する」 画面に遷移するので、プロジェクト名に適当なものを入力し、ソースプロバイダにGitHub を選択します。
![Screen Shot 2019-09-14 at 14.13.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274610/1c2f218c-b9e2-128f-19dd-42b34de14c1b.png)

「リポジトリ」 は public か、private のどちらかを選択して、リポジトリの URL を記入します。GitHub の認証画面に飛ぶので GitHub の ID とパスワードを入力し、認証します。
![Screen Shot 2019-09-14 at 14.26.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274610/d39e478a-29e6-c0bf-6177-c3dc522e62d6.png)

環境欄は、マネージド型イメージにチェックを付け、オペレーティングシステムに ubuntu を選択します。ランタイムには Standard を選択します。イメージとイメージのバージョンは最新のものを選択します。
　Buildspec 欄は、「buildspec ファイルを使用する」 にチェックを付けます。
　アーティファクト欄には、ビルド成果物の格納先を記入します。今回は先ほど作成した S3 のバケットを使用するので、タイプを S3 にします。バケット名の欄にフォーカスすると自分のバケット名の一覧が表示されるので、先ほど作成したバケット名を選択します。名前は、今回はzip形式にするので、拡張子が .zip のファイル名にして、アーティファクトのパッケージ化で 「zip」 にチェックを入れます。

![Screen Shot 2019-09-14 at 14.20.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274610/2f640750-d854-27b1-61e8-466f56b017e7.png)

ログの欄は 「CloudWatch Logs - オプショナル」 のチェックがオンになっていることを確認し、「ビルドプロジェクトを作成する」 をクリックします。

### ビルド実行
ビルドを実行するには、ビルドプロジェクトのページ右上の 「ビルドの開始」 ボタンをクリックします。ビルドステータスが 「成功」 と表示されていれば、ビルド成功です。もし、成功しなかった場合は、画面下の 「ビルドログ」 欄にログが表示されているので、それを見て調査します。
![Screen Shot 2019-09-14 at 14.30.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274610/4b8be00a-c2c8-a9f3-56a4-66baae72b634.png)