本記事では、Reactで作成したアプリケーションを開発環境や本番環境といったように環境別にバックエンドの通信先などの設定値を切り替える方法をご紹介します。
Reactプログラムを公開する際、設定値を開発用と本番用に簡単に切り替える方法が知りたい！
と、思ってる方におすすめです。
この記事では、以下のことを紹介してます。
- Reactについて
- 環境別に設定値を切り替える二つの方法
- ビルド値に環境変数を埋め込む方法
- ビルド後に環境変数を設定する方法
Reactとは
Reactは、ユーザーインターフェースを構築するための宣言的で効率的、かつ柔軟なJavaScriptライブラリです。
Facebookによって開発され、コンポーネントベースのアプローチを採用しています。これにより、再利用可能なUIパーツを作成し、それらを組み合わせて複雑なインターフェースを簡単に構築できます。
詳細は下記記事で紹介していますので、詳しく知りたい方はご参照ください。
環境別に接続先の切り替え方
切り替え方法は二つあります。
ビルド時に環境変数を埋め込む方法
Reactでは、`.env`というファイルに環境変数を定義することができます。
このファイルは、開発環境用に`.env.development`、本番環境用に`.env.production`という名前で分けることができます。この中に、バックエンドのAPIのURLやキーなどを記述しておきます。例えば、以下のようになります。
注意点として、「REACT_APP_」から始まる名称でなければ読み込んでくれません。
// .env.development
REACT_APP_API_URL="http://localhost:3000"
REACT_APP_API_KEY="123456"// .env.production
REACT_APP_API_URL="https://example.com"
REACT_APP_API_KEY="abcdef"そして、コンパイル時に、`npm run build`の代わりに、`npm run build-staging`や`npm run build-production`というコマンドを使って、環境変数を読み込むようにします。
これらのコマンドは、`package.json`の`scripts`に定義しておくことで利用できます。
例えば、以下のようになります。
// package.json
{
"scripts": {
"build-staging": "env-cmd -f .env.development react-scripts build",
"build-production": "env-cmd -f .env.production react-scripts build"
}
}`env-cmd`は、環境変数を読み込むためのツールです。`npm install env-cmd –save-dev`でインストールできます。
Reactのコードの中では、`process.env.変数名`という形で環境変数を参照できます。例えば、以下のようになります。
// App.js
import axios from "axios";
const App = () => {
const getApiData = async () => {
const url = process.env.REACT_APP_API_URL;
const key = process.env.REACT_APP_API_KEY;
const response = await axios.get(url, { headers: { "x-api-key": key } });
console.log(response.data);
};
return (
<div>
<button onClick={getApiData}>Get API Data</button>
</div>
);
};
export default App;この方法は、環境変数をコンパイル時に埋め込むことで、バックエンドのAPIを変更できるという利点があります。しかし、コンパイル後のファイルは、環境変数に依存するため、別の環境にデプロイするときには再ビルドが必要になります。
ビルド後に環境変数を設定する方法
Reactでは、ビルド後にも環境変数を設定することができます。
この場合は、`.env`ファイルではなく、`export 変数名=値`という形でターミナルから環境変数を設定します。例えば、以下のようになります。
// ターミナル
export REACT_APP_API_URL=http://localhost:3000
export REACT_APP_API_KEY=123456Reactのコードの中では、`window._env_変数名`という形で環境変数を参照できます。例えば、以下のようになります。
// App.js
import axios from "axios";
const App = () => {
const getApiData = async () => {
const url = window._env_.REACT_APP_API_URL;
const key = window._env_.REACT_APP_API_KEY;
const response = await axios.get(url, { headers: { "x-api-key": key } });
console.log(response.data);
};
return (
<div>
<button onClick={getApiData}>Get API Data</button>
</div>
);
};
export default App;この方法は、ビルドしたファイルをそのまま複数の環境にデプロイできるという利点があります。しかし、環境変数をブラウザのグローバルオブジェクトに追加するために、以下のようなスクリプトを作成しておく必要があります。
// public/env.js
(function (window) {
window._env_ = window._env_ || {};
// 環境変数をwindow._env_に追加する
window._env_.REACT_APP_API_URL = "${REACT_APP_API_URL}";
window._env_.REACT_APP_API_KEY = "${REACT_APP_API_KEY}";
})(this);// public/index.html
<head>
...
<!-- env.jsを読み込む -->
<script src="%PUBLIC_URL%/env.js"></script>
</head>このスクリプトは、環境変数をプレースホルダーに置き換えておき、ビルド後に実際の値に置き換えることで、環境変数をブラウザに渡す役割を果たします。
動作の確認
設定した内容が正しく読み込まれているか確認します。
以下のコマンドを実行すると、「開発モード」でローカルサーバーが起動します。開発モードの時は「.env.deployment」の値が読み込まれます。
npm start本番モードの値を確認する場合は、以下のコマンドを実行します。
ローカルサーバにビルドしたモジュールをデプロイし、動作を確認できるコマンドです。「.env.production」の値が読み込まれます。
まずは、以下コマンドでserveコマンドをインストールします。
npm install -g serve以下コマンドで、デプロイ用のモジュールを作成します。
npm run build上で作成したモジュールをserveコマンドを使ってローカルサーバにデプロイし起動します。
serve -s build設定した値が正しければ、デプロイモジュールをAWSのs3などのストレージサービスにアップロードします。
まとめ
本記事では、Reactでコンパイルするときに開発環境用と本番環境用でバックエンドのAPIを変更する方法を紹介しました。
環境を切り替える方法は、ビルド時に環境変数を埋め込む方法と、ビルド後に環境変数を設定する方法の二つの方法があります。それぞれにメリットとデメリットがありますので、自分のプロジェクトに合わせて選択してください。
本記事が皆様の参考となりましたら幸いです。
コメント