Reactとaxiosで.envを用いて環境変数を利用する方法 #JavaScript

ReactでAPI通信を行う際に、エンドポイントやAPIキーを環境変数に格納する必要がありますが、その方法で30分くらいググったのでメモ。。。
初心者の方や、しばらく触ってなくて忘れてしまった方の参考になれば幸いです。

ちなみにReactの環境構築はcreate-react-app、API通信はaxiosで行う想定としています。
ぱっと試す環境を作りたい方は以下コピペでどうぞ。

npx create-react-app sample-app
cd sample-app
yarn add axios
yarn start

Reactで環境変数を使用する際の重要ポイント

Reactで環境変数を使用する際は、以下の3つのポイントに注意する必要があります。

envファイルはルート直下に配置する
環境変数を使用する際は「process.env.REACT_APP_」を接頭辞に使う
変更を反映する際はサーバーを再起動

envファイルはルート直下に配置する

envファイルは、プロジェクトのルート直下に配置する必要があります。
create-react-appでReactアプリを作成すると、初期状態でルート直下に以下のようなディレクトリ、ファイルが作成されているはずです。

public/ ←この下にindex.htmlなど
src/ ←この下にindex.jsなど
.gitignore
README.md
package.json
yarn.lock

※すみません、tree出力するのめんどくさかったのでこのような表記になりました...

重要な事は、
'envファイルは.gitignoreやREADMEなどと同じレベルの階層に設置する必要がある'
という事です。
src/の下などに配置しないようにしましょう。

環境変数を使用する際は「process.env.REACT_APP_」を接頭辞に使う

環境変数を実際に呼び出す際は、環境変数の頭に「process.env.REACT_APP_」をつける必要があります。

以下のような感じです。

// これは.envファイル

REACT_APP_API_URL=https://hogehogehogehoge
REACT_APP_API_KEY=******-********-********

hoge.js

// これは環境変数を用いたいコンポーネントのjsファイル

import axios from "axios";

const options = {
  method: 'GET',
  url: process.env.REACT_APP_API_URL,
  headers: {
    'api-key': process.env.REACT_APP_API_KEY,
    'api-host': process.env.REACT_APP_API_HOST
  }
};

環境変数は '' や "" で囲む必要はないです。

おしまい

おそらくこれでいけるんじゃないかと。
気になったところとかあればコメントいただけると幸いです。