目的

以下のデプロイフローを実現

CodeCommitリポジトリのPushをトリガーに、CodeBuildによるビルド/テストを実行
ビルドに問題がなければWebアプリの実行ファイルをS3にデプロイ
S3にデプロイしたWebサイトをCloudFrontでキャッシング

参考記事

[AWS] CodeCommit + CodeBuild + CodePipeline + S3で静的コンテンツをデプロイする環境を作ってみる！

使用したAWSサービス

S3
CodeCommit
CloudFront
CodeBuild
CodePipeLine

CodeCommit

新規リポジトリを作成

S3

新規バケットを作成（アクセス許可はパブリックアクセスを全てブロック）

CloudFront

新規ディストリビューションの作成
オリジンドメイン：作成したS3バケット
S3バケットアクセス:
- OAIを使用（新規で作成）
- バケットポリシー：自動で更新

CodeBuild

新規プロジェクト作成

プロジェクトの設定

プロジェクト名を入力

ソース

ソースプロバイダに「AWS CodeCommit」を指定し、作成したリポジトリを選択

環境

環境イメージ：マネージド型イメージ
オペレーティングシステム：Amazon Linux 2
ランタイム：Standard
イメージ：aws/codebuild/amazonlinux2-aarch64-standard:1.0
イメージのバージョン：常に最新
サービスロール：新しいサービスロール

Buildspec

「buildspecファイルを使用」を選択し、ファイル名を入力

※こちらで指定するbuildspecファイルはソースプロジェクトに設置。

buildspec.yml

version: 0.1

phases:
 install:
  runtime-versions:
   nodejs: 12
  commands:
   - cd app
   # package.jsonのある階層に移動
   - npm ci
   # nodeのインストール
   - npm i n 
   - n latest
 build:
  commands:
   # テストやビルドの実行
   # S3へデプロイ
   - aws s3 sync dist/app s3://{S3バケット名} --delete
   # キャッシュ削除
   - aws cloudfront create-invalidation --distribution-id ${CLOUDFRONT_DIST_ID} --paths '/*'
 # アーティファクトの出力
 artifacts:
  files:
   - "**/*"

アーティファクト

タイプ：S3
作成したバケットを選択

ログ

CloudWatchログ：ON

※作成したプロジェクトを選択し、「ソース」メニューからビルド対象のリポジトリやコミットの指定が可能

ポリシーの設定

CodeBuildプロジェクトの作成時、新規でCodeBuildのロールを生成した場合は以下の権限を付与する必要あり

S3（書き込み、削除）
CloudFront Create Invalidation

CodePipeLine

新規プロジェクトを作成

パイプラインの設定を選択する

パイプライン名を入力し、「新しいサービスロール」を選択

ソースステージを追加する

ソースプロバイダー：AWS CodeCommit
作成したリポジトリとブランチを選択
検出オプション：AWS CodePipeLine
出力アーティファクト形式：完全クローン

ビルドステージを追加する

プロバイダー：AWS CodeBuild
作成したCodeBuildプロジェクトを選択
buildspec.ymlに埋め込むための環境変数を設定
- CLOUDFRONT_DIST_ID：CloudFrontのディストリビューションID

デプロイステージを追加する

デプロイ先のS3の情報を設定

※デプロイしたファイルをルートに配置する場合、S3オブジェクトキーは「/」を入力

動作確認

CodeCommitから変更内容をPushして、S3にデプロイされること、CloudFrontのオリジンURLからWebアプリを参照できることを確認

終わりに

CI/CDを概念としてしか理解していなかった著者ですが、実際に調べて手を動かすとかなり理解が深まりました。