🤖

Next.jsのSSGでError: connect ECONNREFUSED

2022/11/27に公開

Next.js

WSL 2

tech

Environment

WSL2 (Ubuntu20.04)
Docker
Laravel
Next.js

jamstackで開発しており、フロントをNext.js、APIをLaravelで開発。
DockerでフロントとAPIのコンテナを立ち上げて開発。

Error

初めて触るNext.js。
SSGを体験したくてgetStaticProps、getStaticPaths実装中に以下のコードでエラー発生

[id].tsx

export async function getStaticProps(context: any) {
    const id = context.params.id;
    const res = await axios.get(`http://localhost:8081/api/thread/${id}`);

    return {
        props: res.data
    }
}

Server Error
Error: connect ECONNREFUSED 127.0.0.1:8081

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
error: connect ECONNREFUSED 127.0.0.1 (8081)
<unknown> (Error: connect ECONNREFUSED
127.0.0.1 (8081)
Function.AxiosError.from
file:///workspace/node_modules/axios/lib/core/AxiosError.js (89:14)
RedirectableRequest.handleRequestError
file:///workspace/node_modules/axios/lib/adapters/http.js (516:25)
RedirectableRequest.emit
node:events (526:28)
ClientRequest.eventHandlers.<computed>
file:///workspace/node_modules/follow-redirects/index.js (14:24)
ClientRequest.emit
node:events (526:28)
Socket.socketErrorListener
node:_http_client (442:9)
Socket.emit
node:events (526:28)
emitErrorNT
node:internal/streams/destroy (157:8)
emitErrorCloseNT
node:internal/streams/destroy (122:3)
processTicksAndRejections
node:internal/process/task_queues (83:21)

apiが叩けていない・・・？
しかしhttp://localhost:8081/api/thread/1でアクセスするとレスポンスはちゃんと帰ってくる。

Postmanで試しても同じく正常に動作している様子。

Solution

なんでやねん。。。
と思いながらエラーを再確認。127.0.0.1:8081/api/thread/1だよなぁ。とURLを打つ。

あ、出ない。
あ、localhostじゃない。
ア、IPチガウ。

というわけでコードのlocalhostをwsl2のIPに修正したら問題なく動きました。
コードでlocalhost指定しててもaxiosで勝手にIPに変換されちゃう直されちゃうのかな？
ちゃんと設定してないからやってみるか。。。

Environment

Error

Solution

Discussion