このブログのデプロイを自動化しました。

処理の流れ

1. GitHubへのPushをトリガーに、CodePipelineを実行
2. CodePipelineは、CodeBuildを実行
3. CodeBuildはbuildspec.ymlに従って処理を実行
   1. ReactプロジェクトをBuild
   2. BuildしたファイルをS3へ配置
   3. Cloudfrontのキャッシュをクリア
4. CodeBuildは、Codepipelineに結果を通知

構築手順

CodePipelineとCodeBuildの作成

1. CodePipelineを開き、パイプラインの作成をクリック
2. パイプライン名 blog
3. ソースプロバイダーにGitHub(バージョン2)を選び、リポジトリとブランチを選択
4. ソースコードの変更時にパイプラインを開始するのチェックが入っていることを確認
5. ビルドプロバイダーにAWS CodeBuildを選択
6. プロジェクトを作成するを選択
   1. プロジェクト名にblogを入力
   2. オペレーションシステムにAmazon Linux2を選択
   3. ランタイムにStandardを選択
   4. イメージにaws/codebuild/amazonlinux2-x86_64-standard:4.0を選択
   5. 環境変数にS3_BUCKET_NAMEを追加
   6. 環境変数にCLOUDFRONT_DISTRIBUTION_IDを追加
   7. その他の設定はデフォルトのままCodePipelineに進むをクリック
7. パイプラインの作成ウィザードに戻ってくるので次にをクリック
8. 導入段階をスキップを選択する。デプロイはCodeBuildで行うため、CodePipelineのデプロイは不要
9. パイプラインを作成をクリック

CodeBuildを実行するロールにS3とCloudfrontへのアクセス権限を付与

1. IAMを開く
2. codebuild-blog-service-roleという名前のロールを選択
3. 許可を追加のポリシーのアタッチをクリック
4. AmazonS3FullAccessを検索して選択
5. AmazonCloudFrontFullAccessを検索して選択

GitHubのリポジトリにbuildspec.ymlを追加

1. buildspec.ymlを追加

   touch buildspec.yml

2. buildspec.ymlに以下を追加

   version: 0.2
   phases:
     build:
       commands:
         - npm install
         - npm run build
     post_build:
       commands:
         - aws s3 sync out s3://${S3_BUCKET_NAME}
         - aws cloudfront create-invalidation --distribution-id ${CLOUDFRONT_DISTRIBUTION_ID} --paths '/*'

3. コミットしてプッシュ

以上で、GitHubへのPushをトリガーに、AWS Codepipelineを実行する設定は完了です。 mainブランチにPushすると、コンテンツの配信が自動的に行われます。