目的

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

• 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ファイルはソースプロジェクトに設置。

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を概念としてしか理解していなかった著者ですが、実際に調べて手を動かすとかなり理解が深まりました。