23 - 영화 앱 깃허브에 배포하기 - 프로젝트 끝

- package.json 파일 수정하기

깃허브 주소를 영화 앱이 인식할 수 있도록 package.json 파일 수정.

homepage 키와 키값을 browserslist 키 아래에 추가

깃허브 계정과 저장소 이름 주의하지.

package.json 을 보자.

스크롤 내려 젤아래쪽에 browserslist 찾는다.

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }, // 여기 쉼표 잊지말기
  "homepage": "https://계정명.github.io/저장소 이름"  // 본인 계정명과 저장소 이름적기
}

 

- 이어서 package.json 에서 script 키값으로 명령어 추가하기

스크롤을 조금 올려서 scripts 를 찾는다.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build", /* 여기 쉼표 잊지말기 */
    "predeploy": "npm run build", /* 여기 추가 */
    "deploy": "gh-pages -d build" /* 여기 추가 */
  },

 

- 깃허브에 업로드 하기

터미널이나 git bash 에서 코드 블록처럼 입력한다.

git add .

git commit -m "최종 완성 코드"

git push origin master

 

- gh-pages 설치

깃허브에서 제공하는 GitHub Pages 서비스로 영화 앱 배포. (무료)

프로젝트 루트 폴더에서 코드 블록의 명령어를 입력해서 gh-pages 를 설치.

 

- 깃허브 저장소 다시 확인.

코드 블록에 있는 명령어를 입력하면 업로드한 깃허브 저장소 주소를 확인 할수있다.

저장소 주소에 있는 깃허브 계정명과 깃허브 저장소 이름을 확인하자.

이 이름들이 깃허브에 배포한 영화 앱 주소에 사용된다.

git remote -v

입력하면

origin  https://github.com/계정명/저장소명.git (fetch)
origin  https://github.com/계정명/저장소명.git (push)

코드 블록 같은 주소가 뜬다.

 

- 영화 앱 깃허브에 배포하기

터미널에 코드 블록과 같은 명령어를 입력해서 영화 앱을 배포하자.

npm run deploy

 

- GitHub Pages에 접속해서 영화 앱 확인하기

URL에 코드 블록처럼 입력하자.

계정명과 저장소명에는 본인 것을 넣으면 된다.

https://계정명.github.io/저장소명

---

배포까지 최종적으로 끝.