【AWS】ReactをCodepipeineでS3にデプロイ

1. 使用するサービス

(AWS)

• CodePipeline

• CodeBuild

• S3

2.概要

GitHubで管理しているReactソースを指定したブランチをプッシュするとそのブランチの中のReactソースをビルドしてS3にデプロイしてくれる流れを説明します。
前提としてS3は作成済で、GitHubなどソース管理のツールは導入済として特に説明はしません。
CodePipelineの説明は過去記事参照。
buffalokusojima.hatenablog.com

3. 実装

GitHubやCodeCommitのブランチのプッシュに対するCodePipelineのキックは上記の過去記事参考。
CodeBuildから説明します。

3-1. CodeBuildの設定

基本的に過去記事通りで大丈夫です。buildspec.ymlの中は以下のようにします。

Reactソースはappフォルダにある事にして書いています。適宜編集お願いします。

version: 0.2
phases:
  install:
    commands:
      - n stable
      - npm update -g npm
      - node -v
      - npm -v
  pre_build:
    commands:
      - echo Entring app directory
      - cd app
      - npm install
      - npm run lint
  build:
    commands:
      - echo Build started on `date`
      - npm run build
      
  post_build:
    commands:
      #環境変数にCloudfrontのディストリビューションを設定しておく
      - aws cloudfront create-invalidation --distribution-id $DISTRIBUTION --paths "/*"
  
artifacts:
  files:
    - '**/*'
  #S3に入れる中身を指定
  #buildするとbuildフォルダが出来るのでそれを指定
  base-directory: app/build

3-2. Deploy

CodeBuildの作成が終わったら次にS3へのデプロイの設定です。
下記のように入力し、S3のバケットを指定すれば完了です。

S3へのデプロイ

4.おわりに

Reactに関しては２年前に少し勉強した程度で全くわかりませんが、いずれ勉強はするつもりです。
今回、ReactのBuildについて触れ、ソースのbuildとデプロイをする機会があったので備忘録的な感じで載せました。
意外と簡単でした。ローカルだとReact死ぬ程分からなかったですが、S3へのデプロイとなると何故かすんなり行きました。