React JS_웹 페이지 클라우드에 올리기 by Github

#5.0

아래 강의 중 'ReactJS로 웹 서비스 만들기'를 보고 배운 것과 모르는 것을 찾아 정리한 내용입니다.

https://academy.nomadcoders.co/courses

Academy

 

 

1. GitHub page로 웹사이트 접속하기

1. gh-pages 설치하기

명령어: npm i gh-pages

gh-pages는 내가 만든 웹사이트를 깃허브에 업로드하는 것을 허가해주는 모듈로, 웹사이트를 github의 github page 도메인에 나타나게 해준다. github에서 내 project 이름을 가져와 페이지를 동작시킨다.

 

2. package.JSON 설정하기

package.json 파일에서 homepage를 설정해야 한다.

homepage는  https://username/github.io/project_name 형식이며 usernamer과 project name은 소문자여야 한다.

"homepage": "https://gayoungyeom.github.io/movie_app"

 

3. 명령어 만들기 deploy & predeploy

package.json 파일에서 이어서 다음과 같이 추가한다. script 객체에서 deploy와 predeploy를 설정한다. 

deploy는 gh-pages를 호출하고 폴더가 어디서 왔는지를 나타낸다.(빌드 디렉토리) //build 폴더를 업로드 한다.

predeploy는 빌드 폴더를 얻는 명령어를 가지고 있으며, 이는 기본적으로 deploy를 호출할 때마다 호출된다. (deploy가 predeploy를 호출한다. 단, 이름이 같아야 한다.)

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "deploy": "gh-pages -d build",
    "predeploy": "npm run build"
  },

 

4. Publish

콘솔에서 npm run deploy 명령어를 치면 다음과 같이 나온다. 쭉 진행되면서 마지막에 published가 뜨면 성공적으로 올라간 것이다. 2번에서 설정한 홈페이지로 들어가면 웹페이지가 나오는 것을 볼 수 있다.

 

published