概要
Reactの学習の一環で外部APIを利用するためのAPIキーを.envで管理することにした
いざ、process.env.環境変数のキー名で読み込むとundefinedが戻ってきた場合の対応方法をまとめる
参考資料
環境変数の定義
-
REACT_APP_xxxxとしないと認識してくれないので注意 - .envは
package.jsonと同階層に作成すること
.env
REACT_APP_DEMO_API_KEY=xxxxhoge
環境変数の呼び出し
App.tsx
`/hoge?api_key=${process.env.DEMO_API_KEY}`
サーバーの再起動
yarn start
ここまでの手順を踏めば環境変数の値を取得することができます
さいごに
いいねしていただけると記事執筆の励みになりますので、参考になったと思った方は是非よろしくお願いします！