웹팩 설정하기 3 - Page not found

Netlify에서 배포 후 페이지 새로고침을 하면 해당 에러가 발생했다.
처음에는 Tanstack Query의 Mutation 후 refetching 때문인 줄 알고 새로운 데이터를 받아오는 부분을 수정하였다.

하지만, 해당 부분 수정 후에도 Page not found 에러가 계속 발생ㅎ

원인

정적 파일 호스팅(Netlify)에서 동적 라우팅 경로를 직접 새로고침해서 생기는 문제임.
Netlify는 경로에 대한 실제 HTML 파일을 서버에서 찾으려고 하고, 없으니 404 에러

예시 : https://example.netlify.app/playlist/12345 경로를 찾으려고 함 → 없어서 에러

해결

Netlify에서는 동적 라우팅을 SPA처럼 작동하게 하려면 _redirects 파일이 필요함

1. public에 _redirects 파일 생성
2. 그 안에 /* /index.html 200 작성 : 모든 경로를 index.html로 리디렉션 해라
3. webpack 설정

    new CopyWebpackPlugin({
           patterns: [
             { from: "public/manifest.json", to: "manifest.json" },
             { from: "public/favicon.ico", to: "favicon.ico" },
             { from: "public/_redirects", to: "" }, // dist/_redirect로 복사
           ],
         }),

내 프로젝트에서는 src/index.html을 사용하는데
_redirects의 index.html은 public이던 src던 상관없이
빌드 산출물인 dist에 _redirects가 있어야 한다는 점임
어차피 Netlify는 dist/_redirects만 인식
(그리고 webpack에서 이미 index.html을 설정함)

webpack에서 from의 _redirect경로는 확인해야함.
내가 어디에 넣었는지

참고 - _redirects 파일 형식과 규칙

<source path> <destination path> [status code]

/* /index.html 200

• 모든 경로(/*)를
• /index.html로 리다이렉트
• 200은 성공적으로 리턴한다는 의미

/blog /new-blog 301
/docs/* /documentation/:splat 302

• /blog → /new-blog (영구 리디렉트)
• /docs/abc → /documentation/abc (임시 리디렉트)