私が現在開発しているWEBページでは
Ajaxでデータを取得して画面を構築しています。
そういった場合、本番環境と開発環境で接続先の切り替えは
どんな手法が主流&効果的なのでしょうか?
課題
WEBページとAPIが同じドメインであれば/sample
のように
スラッシュ始まりにすれば良いのですが、現環境はドメインが異なるため苦労しています。
API接続先
環境 | ドメイン |
---|---|
本番 | api.example.com |
検証 | stg.api.example.com |
開発 | dev.api.example.com |
ローカル | api.example.local |
WEBページはそれぞれからapi
を外したドメインです
考えついた方法
A. WEBサーバで置換する(substitute的な)
B. 環境別のbundle.jsを作成する
C. ページに環境情報ファイルを読み込む
現状
現在は案Bを採用しており
Webpackでそれぞれのbundle.jsを作成しています。
詳細にはDefinePluginを使用して以下のような実装にしています
javascript
1Axios.get(process.env.API_URL);
process.env.API_URL
部分をビルド時に環境に応じて置換しています
懸念
案Aの場合インフラ部分に手を入れるのは気が引ける状況で、
案Cだと/assets/config.js
のような別ファイルを環境別に配置すれば良いと思うのですが
読み込み時のレンダリングのブロックや通信回数の増加が気になっています。
(気にしなくても良い?)
A〜Cだとどれが良いのか。
または「他にもこんな手法があるよ」などあればご教授願いたいです
回答1件
あなたの回答
tips
プレビュー