amplify × create-react-appのプロジェクトでReactのコード上から環境名を参照する方法

はじめに

amplifyで構築したReactのコード上でamplifyの環境名を参照したかったのですが、それを実現するスマートな方法がなさそうでした。

amplifyが生成するaws-exports.jsに環境名が記載されていれば良いのですが、明示的な記載はされていません。
一部のリソースはそのリソース名に環境名を含むので、そこから取り出すこともできますがあまりお行儀がよくない気がします。

TL;DR

現在チェックアウトしている環境名は以下のファイルに記載されているので、これを利用します。
amplify/.config/local-env-info.json

ソースコード

amplify env checkoutのhooksを使って、.envファイルを書き換える方法などもあるかと思いますが、手っ取り早くstart/build実行時に環境変数を渡すようにします。

package.json

"scripts": {
  "start": "REACT_APP_ENV=$(cat amplify/.config/local-env-info.json | jq -r '.envName') react-scripts start",
  "build": "REACT_APP_ENV=$(cat amplify/.config/local-env-info.json | jq -r '.envName') react-scripts build",
  ...
}

Reactのコード上では以下のようにして環境名を参照できます。

const envName = process.env.REACT_APP_ENV;

参考

本家も上記のjsonファイルから環境名を取得しているようです。
https://github.com/aws-amplify/amplify-cli/search?q=LocalEnvFileName
https://github.com/aws-amplify/amplify-cli/search?q=getLocalEnvFilePath