React - Netlify에 배포하기

GitHub Page는 현재 리액트 라우터에서 제공하는 브라우저 히스토리가 지원되지 않는다.

그래서 Netlify를 이용해 배포해보자. ( Netlify, Now, Heroku 등.. 많이 사용 )

 

 

참고 create-react-app.dev/docs/deployment#netlify

 

 

1. Netlify 설치

터미널에서 netlify 글로벌로 설치

>> npm install netlify-cli -g

 

 

2. 계정 생성(가입)

>> netlify deploy

deploy 명령어를 호출하면 아래와 같은 가입창이 뜬다.

 

github 계정으로 생성

 

 

3. 승인팝업 승인

 

 

4. 팀이름, 사이트 생성

승인이 허락되면 터미널에 아래와 같은 질문이 나오고, 답하면된다. (파란글씨가 질문)

? What would you like to do? +  Create & configure a new site 선택

? Team: 원하는 팀이름 작성

? Site name (optional): 원하는 사이트이름 작성 (나중에 사이트url에 들어갈 부분 / (내가 정한 site name).netlify.app 로 url이 생성)

 

사이트가 생성되면 Admin URL 과 URL, 그리고 Website Draft URL 이 나온다.

URL은 (내가 정한 site name).netlify.app 로 나옴.

Website Draft URL는 임시? url로 공식으로 배포하기 전 테스트 할 수 있는 url이다.

 

 

 

5. build

github page에 배포할때는 package.json에 predeploy를 설정해서 자동으로 build되었지만

("predeploy": "npm run build",

"deploy": "gh-pages -d build")

 

이번엔 설정된 것이 없기 때문에 별도로 build해줘야함.

 

>> yarn build

또는

>> npm run build                   (설명:npm run은 script를 실행하는 명령어. npm run build라고 하면 script에 있는 build를 실행한다.)

 

 

6. deploy

 

>> netlify deploy

 

deploy 명령어를 입력하면 아래와 같은 질문이 나온다. 이때, build라고 입력 (build 폴더를 배포하겠다는 뜻)

 

성공적으로 배포 된 후에 url이 나온다.

Website Draft URL 라고 되어있는 부분의 url로 들어가면 배포된 것을 확인할 수 있다!!

 

공식으로 배포하려면 --prod 옵션을 추가해서 deploy하면 된다.

>> netlify deploy --prod

그러면 URL에서 정상적으로 배포된 것을 볼 수 있다.