본문 바로가기
React.js

[React.js] CRA 개인 프로젝트 Netlify로 배포하기

by Vintz 2021. 7. 5.
반응형

몇달 전에 CRA로 만든 프로젝트를 Netlify로 배포한 적이 있다. 이번에 또 배포하려고 하는데 금세 까먹었다. 또 다시 문서 찾고..강의 다시 보고..반복 되는 시간을 줄이기 위해 글을 쓰게 되었다. 생각보다 간단하다. 

먼저 Netlify 회원가입이 되어 있어야합니다. yarn 기준으로 설명되어 있습니다.

01. yarn build

배포하기 첫번째 yarn build 입력 그림-1

먼저 내 프로젝트 디렉토리에 yarn build를 수행해서 사용자에게 배포할 수 있는 소스코드로 만들어 준다.

(최적화 작업)

02. netlify deploy

배포하기 두번째 netlify deploy 입력 그림-2

그 다음 netlify deploy를 입력하면 이 디렉토리를 기존 사이트에 연결할건지, 새로 만들지 물어본다.

그냥 연결할래? 새로 만들래? 그림-3

무슨 소리인지 잘 모르겠다. 그냥 새로 만들기로 한다. 그 후

  1. 팀 이름을 짓고
  2. 사이트 이름을 정해주고
  3. 마지막으로 배포 디렉토리를 build로 배포해주면

그림-2처럼 된다.

03. 최종 배포하기

모두 잘 동작하나요? 그림-4

그림-2를 보면 웹사이트 URL이 아닌 Draft URL이라는 것을 알 수 있다. 말그대로 임시 URL인데, 마지막으로 배포하기 전 Draft URL을 통해 웹 앱이 잘 동작하는지 테스트하고, 검증하는 단계이다. 즉, 내가 변경한 부분이나 모든 것이 정상적으로 돌아가는지 확인 후 사용자에게 정식으로 배포하게 된다.

 

실제 현업에서도 적용되는 과정이라고 한다. 배포하기 전 이런 상태를

  1. Development 환경
  2. Staging 환경

이라고 하는데, 이런 환경에서 검증팀이나 개발팀이 이슈가 없는지 확인한 후 사용자에게 배포하게 된다.

 

우리도 이와 같이 변경된 사항을 임시 URL을 통해 확인 후 제대로 동작하면 배포하자.

이제 모두 잘 동작을 한다면 netlify deploy --prod를 입력한다.(prod는 production의 약자이다.)

똑같이 배포 디렉토리는 build로 한다. 그림-5
최종 배포가 완료되었다. 그림-6

04. 결과

최종 배포 결과. 그림-7

URL도 설정한 이름으로 되었고 잘 동작한다! 👏 

반응형

댓글0