create-react-appのプロジェクトで環境変数を.envから読み込めない原因と解決策

はじめに

create-react-appで作成したプロジェクトで.envから環境変数を読み込めないときは下記のTipsを確認してみてください。

• Viewが多いのでまとめ直しました。（2020/05/05）

.envを読み込めなかった原因と解決策

1. .envを設定後にコンパイルしていない

• .envに環境変数を書き込んだ後は一度Ctrl +Cで終了した後に、npm startで再コンパイルしましょう。

2. 環境変数のKEYがREACT_APP_から始まっていない

• 環境変数のKEYにはREACT_APP_prefixを付ける必要があります。
  • https://create-react-app.dev/docs/adding-custom-environment-variables/

.env

REACT_APP_APP_ID="YOUR_APP_ID"

3. .envがプロジェクト直下に作成されていない

• node_modulesなどが配置されているrootディレクトリに.envを作成する必要があります。

.
├── .env
├── .eslintrc
├── .git
├── .gitignore
├── .node-version
├── .prettierrc
├── .storybook
├── README.md
├── build
├── node_modules
├── package-lock.json
├── package.json
├── paths.json
├── public
├── src
├── tsconfig.json
└── yarn.lock