はじめに

CodePipeline 設定手順の備忘録。

やりたいこと

GitHubへのpushをトリガーにして、S3に自動デプロイしたい
環境を分けたい（開発、ステージング、本番）
デプロイ結果をslack通知したい

構成図

※ ng new コマンドで作成した Angular のサンプルコードをデプロイします。

設定手順

1. CodePipeline の設定

「パイプラインの作成」から作成を開始します。

パイプライン名を入力して、初回はロールを新規で作成します。

ソースプロバイダーはGitHubを選択。（バージョン1は非推奨となっているため、バージョン2を選択。）

参考：

「新しいアプリをインストールする」を選択。

リポジトリを選択し、「Install」を押下します。

CodePipelineの設定画面に戻るので、リポジトリとブランチを選択します。
~~（開発やステージング、本番で環境を分けて使う場合は、環境ごとにブランチとパイプラインを作成するのがいいのでしょうか？）~~ → 環境ごとにブランチを分ける、というのは本来のgitの使い方ではないためNG

次にビルドステージを設定します。
AWS CodeBuild と Jenkins が選択可能ですが、ここでは AWS CodeBuild を選択。
「プロジェクト名」項目では、「プロジェクトを作成する」を選択する。

プロジェクトを作成します。
（ここで設定した環境変数は、buildspec.ymlで呼べるらしい。）

最後にデプロイステージの設定。S3を選択します。（バケットは事前に作成しておきます）

設定が完了すると、設定したパイプラインが実行されますが、CodeBuild の実行で失敗します。
CodeBuild を実行するには、buildspec.yml というyamlファイルにビルド時に実行するシェルコマンドを記述し、デプロイするソースコードのルートディレクトリに配置する必要があります。

ルートディレクトリに以下のような buildspec.yml を作ります。
ng build で出力された dist ディレクトリ配下のファイルを S3 にアップロードしています。

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: 12
    commands:
      - npm install -g
      - npm install --save-dev @angular-devkit/build-angular
      - npm install -g @angular/cli
  build:
    commands:
      - ng build
      - aws s3 sync dist s3://src-2021/application
artifacts:
  files:
    - '**/*'
  base-directory: 'dist*'

参考：

（runtime-versions で指定する node.js のバージョンは、10と12のみのようです。）

buildspec.yml を git push すると、パイプラインが実行され、今度は成功です。

S3 にデプロイされました。

備考：
CodeBuild のロールに S3 へのアクセス許可ポリシーをアタッチしておく必要あり。

2. slack への通知設定

CodePipeline, CodeCommit, CodeBuild は、SNS もしくは ChatBot と連携ができるので、
ChatBot と連携させて slack　通知します。

成功や失敗時以外にも、トリガーとなるイベントがいろいろ選択可能です。

設定後、再度パイプラインを実行して、slack通知を確認できました。

以上で設定完了です。

追記

・GitHubへのpushをトリガーするというのは、手軽にデプロイができすぎてしまうので、本番環境の場合は考える必要がある。