원래는 Github의 gh-pages를 이용하여 프론트엔드 프로젝트를 배포하였었다. 새로운 프로젝트를 이전과 똑같이 프로젝트를 배포하려 하였지만 CORS 문제를 포함한 전에 본적없던 많은 에러가 발생하여 페이지에 제대로된 결과물이 배포되지 않았다. 문제를 해결한 방법에 대해서는 나중에 정리하기로 하고 새로운 배포 방법인 Netlify를 먼저 알아보기로 하자.

Netlify

Netlify는 정적 웹사이트를 배포하고 호스팅하기 위한 플랫폼이다. Github 등의 버전 관리 시스템과 연동하여 커밋이 변경될 때 마다 자동으로 배포를 수행할 수 있고, 브랜치 배포, CDN, 편리한 데이터 관리 등의 장점이 있다. 홈페이지 참고.

시작하기

먼저 로그인을 하고.. 어차피 Github와 연동할 생각임으로 Github 계정으로 로그인 해준다.

이후 Sites -> Add new site 를 선택하면 배포할 방식을 선택할 수 있다. Github에 있는 코드를 배포할 예정이기 때문에 Import an existing project를 선택한다.

이후 Deploy with Github를 선택하면 본인의 Github에 존재하는 Repository 목록을 확인할 수 있다. 예전에 강의로 들었던 Netflix clone 페이지를 배포해 보자.

배포하기

배포를 원하는 repository를 선택하면 build setting을 할 수 있다.

이 때 Build command를 CI= npm run build로 바꿔주어야 한다. Netlify에서 CI= 을 안붙이면 인식을 못한다고 한다. 띄어쓰기 까지 똑같이 CI= npm run build 로 해주어야 한다.

배포를 원하는 branch, build command 등을 설정할 수 있고 Add environment variables에서 API_KEY 등 .gitignore 등으로 인해 github에 올릴 수 없는 정보들을 따로 설정해 줄 수 있다. 보통 .env 파일에 존재하는 모든 변수를 넣어줘야 한다.

만약 API 통신이나 Router를 이용한 프로젝트라면 한가지 과정을 더 거쳐줘야 한다. 가장 기초 폴더(package.json, tsconfig 파일과 같은 layer) netlify.toml 파일을 만들어 준다. 이후

[[redirects]]
from = "/*"
to = "/index.html"
status = 200

위의 항목을 추가해 주면 된다. 새로고침 등의 redirect 에서 현재 router로 어떠한 경로를 통해 들어오든 간에, 200 status를 통해 index.html로 렌더링 해주겠다는 뜯이다.

필요한 정보들을 다 입력한 후 아래의 Deploy "프로젝트 명" 버튼을 누르면 배포가 시작된다. 2-3분정도 걸리는 것 같다.

이후 Open production deploy에 들어가면 프로젝트가 배포된 것을 확인할 수 있다.

Netflix_Clone 사이트 (https://main--moonlit-cocada-e0073b.netlify.app/)에 배포되었다. 도메인이 마음에 들지 않다면 따로 원하는 도메인을 구매한 후 연결해주는 것도 Netlify에서 지원한다고 한다.

(추가) 커스텀 도메인

사실 그냥 netlify에서 제공해주는 도메인을 사용해도 큰 문제는 없지만 그래도 커스텀 도메인도 이용해 보았다.

나는 가비아에서 샀는데 아무데서나 사도 상관은 없는듯 하다.

가격은 이정도 이고 .com 이나 .co.kr이 인기가 더 있어서 할인을 안하는 것 같다. 참고로 1년 구독 가격이다.

구매한 후 도메인을 netlify와 연결하기위해 네임서버를 설정해야한다. MY 가비아 에 들어가 보면 내가 소유하고 있는 도메인을 관리할 수 있다.

나는 이미 설정해서 네임서버가 설정되어 있지만 새롭게 배포하는 경우 네임서버를 설정해주어야 한다. 원하는 네임서버는 Netlify의 Domain Management에서 확인할 수 있다.

먼저 구매한 도메인을 연결해주어야 한다.

Add a domain을 이용하여 도메인을 등록해주면 도메인을 관리할 수 있다.

나는 이미 등록이 완료된 상태라 Netlify DNS라 뜨지만 등록이 안되어 있으면 Awaiting External DNS 로 뜬다.

Options - Go to DNS Panel에서 사이트의 네임서버를 확인할 수 있다.

이를 가비아의 도메인 관리창에 추가해주면 두 사이트가 연결된다. 최대 24시간 정도 기다려야 연결이 완료된다고 하니 참고하면 좋을것 같다. 나는 5시간 정도 걸렸던것 같다.

마치며

Netlify는 Github와 연동하여 프로젝트를 관리 / 배포하는 플랫폼이다. 사용해보니깐 확실히 gh-pages 보다 UI가 훨씬 편하다. 프로젝트가 복잡해질수록 배포 시 발생하는 문제점이 많아지는데 에러 해결에 관한 정보도 많고 commit이나 branch 별로 간단하게 배포가 가능하다는 점이 장점인것 같다.