React + TypeScriptで環境変数を設定する
はじめに
開発作業していて久々に詰まったので、それについて簡単に書いていこうと思います。
テーマとしては、Reactプロジェクトで設定した環境変数の内容が正常に取得できない、というものです。
一応原因と解決方法も判明したので、とりあえず色々と書いていこうと思います。
したかったことについて
例えば、開発時と本番環境で向き先になるAPIを変えたい場合、いちいち定数として書いてあるAPIの向き先を直接書き換える…と言うのは非常に面倒ですよね。
それに、直接毎回書き換えるという作業を行うことで間違えて変え忘れて本番環境でエラーになったり、変な処理になってしまうということも十分にありえます。（流石に業務でこうした事態に陥ることは殆どないかと思いますが…）
私が個人的に行っているような開発作業の場合、私しか触らないため一々開発作業時にAPIパスを書き換える…的なことをしていました。が、あまりにもデプロイ時にエラーになったり、そもそもスマートじゃないし、第一ソースコードにそのままAPI書くって、ねえ？ということもあるため、それらを考慮して環境変数に設定すればいいじゃん！となった次第です
まずはしたかったことについて簡単に記載していきます。
~~~(省略) // ローカル const api = "http://localhost:8080"; // 本番 // const api = "https://(production.path)" axios.get(api + "init"),then(res) ~~~ (省略)
上記のように、デプロイ時、開発時でAPI向き先を変更するというやり方も良いかと思いますが、これを以下のように変更してみようと思います。
まずはソースコードの方を以下のように書き換えます。
~~~(省略) const api = process.env.REACT_APP_BASE_PATH; axios.get(api + "init"),then(res) ~~~ (省略)
とりあえずこの形に変更します。次に、2つの環境変数設定ファイルを追加します。
追加箇所は、「プロジェクトのルートディレクトリ配下」です。.gitignoreやREADMEファイルなどと同一のディレクトリ配下に追加してください。
.env.development
REACT_APP_BASE_PATH = "http://localhost:8080"
.env.production
REACT_APP_BASE_PATH = "https://(production.path)"
こんな感じの設定を行うことで、同じ「process.env.REACT_APP_BASE_PATH」を設定していてもそれの向き先を変更できます。
※環境変数に設定する際に、「REACT_APP」から始めるように設定してください。こういう設定にしないと環境変数を取得できません。
設定後、npm startコマンドでローカル環境で実行してみましょう。
実行後、向き先が変わっている（ローカル環境の場合はhttp://localhost:8080）に設定されているはずです。
本番環境へのデプロイ時は、developmentやproductionなどの拡張子からどちらを反映するのか自動で判断してくれるので、特にこのままで大丈夫です。
できない場合
これやってていくつかできなかった例があったので、それについて記載していきます。
① 取得されない
「.env.development」と記載してください。先頭の「.」がないと反映されません。
②内容が変更されない
一度npm startを中断（CTRL +Cなどで）し、再度npm startを実行してください。
③上記2つを対処してもちゃんと取得されない
.envファイルの記載時は、以下のようにするといいかもしれません。
REACT_APP_BASE_PATH="http://localhost:8080"
=の前後にスペースを明けないことで対処できる？いろいろ試しているうちにこうしたんですが、これが関係ある家はわかりません。ただし、環境変数設定の書き方としてこうした書き方をしているtipsが多く見受けられるので、取れない場合は試してもてもいいかも。
おわりに
angularの場合についてはそのうち書こうと思います。
