CodeBuildやCodePipelineを使うと、レポジトリにプッシュすると自動でデプロイすることができます。例えば、Reactアプリを作成して、masterブランチにプッシュすると、自動で指定したS3にビルド結果をアップロードしてくれます。デプロイ作業を自動化できるので便利です。
S3バケットの準備
S3バケットを作成します。S3を一般公開しておきます。
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicRead",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::あなたのバケット名/*"
}
]
}これでURLからS3にアクセスできるようになります。
フォルダ指定でindex.htmlにアクセスできるようにするために、静的ウェブサイトホスティングを有効にします。「設定＞静的ウェブサイトホスティング」を編集し、有効にします。インデックスドキュメントとエラードキュメントを設定します。index.htmlとerror.htmlで問題ないかと思います。
IAMユーザーの準備
以下のポリシーをもったユーザーを作成します。このIAMユーザーは先ほど作ったS3にアクセスできます。ビルド後に、このIAMユーザーにS3へのビルドファイルを転送させるのに使用します。Access key IDとSecretは後で使うので取得しておきます。
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "VisualEditor0",
"Effect": "Allow",
"Action": [
"s3:PutObject",
"s3:ListBucket",
"s3:DeleteObject",
"s3:PutObjectAcl"
],
"Resource": [
"arn:aws:s3:::あなたのバケット",
"arn:aws:s3:::あなたのバケット/*"
]
},
{
"Sid": "VisualEditor1",
"Effect": "Allow",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::あなたのバケット/*"
}
]
}CodeBuildの準備
CodeBuildでビルドプロジェクトを作成します。
- 名前：プロジェクトの名前です。
- ソース：レポジトリとブランチを指定してください。
- 環境：マネージド型を選択します。OSはUbuntu、ランタイムはStandard、イメージはaws/codebuild/standard:3.0、イメージバージョンは常に最新、環境タイプはLinuxとします。
CodePipelineの準備
CodePipelineを準備します。
- パイプライン名を記入します。自動で必要なロールが作られます。
- ソースは準備したものを使用します。
- ビルドは準備したものを使います。この際、作成したIAMユーザーのAWSACCESSKEYIDとAWSSECRETACCESSKEYを環境変数にいれておきます。
- デプロイは使用しないのでスキップします。
buildspecの準備
buildspec.ymlファイルを以下のように準備します。
version: 0.2
phases:
install:
commands:
- touch .npmignore
- npm install -g gatsby
pre_build:
commands:
- echo Entring app directory
- cd react-app
- npm install
build:
commands:
- echo Build started on `date`
- npm run build
post_build:
commands:
- aws s3 sync public/ s3://あなたのバケット --delete --acl public-read各項目の意味は以下の通りです。
- version：ビルドスペックのバージョンです。
- phases：処理の流れを記述します。
- install：ビルドに必要な環境構築の処理を行います。
- pre_build：ビルド前の処理を行います。
- build：ビルドを行います。
- post_build：ビルド後の処理を行います。ここではAWS CLIによりpublicフォルダをs3バケットと同期しています。publicは環境に応じて名前を変えてください。
レポジトリの方にbuildspec.ymlファイルをあげておきます。以下のような構成になります。
repository-root/
├── buildspec.yml
└── react-app
├── README.md
├── build
├── node_modules
├── package-lock.json
├── package.json
├── public
├── src
├── tsconfig.json
└── yarn.lock確認
最後に、指定したブランチにプッシュします。すると、自動的にビルドされ、S3に格納されます。失敗した場合は、マネージメントコンソールにログが表示されるので、確認してバグを取り除きます。