【解決済み】ルータを変えたら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を使っていたことが間違っていたのかもしれません。