【React】【AWS】ECSを使ったデプロイでReactに環境変数を渡したい

実施したいこと

Reactに環境変数を渡したい

現状

ローカルで動作させるときは.envファイルに環境変数を記載して、Reactで読み込んでいる

やること

• 前提

  • ECSにデプロイしているので、dockerイメージを作る必要がある
  • dockerイメージを作るときはcodebuildを使用している
  • codebuildでイメージを作成するときはbuildspec.ymlを使用する
  • buildspec.ymlではdocker buildなどのコマンドが含まれている

• すべきこと

  • docker buildする前に環境変数を渡す
  • 環境変数は.env.productionに書き込んで、Reactで読み込むようにする

• buildspec.ymlを書く

buildspec.yml

version: 0.2

phases:
  install:
    runtime-versions:
      docker: 20
    commands:
      - echo install step...
  pre_build:
    commands:
      - echo Logging in to Amazon ECR...
      - $(aws ecr get-login --no-include-email --region $AWS_DEFAULT_REGION)
  build:
    commands:
      - echo Build started on `date`
      - echo Building the Docker image...
      # 環境変数の設定
      - echo REACT_APP_API=$REACT_APP_API >> .env.production
.env.production
      # dockerfileの指定
      - docker build -t $IMAGE_REPO_NAME:$IMAGE_TAG_FRONTEND -f $DOCKERFILE_FRONTEND .
      - echo docker tag $IMAGE_REPO_NAME:$IMAGE_TAG_FRONTEND $AWS_ACCOUNT_ID.dkr.ecr.$AWS_DEFAULT_REGION.amazonaws.com/$IMAGE_REPO_NAME:$IMAGE_TAG_FRONTEND
      - docker tag $IMAGE_REPO_NAME:$IMAGE_TAG_FRONTEND $AWS_ACCOUNT_ID.dkr.ecr.$AWS_DEFAULT_REGION.amazonaws.com/$IMAGE_REPO_NAME:$IMAGE_TAG_FRONTEND
  post_build:
    commands:
      - echo Build completed on `date`
      - echo Pushing the Docker image...
      - docker push $AWS_ACCOUNT_ID.dkr.ecr.$AWS_DEFAULT_REGION.amazonaws.com/$IMAGE_REPO_NAME:$IMAGE_TAG_FRONTEND
      - printf '[{"name":"<container-definition>","imageUri":"%s"}]' $AWS_ACCOUNT_ID.dkr.ecr.$AWS_DEFAULT_REGION.amazonaws.com/$IMAGE_REPO_NAME:$IMAGE_TAG_FRONTEND > artifacts.json

artifacts:
  files: artifacts.json

- echo REACT_APP_API=$REACT_APP_API >> .env.productionのところで、code buildで設定した環境変数REACT_APP_APIを.env.productionに書き込んでいる

これをReactで読み込む
単純に

console.log(process.env.REACT_APP_API);

とかで確認できる