GithubActionsでNext.jsのビルドが環境変数を設定しているのにうまくいかない

はじめに

地味に気づくのに時間がかかったのでまとめます

問題

GithubActions上でビルドをするとエラーがでます

   Generating static pages (5/7) 
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11731:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async globalThis.fetch (/home/runner/work/my-tech-blog/my-tech-blog/.next/server/chunks/638.js:1:36484)
    at async d (/home/runner/work/my-tech-blog/my-tech-blog/.next/server/app/page.js:1:4770) {
  cause: Error: getaddrinfo EAI_AGAIN loclahost
      at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:107:26)
      at GetAddrInfoReqWrap.callbackTrampoline (node:internal/async_hooks:128:17) {
    errno: -3001,
    code: 'EAI_AGAIN',
    syscall: 'getaddrinfo',
    hostname: 'loclahost'
  }
}
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11731:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async globalThis.fetch (/home/runner/work/my-tech-blog/my-tech-blog/.next/server/chunks/638.js:1:36484)
    at async d (/home/runner/work/my-tech-blog/my-tech-blog/.next/server/app/page.js:1:4770) {
  cause: Error: getaddrinfo EAI_AGAIN loclahost
      at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:107:26)
      at GetAddrInfoReqWrap.callbackTrampoline (node:internal/async_hooks:128:17) {
    errno: -3001,
    code: 'EAI_AGAIN',
    syscall: 'getaddrinfo',
    hostname: 'loclahost'
  }
}

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error

TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11731:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async globalThis.fetch (/home/runner/work/my-tech-blog/my-tech-blog/.next/server/chunks/638.js:1:36484)
    at async d (/home/runner/work/my-tech-blog/my-tech-blog/.next/server/app/page.js:1:4770)

 ✓ Generating static pages (7/7) 

> Export encountered errors on following paths:
	/page: /
Error: Process completed with exit code 1.

しかしローカルでやるとうまく行くので.envに何かあるのはわかりましたが、全部シークレットで設定していてナゾでした

解決方法

API Routeを以下のように叩いているのですが

  const articles = await fetch(
    `${process.env.NEXT_PUBLIC_API_URL}/articles?user=Sicut_study&count=20`
  ).then((res) => res.json());

ここで使っている環境変数の値に/apiが含まれていなかったのが原因でした

☓ http://localhost:3000
○ http://localhost:3000/api

他の環境変数で/apiを外したものもあるのでそれを使っていたようでした

おわりに

環境変数エラーなのがわかっていたので再度値をコピーし直して登録はたいせつでした