【解決済み】ルータを変えたらDockerのNuxtからAPIにアクセスできなくなった【504エラー】

あらすじ

手持ちのMacでDocker-composeでフロント、バックエンド、それぞれ別のdocker-compose.ymlでサーバを動かしています。

フロントはNuxt、バックエンドはPHPにしています。

Nuxtからはproxyでバックエンドにアクセスします。

以前はtargetのところにホストマシンのIPアドレスを指定してバックエンドにアクセスしていました。(バックエンドのポートは80)

以下のようにしていました。

proxy: {    '/api': {      target: 'http://192.168.1.10',      pathRewrite: {        '^/': '/',      },    },  },

それがルーターを変えると500エラーが発生するようになったのです。

調べた中でホストのところをdockerのコンテナ名にするというものを見つけましたが、504エラーが発生して解決しませんでした。

504エラーの時は以下のようなエラーが発生していました。

[HPM] Error occurred while trying to proxy request 〜

以下のサイトの方法を試したところ解決しました。

具体的には以下のようなコードになりました。

  proxy: {    '/api': {      target: 'http://host.docker.internal',      pathRewrite: {        '^/': '/',      },    },  },

ルータの影響は不明のままですが、そもそもdockerコンテナ同士のアクセスでIPを使っていたことが間違っていたのかもしれません。