GitHub + CodeBuild + CodePipeline + Route 53 + CloudFront + S3でCI/CDパイプラインを構築する

概要

GitHubの対象ブランチが更新されたらS3のWebアプリケーションが更新されるCI/CDパイプラインを構築します。
GitHubにはVite + Reactのアプリケーションを用意し、mainブランチが更新されたらCodePipelineでCodeBuildがトリガーされ、ビルド結果がS3に転送されるようにします。

構築

Route 53でドメインを取得

Route 53でお好みのドメインを取得します。
また、ACMで証明書を発行しておきます。

S3にバケットを作成

Webアプリケーションのファイルを配置するためのバケットを作成しておきます。

CloudFrontディストリビューションを作成

Origin Domainとして先ほど作成したS3バケットを選択肢、OAC（Origin Access Control）を使ってアクセスさせるために「Create new OAC」からOACを作成して選択します。


また、デフォルトルートオブジェクトはindex.htmlにしておきます。

S3のバケットポリシーを更新

ナビゲーションに従ってポリシーをコピーします。


続いてS3のバケットポリシーを更新します。

Route 53にレコードを作成

Route 53に先ほど作ったCloudFrontのディストリビューションへのAレコードを追加します。

VPCを作成

CodeBuildを実行するVPCを作成します。
作成するリソースで「VPCなど」を選択し、関連リソースも作成されるようにします。

SGを作成

CodeBuild用のSG（Security Group）を作成します。
CodeBuildはインバウンドを受け付ける必要はないので定義なし、アウトバウンドはすべて許可しておきます。

CodeBuildでビルドプロジェクトを作成

CodeBuildのサービスロールでは、S3へのアクセスが必要なので不足している場合は適宜ポリシーをアタッチしてください。


後ほどGitHubのリポジトリに追加するbuildspec.ymlで参照する環境変数を追加します。


buildspec.ymlを使用するように設定します。

CodePipelineを作成

今回はbuildspec.ymlの内容でS3への転送まで完了するので、導入段階はスキップします。

buildspec.ymlを追加

GitHubリポジトリにbuildspec.ymlを追加します。
シンプルにビルドしてS3に転送するだけの例ですが、必要に応じて処理は追加してください。

yaml_____buildspec.yml_____version: 0.2

phases:
  pre_build:
    commands:
      - echo Installing dependencies...
      - npm i
  build:
    commands:
      - echo Building the application...
      - npm run build
  post_build:
    commands:
      - echo Build completed on `date`
      - echo Copying files to S3...
      - aws s3 sync dist/ s3://$S3_BUCKET_NAME --delete

artifacts:
  files:
    - '**/*'
  base-directory: dist

まとめ

今回はRoute 53 + CloudFront + S3でWebアプリケーションを配信するCI/CDパイプラインを構築しました。
次の記事ではこのCloudFrontディストリビューションからリクエストを行うバックエンドアプリケーションをFargateでデプロイするためのCI/CDパイプラインの構築メモをまとめようと思います。