baseURLを動的に切り替える
baseURLを動的に切り替える方法が色々ありますが、下記の API_URLを設定する実装が楽なのでは？と思ったので、そのメモをしていきたいと思います。
baseURLの決まり方
基本は、defaultPort、defaultHostと順番に決まっていき、 optionsの中で baseURLが定義されています。
ただ例外として、 API_URLが定義されていると baseURLが全て上書きされることがわかります。
これを使っていきたいと思います。
axios-module/module.js at 932abc071b1e1bb64e8d8fc1fdd6e6f9ceb99b5a · nuxt-community/axios-module · GitHub
// module.jsで定義されている実装if(process.env.API_URL){options.baseURL=process.env.API_URL}Nuxt.js 2.6.2 / axios 5.0.0 で、axios の deafaults.baseUrl を設定するハナシ - the industrial
サブディレクトリ動かすNuxt.jsでもルートディレクトリの.envを読み込む - Qiita
実装
ローカル環境
ローカル環境では、dotenvを使いました。
dotenvインストール
下記でdotenvをインストールします。yarn add @nuxtjs/dotenv
.env作成
.envを作成し、そこに API_URLを書いておきます。
下記のようなイメージです。
API_URL=http://localhost:3000
baseUrl
ステージング環境、プロダクション環境
Kubernetesを使っている想定で、 ConfigMapに API_URLを設定しするだけで終わりです。