はじめに
巷で流行りのCI/CDなる手法を試してみたくなり、せっかくなのでAWSを使って
Reactで作った静的コンテンツのビルド～S3の静的ウェブサイトホスティングを自動化してみました。
S3
バケット作成
静的ウェブサイトホスティングを行うS3バケットを作成します。
バケット名は何でもいいので任意の値を入力します。
今回はパブリックに静的ウェブサイトを公開するため、パブリックアクセスはすべて許可します。
その他はすべてデフォルトのままバケットを作成しましょう。
静的ウェブサイトホスティング設定
作成したバケットのプロパティから静的ウェブサイトホスティング設定を行います。
下記のように設定します。
静的ウェブサイトホスティング：有効
インデックスドキュメント：index.html
その他はデフォルトのまま変更を保存します。
バケットポリシー
アクセス許可 ＞ バケットポリシーを設定します。
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "Statement1",
"Principal": "*",
"Effect": "Allow",
"Action": [
"s3:GetObject"
],
"Resource": [
"<s3バケットのarnを指定する>"
]
}
]
}
CodeCommit
AWS CodeCommitはgitベースのソースコードリポジトリサービスです。
標準的なgitコマンドもサポートされており、GitHub等のサービスと同じようなイメージで使用可能です。
今回はCodeCommitを変更検知用のソースに設定します。
リポジトリの作成
まずはCodeCommitにてリポジトリを作成します。
適当にリポジトリ名を指定して作成するだけでOKです。
クローン
リポジトリを作成したら画面にある「URLのクローン」からURLをコピーしてローカルにクローンします。
ローカルの適当なディレクトリでコマンドプロンプトを開いてgit cloneします。
普通にgitコマンドが使えると楽ですね。
git clone <リポジトリURL>
cloneする際に認証が求められるのであらかじめIAM ＞ アクセス管理 ＞ ユーザより
任意のIAMユーザへ「AWS CodeCommit のHTTPS Git認証情報」を設定しておきましょう。
プッシュ
クローンしてきたリポジトリで適当に何かしらのソースコードを記述します。
今回は開発するのも面倒なので単純にcreate-react-appしただけのファイルをプッシュします。
# reactテンプレートを追加
cd ..
npx create-react-app sample-repo --template typescript
# CodeCommitへpush
cd sample-repo
git add -A
git commit -m "initial commit"
git push
CodeBuild
AWS CodeBuildはソースコードのビルドやテスト自動化を行ってくれるサービスです。
今回はCodeBuildを使ってソースコードをビルドしていきます。
ビルドプロジェクト作成
ソースコードをビルドするためのプロジェクトを作成します。
コンソールからCodeBuildにアクセスして「ビルドプロジェクトを作成」ボタンから作っていきましょう。
下記内容を入力していきます。
プロジェクトの設定
プロジェクト名に適当な値を入力します。
ソース
ソースプロバイダ： AWS CodeCommitを選択
リポジトリ： 先ほど作ったリポジトリを選択
リファレンスタイプ： ブランチを選択
ブランチ：master（メインブランチ）を選択
環境
環境イメージ：マネージド型イメージ
オペレーティングシステム：Amazon Linux2
ランタイム： スタンダード
イメージ：aws/codebuild/amazonlinux2-x86_64-standard:5.0
イメージのバージョン：このランタイムバージョンには常に最新のイメージを使用してください
環境タイプ：Linux
サービスロール：新しいサービスロール
ロール名：任意の値を入力
Buildspec
ビルド仕様：buildspecファイルを使用するを選択
アーティファクト
タイプ：Amazon S3
バケット名：適当なバケットを選択
アーティファクトのパッケージ化：なし
その他はすべて初期値のままでビルドプロジェクトを作成します。
buildspec.yml
ここからはローカルでの作業です。
リポジトリのルートディレクトリにbuildspec.ymlを追加します。
buildspec.ymlをルートディレクトリに配置することでCodeBuildが設定を読み込んでビルドを実行してくれます。
version: 0.2
phases:
install:
commands:
- npm install
build:
commands:
- npm run build
artifacts:
base-directory: build
files:
- '**/*'
version
必須項目。
buildspecのバージョンを指定します。
phases
必須項目。
ビルドの実行時にCodeBuildが実行するコマンドを記述します。
◆install
ビルドに必要なパッケージをインストールするためのコマンドです。
今回はnpmの依存パッケージインストールのため、npm installを設定しています。
◆build
ビルド処理を行うためのコマンドです。
今回はpackage.jsonに記述されたビルドを実行するためnpm run buildを設定しています。
artifacts
ビルドされたファイルの出力結果に関する情報を記述します。
◆base-directory
オプション項目。
CodeBuild がビルド出力アーティファクトに含めるファイルとサブディレクトリを決定するために使用する、元のビルドの場所を基準とした、1つ以上の最上位ディレクトリを表します。
今回はbuild配下のファイルのみを出力したいため、buildを最上位ディレクトリに設定しています。
◆files
ビルド出力アーティファクトに含めるファイルを指定します。
今回はbuild配下のすべてのファイルを指定しています。
base-directoryを指定せずにfilesをbuild/**/*とした場合は以下のような形で出力されます。
build
┣ index.html
┣ favicon.ico
┣ logo192.png
┣ logo512.png
┣ manifest.json
┣ robots.txt
┗ static
┣ css
┣ js
┗ media
index.html
favicon.ico
logo192.png
logo512.png
manifest.json
robots.txt
static
┣ css
┣ js
┗ media
CodePipeline
AWS CodePipelineはAWS上の様々なサービスや外部サービスと連携し、
リポジトリの更新を検知してビルドからテスト・デプロイまでのプロセスを構築できるサービスです。
パイプライン作成
まずはコンソールのCodePipeline画面からパイプラインを作ります。
パイプラインの設定
パイプライン名：任意の値を入力
サービスロール：新しいサービスロールを選択
その他はデフォルトのまま次へ進みます。
ソースステージ
アプリケーションのソースに関する情報を設定します。
今回はCodeCommitでソースを管理しているので以下のように設定していきます。
ソースプロバイダー：AWS CodeCommit
リポジトリ名：先ほど作成したリポジトリ
ブランチ名：master（メインブランチ）
その他はデフォルトのまま次へ進みます
ビルドステージ
ビルド処理関連の設定を行います。
今回はCodeBuildを用いてビルドを行うので以下のように設定します。
プロバイダー：AWS CodeBuild
プロジェクト名：先ほど作成したCodeBuildプロジェクトを選択
その他はデフォルトのまま次へ
デプロイステージ
ビルド結果のデプロイに関する設定を行います。
今回はビルド結果をS3へ格納するため以下のように設定します。
デプロイプロバイダー：Amazon S3
バケット：先ほど作成したホスティング用バケットを選択
デプロイする前にファイルを抽出する：チェック
その他はデフォルトのまま次へ進みパイプラインを作成します。
実行してみる
ここまでの設定でmasterブランチへのプッシュをトリガーにしてビルド～S3バケットへのデプロイを行ってくれるはずなのでやってみましょう。
ローカルでindex.htmlの<title>を変更してpushします。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>タイトルを変更しました。</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
git add -A
git commit -m "タイトルを変更"
git push
コンソールからCodePipelineを確認
なんかうまいこと行ってそうな雰囲気を感じる。
バケットを見に行くとbuild配下にいそうなファイル達がいますね。
バケットのウェブサイトエンドポイントにアクセスしてみましょう。
しっかりタイトルの変更が反映されていますね。
これでmasterブランチが更新されると自動的にビルドしてデプロイするCI/CDパイプラインの構築ができました。
おわりに
さて、今回はReactで作った静的ウェブサイトをS3でホスティングするまでをとってもシンプルな構成で自動化してみましたが意外とお手軽に構築できましたね。
とはいえテストを自動化したり、デプロイ先の環境をいい感じに変更したり、ECRを絡ませたり、状況に応じて通知を飛ばしたりといった複雑なことはまだまだ分からないので今後はその辺りにも触れつつお勉強をしていきたい所存であります。
参考