[React] github page로 React 서비스 배포하기
[노마드코더 React movie app 강의 수강 후 정리 한 내용입니다]
github에 원격 저장소에 프로젝트 코드를 올려두면 github 서버로 서비스 할 수 있다.
1. gh-pages를 설치한다.
npm install gh-pages | cs |
2. 이제 'package.json' 파일을 수정해야 한다.
먼저 homepage 라는 속성을 새로 만든다.
"homepage": "https://github 유저네임.github.io/프로젝트 이름" | cs |
모든 글자는 영어 소문자로 입력해야 한다.
그리고 scripts 속성도 아래와 같이 수정한다.
"scripts": { "start": "react-scripts start", "build": "react-scripts build", "deploy": "gh-pages -d build", "predeploy": "npm run build" }, | cs |
명령어를 잠시 살펴보자.
start는 react 프로젝트를 실행시킬 때 사용하는 명령어이다.
build 명령어는 build 폴더를 생성해 react 프로젝트의 빌드 파일을 자동으로 생성해주는 폴더이다. 명령어를 처음 실행하면 새로운 build 디렉토리가 생성되고 안을 살펴보면 react로 만든 파일들이 index.html 등으로 변환되어 생성된 것을 볼 수 있다.
github 서버에 페이지를 올리기 위해서는 gh-pages로 build 디렉토리를 넘겨줘야 한다. deploy 명령어가 해당 작업을 하게 한 것이다.
predeploy는 deploy 명령어를 호출하면 자동으로 deploy 이전에 실행되는 명령어이다. 여기서는 build를 먼저 수행하고, 여기서 build된 디렉토리를 deploy가 이어서 gh-pages 명령어로 github에 전달하는 작업을 해준다.
3. deploy를 실행한다.
No comments: