13.0 Deploying to Github Pages

자 그럼 우리의 코드를 cloud에올려보자.

아래의 명령어로 gh-pages를 설치해보자.

npm i gh-pages

gh-pages는 github에서 나의 project이름을 가져오는 식이다~!

그래서 아래 명령어로 project name을 가져오자

git remote -v

origin  https://github.com/ddo0ii/movie_app_2019_nomadcoders.git (fetch)
origin  https://github.com/ddo0ii/movie_app_2019_nomadcoders.git (push)

project name을 보니 movie_app_2019_nomadcoders 이다!

 

그리고 나의 usename은 ddo0ii

 

package.json으로이동하여 homepage를 설정해주자~!

다음으로는 scripts를 추가해주자.

gh-pages를 호출하고, folder를 업로드하도록!

그래서 npm은 predeploy를 먼저 호출할 것이다.

predeploy는 npm run build를 할거다.

build는 build script를 호출할것이다.

script는 우리에게 folder를 줄것이다.

완료되면 predeploy는 끝나고, 우리는 deploy(gh-pages호출, build폴더 업로드)

 

자 그럼 

npm run deploy

해보자!

위와같이 잘 publish되었다는 것을 볼 수 있다.

자 그럼 홈페이지로 한번 이동해보겠다.

https://ddo0ii.github.io/movie_app_2019_nomadcoders/

React App

정상적으로 잘 작동한다.

package.json

{
  "name": "movie_app_2019",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "gh-pages": "^4.0.0",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "deploy": "gh-pages -d build",
    "predeploy": "npm run build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "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://ddo0ii.github.io/movie_app_2019_nomadcoders/"
}

 

그럼 우리 App의 title을 바꿔보자. 

이 때문에 우리는 deploy를 다시해야한다~!

npm run deploy

그럼 정상적으로 deploy가 되어있음을 확인할 수 있다.