目的
以下のデプロイフローを実現
- 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を概念としてしか理解していなかった著者ですが、実際に調べて手を動かすとかなり理解が深まりました。