[Netlify] React 프로젝트 배포하기 + Page Not Found 에러 해결

 

 

며칠 전 개인 프로젝트 배포를 위해 Netlify를 사용했는데 이와 관련된 내용을 정리해보고자 한다!

 

 

✔ Netlify 선택 이유

내가 진행한 프로젝트는 정적인 웹 사이트이기 때문에 Netlify를 사용하여 배포를 하는 게 적당하다고 판단했다.

 

 

✔ 시작하기

로그인 후 Sites 쪽을 보면 이런 화면이 보일 것이다. 

✅ 여기서 Import an existing project를 클릭

 

✅  Github에 올린 프로젝트를 배포할 것이니 Deploy with Github 클릭

 

✅  프로젝트 목록 중 배포할 프로젝트를 클릭한다.

 

✅ 빌드 관련 세팅하기

그럼 설정 페이지가 나오는데 여기서는 빌드를 위한 기본적인 설정을 해주면된다.

1) Branch to deploy 

배포할 브랜치를 선택할 수 있다.

 

2) Build command 

빌드 명령어를 입력해주면 된다.

나는 npm을 사용하고 있어 npm run build 명령어를 입력했다.

 

🧐참고

당시 잘 몰라서 이렇게 했는데 이대로 진행하면 빌드할 때 에러가 난다.

CI= npm run bulid

위처럼 해주어야 빌드가 제대로 된다. (=옆에 띄어쓰기 꼭 주의할 것!)

 

3) Publish directory

배포할 파일을 정하라는 건데 CRA에서는 build 라는 이름으로 폴더가 생성되므로 build 라고 입력해주면 된다.

 

 

✔ 환경 변수 설정하기

나는 카카오 공유하기 기능을 사용했기 때문에 카카오 SDK 키 값에 대한 환경변수를 따로 설정해야했다.

빌드 설정페이지에선 까먹고 그냥 넘어갔으므로 따로 수정을 해줬다.

 

 

 

 

✔ 사이트 이름 변경하기

General - Site details 에서 변경 가능

 

 

👾 문제

이러고 배포를 잘 했는데...

테스트를 해보니 새로고침시 Page Not Found 에러가 뜬다!

 

✅ Page Not Found 에러가 발생한 이유 

React Route는 client에서 라우팅 처리를 한다.

따라서 root 페이지가 아닌 페이지에 접속 하게되면 netlify(server측)는 route를 처리하는 방법을 알지 못한다!

 

🔨 해결 방법

netlify는 이런 경우를 처리할 수 있도록 _redirects 파는 파일을 제공한다.

 

참고

https://docs.netlify.com/routing/redirects/rewrites-proxies/#history-pushstate-and-single-page-apps

Rewrites and proxies

 

문서에서 알려주는 대로 프로젝트 public 폴더 내에  _redirects 파일을 생성 후 아래 내용을 추가해주면 끝!

/* /index.html 200

 

 

---

Reference

https://docs.netlify.com/