[React] Netlify, GitHub 간편 배포하기 (+ 커스텀 도메인 및 HTTPS 연결 설정)

간단하게 포트폴리오 웹사이트를 제작하면서 이것을 어떻게 배포해볼까 찾아보다가 Netlify라는 호스팅 서비스를 최근에 알게 되었는데, 단순한 정적 웹사이트를 배포하는 것에 있어서는 AWS와 비교도 안 될 정도로 간편하다는 것을 알게 되었다. Node.js 의존성 설치 등 기본적인 환경 설정은 대부분 생략 가능할 뿐 아니라, GitHub이나 BitBucket과 같은 Git Provider의 특정 저장소와 연결을 시켜서 해당 저장소의 특정 브랜치에 Push를 할 때마다 미리 지정해둔 명령어를 통해 배포를 자동화(Continuous Deployment, CD)하는 것도 매우 간편하기 때문이다.

 

따라서 이번 포스팅에서는 Netlify로 React 앱과 같은 SPA 앱을 간편하게 배포하는 방법, 그리고 GitHub의 저장소와 연결하여 배포를 자동화시키는 방법을 알아볼 것이다. 더불어, 커스텀 도메인과 HTTPS 연결을 설정하는 방법까지도 한 번 알아보도록 할 것이다.

 

1. Netlify 회원가입

먼저, Netlify 홈페이지(www.netlify.com/)에 접속하고 [Sign Up] 버튼을 클릭하여 회원가입을 하자.

 

 

회원가입은 다음과 같이 네 가지 방식 중 하나로 가능하다. 개발자라면 GitHub 계정은 이미 있을 것이니(없으면 만드는 것을 권장한다) GitHub 계정으로 가입해보자. 굳이 이메일로 또 가입하긴 귀찮다.

 

 

2. Netlify 웹사이트 배포

회원가입을 통해 로그인을 하고 나면 아래와 같은 메인 페이지를 볼 수 있을 것이다. 일종의 대시보드 같은 페이지인데, 기본 옵션에 해당하는 Starter Plan(무료)에서 사용 가능한 리소스의 사용량 등을 보여주고 있다. 예를 들어 한 달에 빌드는 총 300분까지 무료이며, 그 이상부터는 과금이 발생하게 된다. 개인적으로 간단한 웹사이트의 배포에 있어서는 300분도 충분하다고 생각한다(아주 훌륭해). 가격 정책에 대한 자세한 내용은 이곳을 참고하자.

 

 

이제 [New site from Git] 버튼을 클릭하여 Git Provider의 특정 저장소를 가져와 웹사이트로 배포해보자.

 

1단계는 다음과 같이 Git Provider를 선택하는 단계이다. 우리는 GitHub을 사용하기로 했으니 GitHub을 선택하자. 몇 가지 인증 절차가 있을 텐데, 이는 Netlify 측에서 나의 GitHub 계정에 대한 선택적인 접근 권한을 요구하는 것이니 동의해주도록 하자.

 

 

그리고 나면 다음과 같이 어떤 저장소에 Netlify를 설치할지 선택하게 된다. 필자의 경우 웹사이트로 배포할 저장소만 선택했다. (나중에 필요하면 더 선택해줄 수 있겠지 하는 생각에..) 여기서 선택되지 않은 저장소의 경우 Netlify에서 배포가 불가능하다.

 

 

다음으로 2단계는 웹사이트로 배포할 GitHub 저장소를 선택하는 단계이다. 앞서 단계에서 Netlify를 설치하기로 한 저장소들만이 선택 가능한 목록에 뜨는 것을 볼 수 있다. 적절한 것을 찾아 선택해서 넘어가자.

 

 

마지막으로 3단계는 빌드 옵션을 설정하고 배포를 진행하는 단계이다. 어떤 브랜치에 Push 할 때 자동으로 배포를 진행할 것인지, 자동으로 배포를 진행하기 위해 어떤 명령어를 자동 실행하게 할 것인지, 최종적으로 index.html 파일이 위치할 루트 디렉토리는 어느 곳인지 지정해준다. 이것들만 설정해주고 [Deploy site] 버튼을 클릭하면 Netlify가 본격적으로 배포를 진행한다. 아주 간편하다. 참고로 필자가 배포하고자 하는 웹사이트는 React 앱이기 때문에 "npm run build" 명령어를 통해 정적 파일들을 만들어내도록 설정을 하였다.

 

 

배포가 완료되기 전까진 다음과 같이 "Site deploy in progress"라고 뜰 것이다. 조금만 기다리면 배포가 완료된다.

 

 

배포가 완료되면 다음과 같이 웹사이트의 URL이 뜨게 된다. 해당 URL로 접속하여 정상적으로 배포가 잘 되었는지 확인해보도록 하자. 참고로, URL을 잘 보면 HTTPS 연결도 알아서 설정된 것을 볼 수 있다(엄청나게 간편하다).

 

 

그런데 도메인이 못생겨서 마음에 들지 않는다. 조금 더 이쁘게 바꿔보자. [Site settings] 버튼을 클릭하여 웹사이트 설정 페이지로 들어가면 도메인을 바꿀 수 있다. 단, 지금은 커스텀 도메인을 직접 설정하는 것이 아니기 때문에 기본적으로 Netlify 도메인의 하위 도메인만 사용 가능한 상태이다. 즉, 여기서 바꾸는 것은 하위 도메인이다. 지금은 우선 이렇게만 바꿔보고, 뒤에서 다시 커스텀 도메인을 설정하는 방법을 알아보도록 하자.

 

 

