소개

Next.js의 정적 제네레이션 getStaticProps 내에서 API에서 데이터를 fetch하려고 했는데 에러가 나와 조사했지만 기사로 올라가지 않을 것 같았기 때문에 자신이 해결한 방법을 올립니다.
같은 문제가 발생한 사람이이 기사를보고 해결하는 데 도움이된다고 생각합니다.

사건

로컬 개발 환경에서 API 서버로 json-server을 사용했습니다.
json-server를 시작했을 때의 로그입니다.

로그

backend_1   | 
backend_1   |   \{^_^}/ hi!
backend_1   | 
backend_1   |   Loading db.json
backend_1   |   Done
backend_1   | 
backend_1   |   Resources
backend_1   |   http://0.0.0.0:80/users
backend_1   | 
backend_1   |   Home
backend_1   |   http://0.0.0.0:80
backend_1   | 
backend_1   |   Type s + enter at any time to create a snapshot of the database
backend_1   |   Watching...
backend_1   | 
backend_1   | GET /users 200 48.743 ms - 355
backend_1   | GET /users 304 6.090 ms - -

htp://0.0.0.0/우세 rs에 액세스하면 화면이 제대로 표시됩니다.

화면의 표시 내용

[
  {
    "name": "aaaaa",
    "password": "password",
    "id": 1
  },
  {
    "name": "aaaaa",
    "password": "password",
    "id": 2
  },
  {
    "name": "daodao",
    "password": "password",
    "id": 3
  },
  {
    "name": "daodao",
    "password": "password",
    "id": 4
  },
  {
    "name": "daodao",
    "password": "password",
    "id": 5
  }
]

Next.js의 소스는 getStaticProps 내에서 fetch하고 있습니다.

export async function getStaticProps() {
  const res = await axios.get('http://0.0.0.0/users')
  console.log(res.data)
  const users = res.data

  return {
    props: {
      users
    }
  }
}

실행할 때 connect ECONNREFUSED라는 오류가 발생했습니다.

조사해 보면, 프런트가 서버와의 접속을 끊었다고 하는 의미입니다.
즉, 요청이 중단되었다는 것입니다.

가설

원인을 조사했지만 좋은 해결책을 찾지 못했습니다.
그래서 스스로 가설을 세우고 검증하기로 했습니다.

getStaticProps는 빌드시 필요한 데이터를 fetch하여 사전에 HTML을 생성하고 사용자의 요청이 있을 때 반환합니다.
로컬 개발 환경에서 시작한 서버는 자신의 컴퓨터에서만 액세스 할 수 있으므로 Next.js를 빌드 할 때 전역으로 액세스 할 수있는 서버가 아니라면 데이터를 검색 할 수 없기 때문에 이러한 오류가 발생할 것이라고 가정합니다. 했습니다.

검증

가설을 확인하기 위해 AWS의 EC2 인스턴스를 설정하고 그 안에 json-server를 배치했습니다.
그 때 json-server에서 사용하는 포트를 0.0.0.0/0으로 어디서나 액세스 할 수 있도록했습니다.

export async function getStaticProps() {
  const res = await axios.get('http://52.196.252.109/users')
  console.log(res.data)
  const users = res.data

  return {
    props: {
      users
    }
  }
}

브라우저에서 확인하면 console.log로 작성한 로그에 제대로 사용자 데이터가 표시되었습니다.
또한 컴포넌트가 users의 props를 통과하는지 확인했습니다.

요약

Next.js의 정적 생성은 서버가 전역 환경에 놓여 있지 않으면 성공적으로 빌드 할 수 없다고 판단하고 connect ECONNREFUSED라는 오류를 발생시킵니다.
그래서, 검증할 때는 서버를 localhost가 아니고, 글로벌하게 액세스 할 수 있는 환경에 두지 않으면 사용할 수 없는 것 같습니다.
정적 제너레이션의 구조를 이해하고 있으면, 당연하다고 하면 당연했을지도 모릅니다.