【NextJS】Dockerでフロントとバックエンドを管理する際にnet::ERR_NAME_NOT_RESOLVEDというエラーが出る

2024/10/27に公開

こんにちは投資ロウトです。

背景

Dockerでフロントエンドとバックエンドを管理する際に、モノリポのため、
以下のように構築をするが、同じDocker内のため、http://backend:port/...でアクセスしようとすると、net::ERR_NAME_NOT_RESOLVEDというエラーが出てしまう。

services:
  frontend:
    ...

  backend:
    ...

解決策

めちゃめちゃ壁にぶつかりましたが、以下の記事に、Dockerで同一内であり、CORSは避けられそうに見えますが、ブラウザからアクセスするために、こちらのエラーのようになるとのことです。

https://qiita.com/pappy/items/95edbb644ac12a35e259

フロントからのリクエストはhttp://localhost:portに変更し、FastAPIは以下の設定をすると解決しました。

https://fastapi.tiangolo.com/tutorial/cors/#use-corsmiddleware

Discussion