Netlify 배포 에러 해결 - React Router Dom

최근 프로젝트를 마무리하고 Netlify로 배포를 했습니다. 

그 과정 중에 있던 에러 해결 과정을 글로 남깁니다.!!

 

Netlify를 선택한 이유는 배포하는 과정이 쉽고, 무료인 점

그리고 깃허브에 연동후 배포 한경우 push 가 있을 때 자동으로

재 빌드를 해주는 점 때문에 Netlify를 선택하여 배포하였습니다. 

 

하지만 배포 과정 중 에러가 많이 나왔고 

특히 "build.command" failed 부분에서 시간을 많이 낭비했습니다.

다른 블로그와 Netlify 커뮤니티를 검색해서 찾아본 결과 

 

1. package.json의 scripts에 build에서 "CI = react-scripts build"

실패!, 터미널에서 실행 안됨

 

2. package.json에서 배포한 주소를 homepage에 입력

실패!

 

3. netlify.toml 파일을 루트 경로에 생성한 뒤, 아래와 같이 입력한다.

실패!

 

4. Netlify site settings에서 Build settings 설정

아래 사진처럼 Build command에서 

CI=false를 앞에 붙여주니깐 빌드 과정에서의 에러가 해결되었습니다.

성공! 🎉🎉

 

2번째로 생긴 에러는 cors 문제였습니다. 

백엔드로 배포된 aws 서버에 통신하려고 하니 cors 문제가 생겼고 

netlify.toml에서 아래와 같이 작성하여 해결했습니다.

 대신 이렇게 설정해 준 뒤 api를 요청할 때 url 앞부분에 /proxy

를 붙여준 뒤 요청을 해야 합니다.

 

여기서 :spliat '*'과 같은 의미로 전체를 의미합니다. 

 

추가로 로컬에서도 사용할 경우 아래와 같이 proxy 변수를 utils에 작성하여

api 요청 url 앞에 추가해서 사용해 줍니다.

export const proxy = window.location.hostname === "localhost" ? "" : "/proxy"

 

3번째 에러는 배포된 사이트에서 특정 url을 입력하여 페이지 이동시 

"Found not page" 에러입니다

 

이 경우에는 public 폴더에 _redirects 파일을 추가하는 방법도 있었지만

api 요청시 계속해서 304 에러 코드가 발생해서 다른 방법으로 해결했습니다. 

 

위에서 생성한 netlify.toml 파일에서 아래와 같이 작성하여 실행하면 

"Found not page" 에러를 바로 해결할 수 있습니다. 

 

 

 

 

참고사이트

Page Not Found Error on Netlify Reactjs React Router solved

Netlify 배포 시 오류 해결