2.20) vercel에 프로젝트 배포 시 fetch failed... - 인프런

안녕하세요!

다름이 아니라 2.20 실습을 진행하면서 vercel에 앱을 배포하려고 하는데

Error: Command "npm run build" exited with 1

에러가 발생했습니다.

[cause]: Error: connect ECONNREFUSED 127.0.0.1:12345
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1607:16) {
    errno: -111,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '127.0.0.1',
    port: 12345
  }

vercel 에서 에러 로그를 살펴보니 book/1, book/2, book/3 페이지를 prerendering 할 때 위와 같은 에러가 발생했습니다.

로컬에서 앱을 빌드한 후 실행했을 때엔 문제가 발생하지 않았습니다 ㅠㅠ

export default async function fetchBookById(id: number): Promise<BookData | null> {
  const url = `http://127.0.0.1:12345/book/${id}`;
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error();
    }
    return response.json();
  } catch (error) {
    console.error(error);
    return null;
  }
}

위 코드는 book/{id}페이지로 들어왔을 때 실행하는 함수입니다!

import { useRouter } from "next/router";
import style from "./[id].module.css";
import fetchBookById from "@/lib/fetch-book-by-id";
import { GetStaticPropsContext, InferGetStaticPropsType } from "next";
import Head from "next/head";

export const getStaticPaths = () => {
  return {
    paths: [{ params: { id: "1" } }, { params: { id: "2" } }, { params: { id: "3" } }],
    fallback: true,
  };
};

export const getStaticProps = async (context: GetStaticPropsContext) => {
  const id = context.params!.id;

  const data = await fetchBookById(Number(id));

  return {
    props: {
      data,
    },
  };
};

export default function Page({ data }: InferGetStaticPropsType<typeof getStaticProps>) {
  const router = useRouter();

  if (router.isFallback) {
    return (
      <>
        <Head>
          <title>한입북스</title>
          <meta property="og:image" content="/thumbnail.png" />
          <meta property="og:title" content="한입북스" />
          <meta property="og:description" content="한입 북스에 등록된 도서들을 만나보세요" />
        </Head>
        <div>로딩중입니다.</div>
      </>
    );
  }

  if (!data) {
    return {
      notFound: true,
    };
  }

  const { id, title, subTitle, author, coverImgUrl, description, publisher } = data;

  return (
    <>
      <Head>
        <title>{title}</title>
        <meta property="og:image" content={coverImgUrl} />
        <meta property="og:title" content={title} />
        <meta property="og:description" content={description} />
      </Head>
      <div className={style.container}>
        <div className={style.cover_img_container} style={{ backgroundImage: `url('${coverImgUrl}')` }}>
          <img src={coverImgUrl} />
        </div>
        <div className={style.title}>{title}</div>
        <div className={style.subTitle}>{subTitle}</div>
        <div className={style.author}>
          {author} | {publisher}
        </div>
        <div className={style.description}>{description}</div>
      </div>
    </>
  );
}

혹시 몰라 해당 페이지의 전체 코드 같이 남겨봅니다 😭

감사합니다!

인프런 커뮤니티 질문&답변

2.20) vercel에 프로젝트 배포 시 fetch failed 에러가 발생합니다