reactでdotenvを使うに苦戦した話

Reactで環境ごとに設定した値を使いたいと思い、dotenv用いることにした。ただ、なんどやっても.envの内容が読み込まれず「undefined」になってしまう...

まずダメだった実装

「node dotenv」で検索すると必ずヒットするのがこれ

require('dotenv').config()
process.env.XXXXX //XXXXXは.envに記載したキー

ただ、これをいっくらやってもうまくいかない... そこでreactでのdotenvについて調べたところ下記の手順を行ってみた。

いろいろ調べて見ると、どうやらcreate-react-appした人には標準装備でdotenvが入っているそうだ。ただ、その使い方が今までどおりのやり方ではダメらしい。まず、.envの書き方だが

REACT_APP_APP_ID="xxxxx"

このようにREACT_APP_XXXというように、先頭に「REACT_APP」をつけないといけないらしい。だが、このように設定さえしてあげれば

//require不要
process.env.REACT_APP_APP_ID

この記述だけで値が取得できる。

ただ、.envの内容を変えてブラウザ更新してみたけど、相変わらず解決しない...という人は一回reactを再起動してください。そうするといけるはずです（自分はこれでいけました。）