例えばWordpressのrest apiを使用する場合、APIで参照する先を環境毎に変えたいと思ったことはないでしょうか。

常にproduction環境を参照して問題ない場合もありますが、まだprodcution環境にAPIが存在しない or APIに新たに項目を追加した等、環境毎に参照先を指定しなければならない事があります。

そのような時の対処法として環境変数を用いる方法がありますが、dotenvではprocess.envを参照できなかった、そんな時の方法になります。

やりたいこと

APIの参照先をlocal開発時はlocal環境を、本番反映時はproduction環境を参照するようにしたい。

前提条件

• babelでJsファイルをトランスパイルしている
• dotenvでprocess.envが参照出来なかった

手順

babel-plugin-dotenvをインストールする。

yarn add -D babel-plugin-dotenv
or
npm install babel-plugin-dotenv --save-dev

.envファイルを作成する。

// .env
API_ORIGIN=https://hogehoge.com

こちらの.envファイルの内容を配置する環境毎に変更します。

例えば、stage環境およびlocal環境でそれぞれ.envファイルを作成し配置します。
ex) stage環境

// .env for stage
API_ORIGIN=https://stage.hogehoge.com

ex) local環境

// .env for local
API_ORIGIN=https://local.hogehoge.com

.babelrcを編集する。

{
"plugins": [["babel-plugin-dotenv", {
"replacedModuleName": "babel-dotenv"
}]]
}

jsで.envを読み込む。

import { API_ORIGIN } from "babel-dotenv"

注意点

.envファイルの読み込みはビルド時に行われるので、.envファイルを配置した環境毎にビルドを行う必要があります。
ローカルでビルドしたjsファイルをそのままdevelop/production環境で使用している場合は、この方法は出来ないので注意してください。