3. 커스텀 도메인 구매(등록)

이제 도메인을 더 예쁘게 바꿔보자. 즉, netlify.app 이런 것 없이 완전한 나만의 도메인을 사용해보자. 이를 위해서는 먼저 커스텀 도메인을 어디에선가 구매(등록)해야 하는데, 이 과정에 대해서는 여기서 자세히 다루지 않을 것이다. 필자의 경우에는 AWS Route 53에서 모든 도메인을 구매하고 있어서 이번에도 이곳에서 구매하였다. AWS Route 53에서 도메인을 구매하는 방법과 관련해서는 과거에 필자가 작성했던 이 포스팅을 참고하면 도움이 많이 될 것이다.

 

※ 개념적으로 설명하자면 커스텀 도메인 구매는 크게 두 개의 과정이 존재한다. 하나는 다른 사람이 아직 사용하고 있지 않은 도메인 그 자체를 구매하는 것이고, 다른 하나는 그 도메인에 대한 DNS 쿼리를 처리할 수 있는 네임 서버를 구매하는 것이다. 일반적인 도메인 등록대행자(EX. 가비아 등)에서 도메인을 구매하는 경우 이에 해당하는 네임 서버도 함께 제공된다. 또한 AWS Route 53에서 도메인을 구매하는 경우에도 이에 해당하는 호스팅 영역, 즉 네임 서버가 함께 구매된다. 호스팅 영역에 대한 요금은 DNS 쿼리 처리 개수에 비례하여 그때그때 발생하며, 구매 자체에 드는 요금은 없다.

 

즉, 4번부터의 설명은 이미 특정 도메인을 구매했고, 그 도메인에 대한 네임 서버까지 갖춘 상태라고 가정한다.

 

4. 커스텀 도메인 및 HTTPS 연결 설정

이제 본격적으로 미리 구매해둔 커스텀 도메인을 내 웹사이트에 설정하고 HTTPS 연결까지도 설정하도록 해보자. 먼저, 다음 페이지에서 [Domain settings] 버튼을 클릭하여 도메인 설정 페이지에 들어가고 그곳에서 [Add custom domain] 버튼을 클릭한다.

 

 

[Custom domain] 란에 미리 구매해둔 커스텀 도메인을 입력하고 [Verify] 버튼을 클릭한다. 그러면 본인의 도메인이 맞는지 물어볼 것이다. 본인의 도메인이 맞기 때문에 [Yes, add domain] 버튼을 클릭하여 다음으로 넘어가자.

 

 

이제 다시 도메인 설정 페이지로 돌아가면 두 개의 도메인 이름이 추가되어 있는 것을 볼 수 있을 것이다. 하나는 본인이 구매한 도메인 그 자체, 다른 하나는 www 하위 도메인이 붙은 도메인이다.

 

 

여기서 두 개의 각 도메인에 대해 [Check DNS configuration] 버튼을 클릭해보면 구매한 도메인에 해당하는 네임 서버에 찾아가서 레코드 설정을 어떻게 해줘야 하는지 설명이 나올 것이다. 그러면 우린 이제 여기서 설명하는 대로 AWS Route 53의 호스팅 영역으로 찾아가서 적절한 레코드를 추가해주기만 하면 된다. 다만 설명을 읽어보면 알겠지만 (이유는 잘 모르겠으나) Warning이 떠 있기 때문에 이 부분부터 먼저 챙겨주도록 해보자. 필자의 경우 Warning에서 알려주는 대로 먼저 www 하위 도메인이 붙은 도메인을 Primary Domain으로 바꿔주었다. 이는 [Options] 버튼을 클릭해서 나오는 [Set as primary domain] 버튼을 클릭하면 가능하다.

 

 

www 하위 도메인이 붙은 도메인을 Primary Domain으로 바꿔주었다면, 이제 본격적으로 AWS Route 53의 호스팅 영역으로 찾아가서 적절한 레코드를 추가해줄 때이다. AWS 콘솔의 Route 53으로 찾아가서 우리가 구매한 도메인에 대한 호스팅 영역 페이지로 들어가 보자. 그러면 다음과 같은 페이지가 나타날 것이다.

 

 

그리고 위에서 본 두 개의 설명에 따라 두 개의 레코드를 추가해주도록 하자. 하나는 Netlify의 로드 밸런서 IP를 가리키는 A 레코드로 루트 도메인에 대한 설정에 해당하며, 다른 하나는 www 하위 도메인이 붙은 도메인에 대한 설정에 해당한다.

 

 

이렇게 DNS 설정을 바꿔주고 다시 Netlify의 도메인 설정 페이지로 돌아가 보면, 다음과 같이 Netlify가 알아서 HTTPS 연결 설정을 진행하고 있음을 볼 수 있다. 이는 우리가 바꿔준 DNS 설정이 완전히 전파될 때까지 기다리는 것이다.

 

 

조금 기다리고 나면 다음처럼 HTTPS 연결 설정이 완료된다. Netlify가 알아서 Let's Encrypt의 TLS 인증서를 발급하고 설정까지 해준 것이다. 직접 인증서를 발급받고 설정하는 귀찮은 일을 해본 사람이라면 이게 얼마나 엄청난 것인지 체감할 수 있을 것이다. 매우 편하다!

 

 

이제 커스텀 도메인으로 브라우저에서 내 웹사이트에 접속해보자. 성공했길 바란다.