[React+Netlify] Netlify로 React App 배포하고 Custom Domain 설정하기

Seung-a·2021년 4월 15일

이 포스트는 Netlify를 통해 기본적인 배포 과정을 진행한 후 발생한 예외 상황에 대해 기술했습니다.

💬 들어가며

react app을 수동으로 배포해본 후, 좀 더 편한 작업을 위해 Netlify로 배포하기로 했다.
Netlify는 GitHub 저장소에 연동해서 쉽게 배포할 수 있으며 한 달에 300분의 배포 시간을 무료로 제공한다. 👍

기본적인 배포 방법은 다른 사람들이 자세히 설명한 글들을 참고해 금방 했지만, 그 후 예상치 못했던 상황들이 있어서 이를 해결한 방법을 기술하겠다.

😂 문제 상황

1. warning -> error!

local에서는 React app이 잘 실행되는데 배포를 하면 Failed가 떴다. Netlify Builds -> Go to deploy details -> Deploy log에서 왜 실패했는 지 로그를 자세히 살펴보았다.

2:42:26 PM: Failed to compile.
2:42:26 PM: 
2:42:26 PM: ./src/components/Nav/Nav.jsx
2:42:26 PM:   Line 104:9:  'currentPage' is assigned a value but never used  no-unused-vars
2:42:26 PM: error Command failed with exit code 1.
2:42:26 PM: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

프로젝트에 사용하지 않는 currentPage라는 변수가 있다는 warning이 있었다. 찾아보니 배포할 때 warning을 error로 인식할 수 있다는 글을 보았다.
여러 방법이 있을 수 있겠지만 나는 위의 warning을 해결하니 정상적으로 배포되었다!

2. Page Not Found

배포 완료 후 사이트에 접속하고 다른 페이지로 이동도 잘 되었다. 하지만 처음 접속할 때 루트 경로 /가 아닌 다른 페이지(ex: /page)로 바로 접속하면 Page Not Found가 뜨면서 정상적으로 접속되지 않았다.

이는 react-router가 client 측에서 라우팅을 처리하므로 root가 아닌 페이지로 바로 접속하면 Netlify가 처리하는 방법을 알지 못하기 때문이라고 한다.

Netlify는 이를 위해 SPA의 root URL로 redirect 시킬 수 있는 방법을 제공하는데, _redirects라는 파일을 추가하면 client에서 처리되지 않은 URL을 작동시키는 방식이다.

public/ 아래에 _redirects라는 파일을 만들고 아래와 같은 내용을 추가하면 된다.

/* /index.html 200

이제 root 외의 페이지로 바로 접속해도 정상적으로 접속이 되었다. 🙌

위의 방법은 이 글을 참고하였다.

3. Custom Domain 설정 (+네임서버 이전)

사실 이 부분은 따로 해결 방법이라기 보단 시간이 약이었다.

나는 Netlify가 아니라 카페24에서 구입한 도메인이 있었는데, 비단 Netlify - 카페 24가 아니라 다른 곳에서 구입한 도메인을 적용하기 위해서는 네임서버를 이전해야한다.

먼저 Domain setting -> Domains -> Custom Domains에서 도메인을 등록하면 도메인 확인이 필요하다는 표시가 뜬다. 이 때 Netlify에서 제공하는 네임서버로 카페24에서 변경해줘야한다.
카페24 - 나의 서비스 관리 - 도메인 관리 - 도메인 선택 후 네임서버 변경하기 메뉴로 들어가 본인 인증 후 변경하면 된다.

그런데 네임서버도 변경하고 Netlify에서 HTTPS도 적용했는데 정상적으로 작동되지 않았다. 시간이 지나니까 접속이 되기도 하고 끊기기도 했으며 갑자기 cors 에러가 발생하기도 했다.

이런 현상은 네임서버를 변경하면 전세계 DNS에 변경 내용이 전파되기까지 시간이 걸리기 때문이라고 한다. 남겨진 DNS 캐시가 있다면 더 오래 걸릴 수도.
국내 도메인은 1-2일, 국외 도메인은 최대 3일까지 걸린다고 한다. 그 이상 걸리면 정상적으로 변경이 되었는 지 네임서버를 이전한 기관에 문의가 필요하다.

나는.com의 국외 도메인이었고 이틀이 좀 지나서 적용이 되었다! 사실 기다리면서 마냥 설정을 잘못한 거 같고, 내심 불안했는데 정말 적용되니 신기했다. 네트워크를 공부하면서 이론으로 접했던 내용을 몸소 체험했다. 🙃