はじめに

巷で流行りの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が設定を読み込んでビルドを実行してくれます。

buildspec.yml

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/**/*とした場合は以下のような形で出力されます。

base-directoryを指定しなかった場合.

build
┣ index.html
┣ favicon.ico
┣ logo192.png
┣ logo512.png
┣ manifest.json
┣ robots.txt
┗ static
    ┣ css
    ┣ js
    ┗ media

base-directoryを指定した場合.

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します。

public/index.html

<!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を絡ませたり、状況に応じて通知を飛ばしたりといった複雑なことはまだまだ分からないので今後はその辺りにも触れつつお勉強をしていきたい所存であります。

はじめに

S3

バケット作成

静的ウェブサイトホスティング設定

バケットポリシー

CodeCommit

リポジトリの作成

クローン

プッシュ

CodeBuild

ビルドプロジェクト作成

プロジェクトの設定

ソース

環境

Buildspec

アーティファクト

buildspec.yml

version

phases

artifacts

CodePipeline

パイプライン作成

パイプラインの設定

ソースステージ

ビルドステージ

デプロイステージ

実行してみる

おわりに

参考