React 프로젝트, 정적 사이트 Netlify에 배포하기

React 프로젝트, 정적 사이트 Netlify에 배포하기

안녕하세요. 갓대희 입니다. 이번 포스팅에선 가볍게 React 프로젝트를 배포 해보려 합니다. :- ) 

 

Netlity는 GitHub, GitLab 등과 계정 연동 및 정적서버로 쉬운 호스팅을 제공하는 서비스이다.

글로벌 배포, 지속적인 배포(Continuous Deployment), One-Click HTTPS, CDN 등 다양한 서비스를 제공한다.

특히 JAMstack, SPA(Single Page Application)가 유행하면서 이러한 정적 사이트을 쉽게 배포할 수 있어 인기가 있나 싶다.

※ JAM Stack
 - JavaScirpt, API, Markup으로만 구성된 스택, 
 - 즉 JavaScript와 API, Markup으로 웹 애플리케이션을 구성하고, 정적 리소스를 정해진 CDN(Content Delivery Network)에 배포하여 관리하는 스택

 

한달에 빌드 시간이 300분 이상, 월 트래픽 100G 이상이 되어야 과금이 된다.

개인 용도로는 충분 하다고 생각 되지만, 혹시 요금 관련된 내용이 궁금 하다면 다음을 참고하면 될 것 같다.

https://www.netlify.com/pricing/

 

0.  Netlify로 배포하는 방법

#1. Netlify 회원 가입 

 - Netlify 사이트 접속.

https://www.netlify.com/

 

 - 우측 상단의 Sign up 버튼을 눌러 회원가입을 한다.

 - 원격저장소 플랫폼으로 가입하는것을 추천한다. 난 Github 계정으로 가입하였다.

 - 가입하면 간단한 Quick Guide가 나오는데 읽어보고 넘기도록 하자.

 

#2. Netlify와 Github Repository 연동하기

 - Sites > Add new site > Import an existing project 클릭 (New site from Git)

 

 - 본인의 호스팅할 소스를 가진 저장소를 선택 해 준다.

 

 - Github과 연동을 위해 권한을 요청을 한다.

 

 - Github에서 관련 권한을 승인 해 준다. (전체 repository 또는 특정 repository를 선택할 수 있다.)

 

 

 - 다시 연동할 저장소 Github을 선택 하도록 하자.

 - 본인의 repository 목록을 볼 수 있으니, 원하는 repository를 선택 해 준다.

   나와 같은 경우는 react 프로젝트 저장소를 선택 하였다.

 

 

 -  빌드를 위한 기본 설정을 해주자.

1) 원하는 브랜치를 선택할 수 있다.
ex) master를 배포할 브랜치로 설정 하였다.

2) Build command : 빌드 커맨드(Build Command)가 있다면 설정 한다.

ex) 나와 같은 경우는 yarn을 사용하고 있어 yarn build를 build명령어로 입력 하였다.

3) Publish directory : 정적 디렉토리(Public Directory)를 설정 한다.

ex) yarn build 실행 후 생성되는 build 폴더를 publish directory로 설정 하였다.

 

 - 연동과 함께 빌드가 시작되는 것을 볼 수 있다. 그리고 최종 빌드 성공 유무도 확인 가능하다.

   (이후 해당 브랜치의 변경사항이 있을 때 마다(push시) 자동 배포되는 것을 볼 수 있다.

 - 위의 Failed 라인을 클릭하면 빌드 실패 로그를 확인 할 수도 있다. 

ex) deploy log 를 잘 살펴보면, warning 문구가 보이는데, react 소스 코드에서 해당 라인을 꼭 지워줘야 한다. 로컬에서는 warning 문구가 있어도 정상 작동하지만, 배포 환경에선 이런 warning 문구가 뜨지 않도록, 문제가 되는 코드를 주석처리하거나 지워 주자.

 

 - 수정 후 다시 push하면 정상적으로 배포된 것을 볼 수 있고,  우측 상단에 미리 보기로 배포된 사이트를 볼 수 있다.

ex) 최초 배포 완료 전 웃는 표시의 빈 페이지

ex) 정상 배포 성공 후 

 

- 주소가 매우 긴것을 볼 수 있는데 (http://distracted-minsky-882fle.netlify.app)

  Site name을 변경하여 간단히 할 수도 있다.

 

 - Site settings 클릭 > change site name 에서 원하는 이름으로 변경

 

 - 마지막으로 react 프로젝트인 경우

   package.json 파일에서 homepage, 배포된 Netlify URL를 추가 해 준다.
ex) "homepage":"https://trello-fo.netlify.app/",

$PUBLIC_URL이 해당 homepage라고 선언한 속성의 주소를 따라 변하기 때문이다.

 

생각보다 길었지만, 막상 5분이내에 정적 사이트를 배포할 수 있을 것 이다.매우 유용한 서비스 중 하나라고 생각 하며 마무리 하려 한다.