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

概要

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設定

AWSマネジメントコンソールにログイン
ログイン後、CodeBuildサービスを選択し、プロジェクトの作成を押下
任意のプロジェクト名を入力
送信元の設定
・ソースプロバイダ・・Github
・リポジトリ・・Githubアカウントのリポジトリ
・Githubリポジトリ・・先ほどのコードをPushしたリポジトリを選択
プライマリソースのウェブフックイベント設定
・ウェブフックオプショナル・・・チェック
・イベントタイプ・・・PULL_REPULL_REQUEST_MERGEDを選択（任意のイベントタイプを選択可）

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

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

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