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 사이트 접속.
- 우측 상단의 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분이내에 정적 사이트를 배포할 수 있을 것 이다.매우 유용한 서비스 중 하나라고 생각 하며 마무리 하려 한다.
'3. 웹개발 > 3_4 환경설정 & etc' 카테고리의 다른 글
| 헤로쿠(Heroku)에 스프링 부트 프로젝트 배포 하기 (0) | 2022.03.28 |
|---|---|
| 마크다운(MarkDown) 사용법 (0) | 2022.02.07 |
| React 프로젝트, 정적 사이트 Netlify에 배포하기 (0) | 2022.02.07 |
| [ 파이썬 ] Window10 파이썬(python) 설치하기 (0) | 2021.01.18 |
| [ Node.js ] Window10 노드js 설치하기 (1) | 2021.01.18 |
| [ DBever ] 편리한 환경 설정(자동 완성끄기, 폰트 설정, Line 설정 등) (0) | 2021.01.07 |
댓글0