티스토리 뷰
깃허브 계정과 저장소(repository)를 가지고 있다고 가정하고 정리를 진행합니다.
1. package.json 파일 수정하기
리액트 어플리케이션의 package.json 가장 아래 부분에 "homepage" 키와 그에 대한 밸류를 추가합니다.
이는 깃허브 주소를 어플리케이션이 인식할 수 있도록 해 주는 작업입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
{
"name": "...",
"version": "0.1.0",
"private": true,
"dependencies": {
...
},
"scripts": {
...
},
...,
"homepage": "https://깃헙계정명.github.io/저장소이름"
}
|
2. package.json 의 scripts 항목 수정하기
|
1
2
3
4
5
6
|
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
|
deploy는 gh-pages라는 모듈을 통해 빌드된 내용을 깃헙페이지에 배포해주는 기능을 수행하는 명령입니다. predeploy는 deploy를 실행하면 선행처리되는 명령으로써, 깃헙페이지 배포 전 미리 빌드 작업을 수행합니다.
3. 최종 코드 깃허브에 업로드하기
아래 세 명령어를 실행하여 깃허브 저장소에 최종 코드를 푸시합니다.
|
1
2
3
|
git add .
git commit -m "최종 코드에 대한 코멘트 적는 부분"
git push origin master
|
깃허브 저장소가 없으면 수행할 수 없는 작업이니 참고하시기 바랍니다.
4. gh-pages 설치하기
앞서 scripts에 추가한 명령어를 실행시키기 위해서는 깃허브에서 제공하는 gh-pages를 설치해주어야 합니다.
아래 명령어를 실행해 설치를 완료해줍니다.
|
1
|
npm install gh-pages
|
5. 앱 배포하기(명령어 실행)
|
1
|
npm run deploy
|
위 명령을 실행하면 predeploy -> deploy 순서대로 명령어가 실행됩니다. 시간이 조금 걸리는데, 완료되고 나면 1번 단계에서 설정했던 "homepage" 의 밸류 주소에 리액트 앱이 배포됩니다.
끝-!
'IT > React' 카테고리의 다른 글
| 리액트 리덕스 | react-redux | 개념과 동작원리 (0) | 2020.10.01 |
|---|---|
| 리액트 차트 라이브러리 | create-react-app | react-chartjs-2 (0) | 2020.09.25 |
| 리액트 컴포넌트 ref 속성값 사용 (0) | 2020.09.24 |
| 리액트 앱 라우팅 기능 추가하기 | 리액트 라우터 | react-router-dom (0) | 2020.09.22 |
| 리액트 + axios = API 사용하기 (0) | 2020.09.18 |
댓글
공지사항