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
}
};
環境変数は '' や "" で囲む必要はないです。
おしまい
おそらくこれでいけるんじゃないかと。
気になったところとかあればコメントいただけると幸いです。