Reactで作成したWebアプリケーションのビルド・デプロイ環境を作ってみた

概要

以前の記事でS3とRoute53を用いて公開した静的Webアプリケーションをビルド・デプロイする環境を作ってみます。

リポジトリ

https://github.com/enuswi/react-app

本投稿時点のcommit

https://github.com/enuswi/react-app/commit/bc8ea54dca625c8afc638a5ddedceded9411f813

＊cloud9(EC2)環境上であれば上記リポジトリのREADME「開発セットアップ(Cloud9)」の通りで動作確認できると思います(2020.01.08)

やりたいこと

• 修正コードをリポジトリにプッシュしたら自動でWebアプリケーションに反映してほしい。

上記を実現するためにAWS CodePipelineを使いたいと思います。
CodePipelineはAWSの継続的デリバリーサービスです。
コード変更を検知しビルド、デプロイ等を取りまとめてくれます。

今回は以下の流れを構築します

1. Githubリポジトリにプッシュ
2. CodeBuildでソースをビルド
3. CodeDeployでS3にビルドの成果物をアップロード

構築の流れ

1. buildspec.ymlファイルの作成
2. CodePipelineの設定

CodeBuildの設定ファイルの作成と、AWSコンソール上でのCodePipelineの設定を行っていきます。

1. buildspec.ymlファイルの作成

buildspec.ymlはCodeBuildにおけるビルドの手順やビルド成果物の設定を行うファイルで
ソースコードに含めるかコンソール上で設定するかできます。
今回はソースコードに含める方式にしたいと思います。ソースコードに含める場合、
基本的には「buildspec.yml」というファイル名でルートディレクトリに置く必要があります。
＊ファイル名、配置場所を変更することもできるみたいですが今回は変更する必要がないのでデフォルトの設定に従おうと思います。

buildspec.yml

version: 0.2

phases:
    install:
        runtime-versions:
            nodejs: 10
    pre_build:
        commands:
            - npm install
    build:
        commands:
            - npm run build
artifacts:
    files:
        - '**/*'
    base-directory: 'dist'

上記が今回作成した設定ファイル内容です。
プロジェクトが簡素なので非常に簡単で、
パッケージのインストールとビルドスクリプトの実行、成果物の対象をdist以下のファイルと指定するのみとなります。

version

ビルド仕様のバージョン指定で0.1と0.2があります。
0.2での変更点は以下の公式ページに掲載されています。
https://docs.aws.amazon.com/ja_jp/codebuild/latest/userguide/build-spec-ref.html#build-spec-ref-versions

phases

ビルドの各フェーズで実行するコマンドを指定します。
各フェーズは順番に「install/pre_build/build/post_build」という名前で定義されています。

install

CodeBuildの環境設定でイメージ設定をする際にUbunts2.0以降またはAmazon Linux1.0以降を利用する場合に
ランタイムバージョンの指定が必要になります。今回はnode.jsの10系を使いたいので「nodejs: 10」と指定しました。

＊ランタイムバージョンの一覧は以下の公式ページに掲載されています。
https://docs.aws.amazon.com/ja_jp/codebuild/latest/userguide/build-env-ref-available.html

pre_build

ビルドの前に実行するコマンドを指定します。

build

ビルド中に実行するコマンドを指定します。

post_build(今回は使用していません)

ビルドの後に実行するコマンドを指定します。

artifacts

ビルドの成果物の指定オプションです。

files

'**/*'...全てのファイルを再帰的に指定します。
他にもファイル指定やフォルダ指定など柔軟に設定ができます

 - hoge.js
 - dist/*.js
 - dist/**/*

base-directory

基準のディレクトリを指定することができます。
今回はdistディレクトリを含めず、dist以下のファイルを抽出したいので上記のように指定しています。

2. CodePipelineの設定

パイプラインの設定はコンソール上で簡単に行えます。

パイプラインの設定

ソースステージの追加

ビルドステージの追加

まだビルドステージは用意してないので作成していきます。

デプロイステージの追加

最後に設定の確認の後、作成を行い完了すると最初のビルド、デプロイが走るはずです。
(私は最初buildspec.ymlの設定が足りず失敗しました。)

あとはソースステージの追加で設定したリポジトリに変更を加えれば
ビルド、デプロイが実行されるようになると思います。

さいごに

今までLaravel等のフレームワーク(以下、FW)を利用していて、FWがよしなにやってくれていることがたくさんあることは理解していました。
2020年は、基本的にはFWが頑張ってくれている部分を勉強する年にしたいと思っての備忘録をアップしていければと思っております。
間違い等ございましたらご指摘くださいますと幸いです。