概要
Reactで作成したアプリをS3にアップロードし、静的ホスティングを実施します。
Githubに資産をPUSHする度に自動でリリースされるようにします。
利用するものは、S3、CodePipeline、CodeBuildを利用します。
S3・・・静的ホスティング と ビルドファイルを格納
CodeBuild・・・ビルドを実行
CodePipeline・・・実行するための契機、CodeBuild実行、S3へリリースという一連を記載
リリースするアプリは以下で作成したものにします。
開発
S3
※S3の作成などは多少割愛しているので参考文献など見ていただければと思います
ホスティング用のバケットを作成
バケット作成します。
バケット名は任意の値を設定し、以下の「パブリックアクセスをすべてブロック」チェックを変更します。
作成後、バケットポリシーを設定します。「XXXXX」の箇所は作成したバケット名を記載します。
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::XXXXX/*"
}
]
}
プロパティを更新します。「静的ウェブサイトホスティング」を編集し、有効にするにチェックを入れます。
この段階で対象バケットに「index.html」を配置し、プロパティの「静的ウェブサイトホスティング」に記載のあるエンドポイントにアクセスすると画面が表示されます。
ビルドファイル出力用のバケットを作成
Reactで作成したアプリになるので、一度ビルドを実施してからリリースする必要があります。
なのでビルドしたファイルを格納（ZIP）するようのバケットを作成します。
今回作成する際は、「パブリックアクセスをすべてブロック」にチェック入れた状態で作成します。
CodeBuild
AWS CodeBuild は、ソースコードをコンパイルし、テストを実行し、すぐにデプロイできるソフトウェアパッケージを生成する、フルマネージド型の継続的インテグレーションサービスです。
https://aws.amazon.com/jp/codebuild/
ビルドプロジェクトを作成します。
プロジェクト名は任意の値を入力します。
ソースを入力していきますが、今回はGitHubにある資産を対象にします。
ソースプロパイダをGitHubにし「OAuth」を利用して認証していきます。
（GitHubのログイン画面が表示されるのでログインします。）
環境は今回「マネージド型イメージ」を利用します。
サービスロールはCodeBuildとS3へのアクセルが可能なものを選択します。
アーティファクトはS3を選択して、バケット名はビルドファイル出力ように作成したバケットを選択しします。名前は任意の名前でZIP化したファイルなので「~.zip」とします。
アーティファクトのパッケージ化は「ZIP」を選択します。
Buildspecにて「buildspec ファイルを使用する」を選択します。
この設定は「buildspec.yml」を利用してビルド実行時に実施する内容を記載するものになります。
このファイルはプロジェクト配下に配置します。細かい設定は参考文献を参照してください。
installにはビルドコマンド実施する上で必要な準備を記載しています。
ビルド時に実施するコマンドは「build:」に記載しています。
ビルド後にS3に出力するファイルは「artifacts:」に記載しています。「base-directory:」に出力するフォルダを記載しています。今回のアプリはビルド後のファイルは「build」に出力するため「base-directory: build」と記載しています。また「**/*」と記載することでbase-directory配下の全てのファイが出力対象となります。
version: 0.2
env:
shell: /bin/sh
phases:
install:
runtime-versions:
nodejs: 18
commands:
- npm install
# steps:
build:
commands:
- echo "start build"
- npm run build
- echo "end Build"
post_build:
commands:
- echo "start post_build"
- echo "end post_build"
artifacts:
files:
- "**/*"
base-directory: build
CodePipeline
AWS CodePipeline はフルマネージドの継続的デリバリーサービスで、迅速かつ確実性のあるアプリケーションとインフラストラクチャをアップデートするパイプラインのリリースを自動化します。
https://aws.amazon.com/jp/codepipeline/
以下のステージに分かれて設定していきます。
ソース：インプットとなる資産がある場所などを設定します。
今回はGitHubを指定します。
ビルド：ビルドを実施します。
今回はCodeBuildで作成したビルドプロジェクトを指定します。
デプロイ：リリース先を指定します。
今回はCodeBuildで出力したS3をインプットにし、
静的ホスティングしているS3へ出力します。
ソースを作成。CodeBuild同様プロパイダはGitHubを指定します。
対象のリポジトリを入力し、ブランチ名を入力します。
対象ブランチが変更された際にこのCodePipelineが実行されるようにします。
次にビルドステージを作成します。
CodeBuildで作成プロジェクトを選択します。
次にデプロイステージを作成します。
プロパイダーに「S３」を指定して、バケットは静的ホスティングを指定したバケットを設定します。
「デプロイ前にファイルを抽出する」にチェックをいれます。チェックをいれることでZIPファイルが展開されてデプロイされます。
最後に
正常に動くと対象リポジトリの特定ブランチに変更が加わると、自動でS3にリリースされるようになります。
参考文献
