はじめに
この記事では、開発中に遭遇した AxiosError: connect ECONNREFUSED 127.0.0.1:80 というエラーの解決過程について説明します。
このエラーは通常、指定されたアドレスとポートに接続できない場合に発生するっぽいです。
特に、Next.js アプリケーションで SSR(Server Side Rendering) を使用しているときに、APIサーバへの接続に関連するエラーです。
エラー内容
エラーメッセージは以下の通りです：
AxiosError: connect ECONNREFUSED 127.0.0.1:80
at AxiosError.from ...
at RedirectableRequest.handleRequestError ...
...
このエラーは、アプリケーションが 127.0.0.1 アドレスの 80 ポートに接続しようとしたときに接続が拒否されたことを示しています。通常、このエラーは指定されたサーバが存在しないか、または起動していない場合に発生します。
試したこと(現状)
- まず、開発環境でAPIサーバが正しく動作していることを確認しました。
- axios の代わりに fetch を使用しても似たようなのエラーが発生しました。
- クライアントサイドからのapi実行は問題なく動作しておりました。
原因
原因は、開発環境で Docker を使用していて、API サーバが実際には nginx コンテナ内で動作していたため、127.0.0.1 ではなく nginx というコンテナの名前で接続する必要がありました。
アプリケーションの設定では、API サーバのアドレスが http://localhost:80/api と設定されていました。
※自分がコンテナ内にいて、そのポートがホストされていない(それを扱うイメージを構築していない限り)のが原因らしい。
したがって、その場合はコンテナ名を使用して、ポートがホストされているリモートホストにアクセスする必要がありだそうです。
- 参考
解決策
- axiosの場合は下記のように実行する必要がありました。
- nginxの部分はDockerのapi用に使用しているコンテナの名前が入る感じです。
axios.get('http://nginx:80/api');
結果
これにより、開発環境での AxiosError: connect ECONNREFUSED 127.0.0.1:80 エラーは解消しました。
終わりに
どうやらこの問題はNode.jsのバージョン17から発生しているみたい？？
かなりハマってしまいました、、、。