困っている人
.envファイルから環境変数の値を使いたいけど、process.envで読み込んでも正しく読み込めない・・・
今回、上記の様なことがあったので、備忘録として残します。
本記事の内容
- 結論
- 実際のコード
- おまけ
- 環境毎に環境変数を定義する方法
- 最後に
若干解決までに時間をかけたので、同じ様に詰まっている方の参考になれば幸いです！
英太①
結論
REACT_APP_create-react-app環境で環境変数を読み込む場合、.envファイル内で変数を定義する時は、REACT_APP_から始まるものでないと、正しく読み込むことが出来ません。
実際のコード
.env
REACT_APP_ZIP_CODE_SEARCH_ENDPOINT=https://zipcloud.ibsnet.co.jpapi/Api.js
/**
* 郵便番号から住所を取得する
* @param {string} zipCode 郵便番号
* @returns 住所
*/
const getAddressByZipCode = async (zipCode) => {
const zipData = {
params: {
zipcode: zipCode
}
}
const url = process.env.REACT_APP_ZIP_CODE_SEARCH_ENDPOINT + '/api/search'
const response = await axios.get(url, zipData)
.catch((error) => {
if (!error.response) {
return NET_WORK_ERROR;
} else {
return error.response;
}
});
if(response.data.status === 500) {
console.log('郵便番号検索API内部でエラーが出力されています')
}
return response.data
}郵便番号から住所を取得する関数を作成し、関数内で環境変数の値を読み込んでいます。
（環境変数で使用しているURLは、日本郵便が公開している郵便番号で住所を検索する事が出来るREST APIです。）
おまけ
環境毎に環境変数を定義する方法
下記の様に.envファイルを作成して中で変数を定義する事で、環境毎に環境変数を定義する事が出来ます。
.
├── node_modules
├── src
├── .env.local // ローカル
├── .env.development // 開発
├── .env.staging // 検証
├── .env.production // 本番最後に
他のライブラリやフレームワークでも、今回のように.envファイルの変数を読み込む為の形式が決まっていることが多いので、忘れないように覚えておきたいですね！