리액트로 만든 달력 배포까지 해보자!

저번에 리액트로 달력 만들기에 관한 글을 올린 적 있었다.
이번에는 netlify를 이용해서 저번에 만든 달력을 배포까지 해보자.
 
아래 URL은 리액트로 달력 만들기 글이다.
https://gugu76.tistory.com/11
https://gugu76.tistory.com/12
https://gugu76.tistory.com/13
 

Netlify가 뭔데?

Netlify는 github에 repository만 올리면 배포해서 url까지 받을 수 있는 서비스이다.
aws 같은 배포를 도와주는 사이트도 있기는 한데, Netlify를 사용하면 비교적 쉽게 배포가 가능하다고 해서 이번에는 Netlify로 배포해보기로 결정했다.
아마 다음 번에는 Next.js로 개발하고 Vercel로 배포해보지 않을까 생각이 든다.

 

Netlify로 배포해보자.

 먼저, github 아이디를 연동해서 Netlify에 가입해야 한다.
 
아래 사진처럼 연동할 github 저장소를 선택해서 Netlify를 설치해준다.

 
그러면 아래와 같은 창이 뜬다.

 
그렇게 잘 되는 줄 알았는데, 실패했다.
아래와 같은 에러 메시지들이 뜨더라.

 
그래서 여러 글들을 참고하면서 에러를 고쳤다.
deploy setting으로 들어가서 build command를 npm run build에서 CI=false npm run build로 변경해주었다.

 

설정을 변경하고 다시 배포해보았다.

 
그랬더니, 성공적으로 배포되었다.

 
이제 사이트를 들어가면 내가 만든 리액트 달력을 볼 수 있는 줄 알았다.
하지만 아래와 같은 경고문이 뜨더라.

그래서 또 다른 글들을 찾아보며 에러를 고쳐보았다.
리액트 라우터를 사용하는 경우 위와 같은 창이 뜰 수 있다고 한다.
 
Page Not Found가 뜨는 이유는 리액트 라우터의 경우 클라이언트에서 라우트를 처리하는데, root가 아닌 페이지에 접속 시에 서버인 netlify는 라우트를 처리하는 방법을 알 수 없기 때문이라고 한다.
 
이에 대한 해결 방안으로 netlify는 _redirects라는 파일을 제공한다.
이는 클라이언트 측에서 처리되지 않은 URL을 처리할 수 있도록 한다.
 
이렇게 public 폴더 내부에 _redirects 파일을 생성하고 아래 내용을 담아주면 된다.

/* /index.html 200

 
이제 내가 원하는 대로 리액트 달력 사이트가 잘 떴다.

 
진짜 마지막으로, 나는 도메인까지 변경하기로 했다.
site settings에서 site name을 변경해주면 된다.

 
배포한 사이트에 들어가보면 잘 뜬다.
아래 URL은 배포한 사이트 URL이다.
https://ghdtjgus76-react-calendar.netlify.app/
 

후기

이전에 나는 배포라고 하면 엄청 어렵고 복잡한 거인줄 알았다.
하지만 netlify를 활용해서 배포해보니까 별로 어렵지 않았고, 오히려 재미있었다.
이제부터는 소소한 리액트 프로젝트를 만들더라도 이렇게 배포까지 해보는 게 더 좋은 경험일 것 같다.
다음에는 다른 사이트를 사용해서 배포를 해봐야겠다.

 

참고 자료

https://goddaehee.tistory.com/306
https://merrily-code.tistory.com/123
https://soso-cod3v.tistory.com/142
https://ssimplay.tistory.com/739