CodebuildでS3に静的ホスティングを自動化

概要

• 10分程で設定可能です。
• AWS Codebuildでビルドを行う。
• Amazon S3に静的ホスティングをする。
• GithubをWebhookして、上記を自動化する。

登場人物の紹介

AWS Codebuild

AWS CodeBuild は、クラウドで動作する完全マネージド型のビルドサービスです。CodeBuild はソースコードをコンパイルし、ユニットテストを実行して、すぐにデプロイできるアーティファクトを生成します。CodeBuild により、独自のビルドサーバーのプロビジョニング、管理、スケーリングが不要になります。Apache Maven、Gradle などの一般的なプログラミング言語とビルドツール用のパッケージ済みのビルド環境を提供します。CodeBuild のビルド環境をカスタマイズして、独自のビルドツールを使用することもできます。CodeBuild​ はピーク時のビルドリクエストに合わせて自動的にスケーリングします。 公式

要するに、『ビルドを行い、ユニットテストを実行し、すぐにデプロイできるバイナリファイル的なものを作成する』です。

Amazon S3

Amazon S3は、Amazon Simple Storage Service はインターネット用のストレージサービスです。また、ウェブスケールのコンピューティングを開発者が簡単に利用できるよう設計されています。
Amazon S3 のウェブサービスインターフェイスはシンプルで、いつでも、ウェブのどこからでも容量に関係なくデータを格納および取得できます。これにより、すべての開発者が、スケーラブルで信頼性が高く、かつ高速で安価なデータストレージインフラストラクチャを利用できるようになります。このインフラストラクチャは、Amazon が使用しているウェブサイトのグローバルネットワークと同じものです。このサービスの目的は、規模の拡大や縮小のメリットを最大限に活かし、開発者に提供することです。

要するに、『ほぼ無限大に入るストレージ』です。公式

Github

省略

以上で登場人物の紹介を終わります。

具体的な設定等

ディレクトリ構造

AWSでCodeBuildする際は、ディレクトリ構造を正確に把握しておくことが非常に重要です。
私の場合は、以下のようなディレクトリ構造になっています。
今回、AWS Codebuildでビルドを行い、デプロイしようとしているのは、frontディレクトリの中身です。 これらのコードをbackendやdatabaseも含めてGithubの任意のリポジトリにPushしておきます。

package.jsonのscript部分の内容

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

buildspec.ymlの内容

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: 10
  pre_build:
    commands:
      - echo Installing source NPM dependencies...
      - cd front
      - yarn install
  build:
    commands:
      - yarn build
  post_build:
    commands:
      - echo Build completed on `date`
      - echo Distributing to S3...
      - aws s3 sync --exact-timestamps --delete build s3://[デプロイ先バケット名]

ディレクトリ構造によっては、pre_buildのcd frontなどが不必要 (各々のディレクトリ構造に合わせて下さい)。

CodeBuild設定

1. AWSマネジメントコンソールにログイン
2. ログイン後、CodeBuildサービスを選択し、プロジェクトの作成を押下

3. 任意のプロジェクト名を入力
   

4. 送信元の設定
   ・ソースプロバイダ・・Github
   ・リポジトリ・・Githubアカウントのリポジトリ
   ・Githubリポジトリ・・先ほどのコードをPushしたリポジトリを選択
   

5. プライマリソースのウェブフックイベント設定
   ・ウェブフックオプショナル・・・チェック
   ・イベントタイプ・・・PULL_REPULL_REQUEST_MERGEDを選択（任意のイベントタイプを選択可）

6.　環境の設定
・環境イメージ・・・マネージド型イメージ
・オペレーティングシステム・・・Ubuntsu
・ランタイム・・・Standard
・イメージ・・・最新のもの
・イメージのバージョン・・・最新のもの
・環境タイプ・・・Linux

7.　サービスロールの設定
以下の画像では、既存のサービスロールとなっていますが、初めて使用する方は、新しいサービスロールを選択してください。選択すると、自動でロールのARNが入力されます。

8.　Buildspec設定&アーティファクト設定
・ビルド仕様・・・buildspecファイルを使用
・Buildspec名オプショナル・・・front/.buildspec.yml（ディレクトリ構造を紹介した際に、frontの階層の下に、.buildspec.ymlファイルを置いているのがわかるように、今回ビルドする際の設定ファイルをfront/.buildspec.ymlに置いているので、ここを指定します。）
・アーティファクト・・・特に設定しない

以上でCodebuildの設定が終了です。

Amazon S3設定

1. AWSマネジメントコンソールにログイン
2. ログイン後、Amazon S3サービスを選択し、バケットの作成を押下
3. 任意のバケット名を入力し、作成

4.　作成後、バケットのプロパティの、Static website hostingを選択

5.　Static website hosting設定
・インデックスドキュメント・・・任意のルートファイル(大抵はindex.htmlとなる。)

6.　バケットのプロパティのアクセス権限設定のブロックパブリックアクセス設定
以下の画像のように設定する。

7.　バケットのプロパティのアクセス権限設定のバケットポリシー設定（セキュリティレベルは自己のサービスなどに合わせて、変更お願いします。）

以上でAmazon S3の設定が終了です。

動作確認

Githubのリポジトリに対して、PullRequestがマージされると、CodeBuildが自動で走り、以下の画像のように全てSuccessとなると成功です。S3のホスティングしているURLにアクセスすると、任意のものが表示されるのを確認してください。

以上で全ての設定が終了です。

次回はバックエンド側（Go）のデプロイフローとして、CodePipeline, CodeBuild, CodeDeploy, ECSを使用した方法について書こうと思います。