[Firebase] Page Not fount, This file does not exist and there was no index.html 해결하기 (feat. Next.js 빌드 방식)

문제의 두번째 에러..

https://choq.tistory.com/112

[Firebase] Firebase Hosting Setup Complete 해결하기!(feat. Nextjs)

 

 

위 이야기에서 이어지는 내용이다.

짜라란 바꿨는데도 불구하고 해결되지 않는다.. 새로운 에러의 등장. 무엇이 문제일까?

 

 

원인은 디렉토리에 index.html 파일이 없어서 이다. 그러고 보니 빌드된 .next 폴더에 들어가 보면 index.html 파일이 보이지 않는다.

기본적으로 Firebase의 Hosting은 정적파일을 지원한다. 하지만 Next.js의 일반적인 빌드 방식으로는 해당 파일이 만들어지지 않기에 설정에서 손을 봐서 정적인 index.html을 뽑아낼 수 있도록 해야한다.

 

// next.config.mjs
const nextConfig = {
  output: "export",
};

 

 

위 next 설정파일에서 output 설정을  추가해주고 빌드를 시키면 out폴더에 우리가 원하는 index.html이 생기는걸 확인할 수 있다.

그리고 나서는 이전에 확인한 firebase.json 파일을 수정해두면 된다.

 

{
  "hosting": {
    "public": "out", // 요기!!!
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

 

기존에 public 부분을 out으로 수정해주고 빌드/배포를 진행하면!?

드디어 우리의 url에 우리가 원하는 페이지가 나오는것을 확인할 수 있다!!!! 쨔스쨔아스~

 

자신의 프로젝트에서 빌드 결과물로 index.html이 있는 폴더를 확인하면 다른 케이스(다른 프레임워크나 환경)에 대해서도 금방 대처할 수 있지 않을까 싶다!

 

---

 

서버에 처음 이렇게 배포를 해보았는데,, 쉬우면서도 뭔가 귀찮은 그런..