【Next.js】middleware.tsのfetch failedについて

はじめに

Next.jsにはmiddlewareを簡単に設置することができる。決められた場所に「middleware.ts」または「middleware.js」を作成して実行したい処理を記述するだけで簡単にmiddlewareを走らせることができる。が、そのmiddlewareファイルでAPI通信を走らせたい場合にfetchを利用したが、実行できず「fetch failed」エラーが出た。これを解決するのに恥ずかしながら結構時間を費やしてしまったため、備忘録として書き留めておく。

※環境はDockerを使用しているのでDockerでの解決方法

環境

• Docker
• node.js v20
• Next.js v14

前提

Next.jsのアプリケーション内では「axios」を使用している。middlewareファイルではaxiosが動作しないため、fetchを使用してAPIを走らせるところまでは辿り着いた。だがそのfetchも動かなかった。。
原因は

• そのAPIのURLは間違っている
• localhostに拒否されている
• 127.0.0.1に拒否されている
• ネットワークエラー系

みたいな意味合いのfetch failedだった。

解決方法

解決方法は至ってシンプルだった。
fetchのURLをコンテナ名とポート番号を指定してあげるだけだった。

- fetch("http://localhost/api/v1/check")
+ fetch("http://nginx:80/api/v1/check")

この場合は

• コンテナ名 : nginx
• ポート番号 : 80

となる。

終わりに

いや〜だいぶハマった・・・