Docker環境NuxtのaxiosモジュールでbaseURLの設定

問題 ページレンダリング後のaxiosだけ動かない...

まず、docker-composeをつかってnodeイメージでnuxt開発環境(frontend)とgoのAPIサーバー環境(app)を作りました。
これで、frontendコンテナからappでコンテナのアドレスを名前解決できるようになったはずです。

そして、SSR: trueの環境でaxiosを実装しますが、

baseURLを設定しているのにbaseURLがlocalhost:3000(デフォルト)に勝手に変わってるのに気づきました。ページレンダリング前に呼びだしている(acyn fetch()で書いた)処理は正しく動いているのに、ページレンダリング後のmethodsに書いた$store.dispatchが動かないという現象に悩まされました。

  axios: {
    baseURL: 'http://app:8080',
    proxy: true,
  },
  proxy: {
    '/api': '/'
  },

methods: { 
    axiosFunc() {  // こっち動かない404エラー
        const payload = {....}
        this.$store.dispatch('.....', payload)
    }
},
async fetch({store}) { // こっち動く
    const payload = {....}
    await store.dispatch('.....', payload)
}

解決

若干、原因の予想はつきますが、やっぱりページレンダリングの前後でサーバーとの通信関係で変化しているようです。そして、下のブログをみつけました。

SSR(コンテナ)でaxiosを実行するfetch側はbaseURLで動いていて、methodsで定義した関数はブラウザ側で呼び出しているので、browserBaseURLを設定してエンドポイントを切り替える必要がありました。

また、ブラウザにはコンテナ名でアドレスをたどる能力がないようなので

net::ERR_NAME_NOT_RESOLVED

各コンテナを共通networkにいれて、

browserBaseURL: "http://app:8080",

と指定してあげると無事動かせました。