React で環境変数などを「.env」ファイルに変更した件
Reactで実装していたときに、
各種APIのURLなど、
小さな規模であれば、
そのまま書いておくこともあるが、
本来、切り分けて管理した方が良いので、
ローカル環境だけでなく、
別の環境にファイルをアップロードする際に、
分けることにした時のメモ。
参考にしたサイト
こちらのサイトを参考にしました。
リンクをメモ。
Gitで管理するので、.gitignoreに.envを設定
実際に設定ファイルにしていく。
このとき、
Git管理しているのであれば、
.gitignoreのファイルの中に、
.envを追加しておく。
環境変数を「.env」ファイルに設定
環境変数に関して設定するときに、
.envファイルを作成する。
そして、その中に、
- キー
- 値
の値を設定していく。
Reactのアプリケーションで作っているので、
プレフィックス（キーの先頭につける）として、
REACT_APP_が必要なので、
「.env」での設定は、
REACT_APP_API_URL=https://api.urlのように設定する。
Reactアプリ内での「.env」の値の取得
環境変数を、
「.env」のファイルに準備したら、
Reactアプリ内での取得方法で、
もともとの文字列を変更する。
取得方法は、
process.env.キーという形で、
「.env」の値を取得できるので、
上記の「.env」の例の
REACT_APP_API_URL=https://api.urlであれば、
process.env.REACT_APP_API_URLのように取得する。
設定変更の際はReactアプリを再コンパイル
環境変数として設定した「.env」の値は、
実際に反映させるためには、
Reactのアプリケーション自体を、
再コンパイルする必要があるので、
npm run startなどで、
再コンパイルするとうまく値が反映されるかと思います。
ピックアップ
こちらもおすすめ
初心者向けの色々な情報はあるけれど、
- 無料でお試しができるスクール
- ホームページなど簡単に作成できる
- 組織で使いたいサービス
について、
少しでも試して良いものがあると、
それを活用することで学習や業務などが効率化できるので、
おすすめのサイトなどをいくつか紹介しておきます
