😸

本番環境とローカル環境でenvファイルを分けるためにnuxt側の設定を修正

2021/10/17に公開

やりたいこと

browserBaseURLは使わず、baseURLだけで通信を行いたい
.envにAPI_BASE_URL=を指定して、ローカル(.env_local)と本番(.env_prod)で切り替える
以下参考

つまり、baseURLを指定すれば双方のURLを設定できるので、browserBaseURLを指定しなくても良いのです。

https://blog.cloud-acct.com/posts/u-nuxtjs-axios/

修正対象想定

  • 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ファイルを環境ごとに切り替えれば(今回はファイルの中身を手動で入れ替える想定)問題なく運用できそうです。

参考

https://axios.nuxtjs.org/options/
https://mseeeen.msen.jp/proxy-and-baseurl-settings-do-not-work-in-nuxt/

Discussion

ログインするとコメントできます