[React] 7-7. React 앱 배포하기

📌 배포하기

📍 gh-pages

- 우리가 만든 결과물을 github에 업로드 할 수 있게 해주는 패키지

1. 다음과 같은 명령어를 입력하여 패키지를 설치한다.

npm i gh-pages

이제 gihub에 html, css, javascript로 된 파일을 올리면 그것을 사이트로 만들어서 배포해 준다. 도메인 또한 가지게 된다.

2. package.json에 있는 build라는 script를 확인한다.

위 script를 실행하면 우리 웹사이트의 production ready code를 생성하게 된다.

이것은 코드가 압축되고 최적화된다는 의미이다.

3. 프로그램을 압축하고 최적화하는 과정을 거친다.

터미널에 다음과 같은 코드를 입력한다.

npm run build

위와 같은 과정을 거치면 build라는 폴더가 생긴다.

그 폴더를 보면 우리가 작성한 js 파일이 압축된 코드 형태로 존재하는 것을 볼 수 있다.

5. 저장소를 연동해 준다.

github 저장소를 만들어 원격 저장소와 로컬을 연결해준다.

터미널에 다음과 같은 코드를 입력한다.

$ git remote add origin 저장소 주소

이제 다음과 같은 명령어를 입력하여 2줄의 결과가 나오면 연결이 잘 된 것이다.

$ git remote -v
origin  https://github.com/kanujoa/ReactJS_MovieWebService.git (fetch)
origin  https://github.com/kanujoa/ReactJS_MovieWebService.git (push)

4. package.json으로 가서 마지막 줄에(마지막 중괄호 바로 이전에) 다음과 같은 코드를 작성한다.

  , "homepage": "https://kanujoa.github.io/위에서 연결한 저장소 이름"

5. package.json에서 script에 코드를 더 입력한다.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build"      주목!!
  },

- deploy 가 하는 일은 우리가 방금 설치한 gh-pages를 실행시키고 앞서 보았던 build라는 디렉토리를 가져가는 것이다.

"predeploy": "npm rum build"

- 그런데 먼저 build를 하고 난 다음에 deploy를 해야 한다는 것을 기억하고 싶지 않기 때문에 predeploy command도 만들어 주었다.

6. 터미널에 다음과 같이 입력하여 웹사이트를 최종적으로 build한다.

npm run deploy

- deploy를 실행하면 node.js가 predeploy를 먼저 실행시킬 것이다.

- predeploy는 npm run build를 실행시키고, npm run build는 react-scripts build를 실행시키고, 이 과정이 모두 끝이 나면 gh-pages -d build가 실행된다.

- 마지막으로 내가 작성한 url을 클릭하고 5분 정도 기다리면 웹사이트가 업데이트 된 것을 볼 수 있다.

React router 6버전인 경우, gh-pages로 배포 후 빈 화면이 나오면 App.js에서 Route 컴포넌트의 path 경로 앞에 process.env.PUBLIC_URL을 추가해서 수정을 해주면 된다.

.....
<Routes>
  <Route
    path={`${process.ePUBLIC_URL}/movie/:id`}
    element={<Detail />}
  />
  <Route path={`${process.ePUBLIC_URL}/`} element={<Hom>} />
</Routes>
.....