vscode에서 github page로 바로 배포하기 📑

vscode에서 만든 프로젝트를 github page로 바로 배포해보자

 

1. 먼저 github의 repository와 연결되어 있어야 한다.

git remote -v 했을때 아무것도 나오지 않는 상태라면 git remote add origin https://github.com/깃허브유저이름/레포지토리이름 로 repository를 추가해줘야 한다.

이미 연결이 되어있는데 유저이름을 확인하고 싶다면 git config --global user.name 으로 확인할 수 있다.

 

2. npm i gh-pages

gh-pages는 결과물을 github pages에 업로드 할 수 있게 해주는 패키지이다.

터미널에 npm i gh-pages를 입력하자.

 

3. package.json에 homepage를 추가한다.

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

package.json 파일을 열고 homapage를 추가하는데 https://깃허브유저이름.github.io/레포지토리이름 순서에에 유의하자.

 

 

4. package.json의 scripts에 deploy를 추가한다.

"deploy": "gh-pages -d build",

"predeploy": "npm run build"

package.json의 scripts에 위의 두 줄을 추가하자.

저장 후 npm run deploy를 하면 node.js가 predeploy를 먼저 실행하여 npm run build가 되어 프로젝트 파일들을 압축하고 최적화한 build 폴더가 생성되고 이후에 gh-pages -d build가 실행된다.

 

이제 homepage에 적었던 githube page를 열어서 프로젝트가 업로드 되었는지 확인하자.

업로드 될 때까지는 몇 분의 시간이 소요되므로 조금 기다리자.

 

만약 프로젝트를 수정하고 githube page에 반영하고 싶다면 수정 후 npm run deploy만 하면 된다.

 

5. Route 경로 수정

React router 6버전(react-router-dom 6 이상 버전)이라면 위의 순서대로 npm run deploy까지 해도 404에러만 보일 수 있다.

그렇다면 App.js 를 열어 Route컴포넌트에 다음과 같이 basename을 추가한 후 저장하자.

const App = createBrowserRouter(

  [

    { path: "/", element: <Home /> },

    { path: "/movie/:id", element: <Detail /> },

  ],

  { basename: process.env.PUBLIC_URL }

);

 

6. 레포지토리 설정 변경

5번까지 했음에도 404에러가 난다면 해당 깃허브 레포지토리의 설정에 들어가 private를 public으로, settings/pages에서 branch를 gh-pages로 바꾼 후 저장하고 확인해보자.