😸
本番環境とローカル環境でenvファイルを分けるためにnuxt側の設定を修正
やりたいこと
browserBaseURLは使わず、baseURLだけで通信を行いたい
.envにAPI_BASE_URL=を指定して、ローカル（.env_local）と本番（.env_prod）で切り替える
以下参考
つまり、baseURLを指定すれば双方のURLを設定できるので、browserBaseURLを指定しなくても良いのです。
修正対象想定
- nuxt.config.js
- DBのデータを表示している各ページ
現状（起きていること）
以下としているが、
<img :src="`${$axios.defaults.baseURL}storage/${item.cover_image}`" class="cover-image">
と
browserBaseURL: 'http://localhost:8000/',
が紐づいており、browserBaseURLをコメントアウトすると、何も表示されなくなってしまう（自分の認識ではbaseURLで問題なく表示される認識だった）
nuxt.config.js
axios: {
baseURL: ENV.API_BASE_URL,
browserBaseURL: 'http://localhost:8000/',
proxy: true
},
proxy: {
'/proxy/': {
target: 'http://localhost:8000',
pathRewrite: {'^/api/': '/'}
},
"secure": false
},
.env_local
API_BASE_URL=http://localhost:8000
.env_prod
API_BASE_URL=本番のドメイン
疑問
- 表示側では以下のようにしているのに、browserBaseURLが表示されている
<img :src="`${$axios.defaults.baseURL}storage/${item.cover_image}`" class="cover-image">
mounted () {
console.log(this.$axios.defaults.baseURL)
},
// http://localhost:8000/
- 以下をコメントアウトすると、
// browserBaseURL: 'http://localhost:8000/',
consoleの結果が、/になる
mounted () {
console.log(this.$axios.defaults.baseURL)
},
// /
→優先は以下の認識
envファイルのAPI_BASE_URL > nuxt.config.jsのbaseURL > browserBaseURL
そもそも今まで以下でbaseURLを指定しているつもりでbrowserBaseURLを指定しているつもりはなかったが、どこで紐づいているか不明
<img :src="`${$axios.defaults.baseURL}storage/${item.cover_image}`" class="cover-image">
原因
proxy使用
→baseurlの設定が無視される（デフォルトの/になっていた）
→browserBaseURLが使用されていた
解決
オプションのprefixを設定（こちらがbaseurlに適応されるよう）
axios: {
// proxyを使用する場合baseURLは併用できないためコメントアウト
// baseURL: process.env.API_BASE_URL,
// baseURL と proxy を同時に使用することはできないためprefixを設定し、baseURLとして使用する
prefix: process.env.API_BASE_URL,
proxy: true,
},
.env
API_BASE_URL=http://localhost:8000/
baseurlに以下が設定された
http://localhost:8000/
これでenvファイルを環境ごとに切り替えれば（今回はファイルの中身を手動で入れ替える想定）問題なく運用できそうです。
参考
Discussion