[ReactJS] Publishing, 배포하기

강의를 들으면서 가장 놀랐던 순간이다.

리액트는 자체 기능 중에 배포 기능까지 갖추고 있었다.

매우 유용할 것 같으니 일단 정리해 보도록 하겠다.

 

1. gh-pages 설치하기

터미널을 열고 다음 코드를 실행시켜 리액트 내에 gh-pages를 설치해준다.

npm i gh-pages

관심없겠지만 gh-pages는 github pages에 결과물을 업로드 할 수 있게 해 주는 패키지이다.

2. build 실행

build는 우리가 우리의 코드를 브라우저로 보내기 위한 압축 과정에 해당한다.

다음 코드를 터미널에서 실행하자

npm run build

3. pakage.json 수정

pakage.json의 코드 일부분을 다음과 같이 수정해주자

 

우선, developement뒤 즉 코드의 맨 끝자락 부분에 내가 배포하고 픈 URL을 적어 줘야 하는데,

"homepage": "https://* 내 깃헙 username *.github.io/* 배포하고자하는 코드가 들어있는 github repository *"

이런 형식이다.

* 여기서 주의해야 할 점은 미리 깃헙에 내 코드들을 등록해 놓지 않으면 그것부터 하고 와야 한다 *

[깃헙에 프로젝트 올리기]를 키워드로 검색 ㄱㄱ

 

그리고나서 마찬가지로 pakage.json 파일 내의 "script"부분에 다음 코드를 추가해준다.

"deploy": "gh-pages -d build",
"predeploy":"npm run build"

 

3. build 폴더 삭제

내 프로젝트 파일 속에 바로 있는 build 폴더를 삭제해준다.

왜냐면 predeploy가 다시 만들어줄거거든

4. Route path 수정

프로젝트 내의 라우팅 하는 부분을 다음과 같은 형식으로 바꿔준다.

<Route path={process.env.PUBLIC_URL + * 내가 원하는 라우터 *} ~ 그대로 >

5. deploy 실행하기

커맨드 창에서 deploy를 실행시켜준다.

npm run deploy

이제 3에서 적었던 URL에 접속해보면 내 프로젝트가 배포되었음을 알 수 있다.

추후에 코드 수정 후 다시 npm run deploy를 해 주면 수정된 코드가 반영된다.