[Build] gh-pages에 deploy하기

1. gh-pages 설치

gh pages를 설치할 것이다.

​

npm i gh-pages

​

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

​

일단 package.json 파일을 확인하자.

여기서 script를 보는데, 이 script를 실행하면 웹사이트의 production ready code를 생성하게 된다.

production ready란 코드가 압축되고 모든게 최적화 된다는 의미이다.

​

npm run build

​

​

이렇게 하면 브라우저가 이해할 수 있는 압축된 코드들이 들어간 build폴더가 생성된다.

​

2. 레파지토리 추가

github에 push하기 전에 깃헙에 들어가서 레파지토리를 먼저 만든 후 터미널창에 아래 코드를 입력하여 레파지토리를 연결해준다.

 

git remote add origin https://github.com/아이디/레파지토리이름

​

package.json의 맨 마지막으로 가서 콤마를 찍은 후 해당 코드를 넣어준다.

"homepage": "https://깃헙아이디.github.io/레파지토리이름/"

 

​

3. scripts 설정

scripts에 deploy라는 걸 추가해줄 것이다.

deploy는 우리가 방금 설치한 gh-pages를 실행시키고 build라는 디렉토리를 가져가는 것이다.

​

하지만 먼저 build를 하고 난 다음에 deploy를 해아 한다는 걸 기억하고 싶지 않기 때문에 predeploy라는 걸 넣을 것이다.

"deploy": "gh-pages -d build",
"predeploy": "npm run build"

npm run deploy를 실행시키면 Node.js가 predeploy를 먼저 실행시킬 것이다.

만약 build 폴더가 없다면 build를 실행시켜서 해당 폴더가 만들어질 것이다.

​

"deploy": gh-pages -d build는 gh-pages가 build폴더를 아래 "homepage"에 적어놓은 웹사이트 주소에 업로드 하도록 만든다.

​

​4. deploy

이렇게 세팅을 해줬으니 만약에 뭔가 수정하고 업데이트를 하고싶다면 npm run deploy 만 하면 된다😭

그러면 자동으로 프로젝트가 build되고 그 폴더가 github pages에 push될 것이다.

 

 

 

cf) Router 설정

1. process.env.PUBLIC_URL

gh-pages에 올릴때 react-router v5일 경우

function Router() {
    return <BrowserRouter basename={process.env.PUBLIC_URL}>
       ...
    </BrowserRouter>
}

basename={process.env.PUBLIC_URL}

이걸 추가해준다

​

"https://아이디.github.io/레파지토리이름"을 가르켜야할 것이 이렇게 안하면 https://아이디.github.io/에서 마지막 "/"의 경로를 라우터가 가리키기 때문이다.

​

react router v6일 경우 아래처럼 루트 경로의 path에 ${process.env.PUBLIC_URL} 을 추가해준다.

function App() {
  return <Router>
    <Routes>
      <Route path={`${process.env.PUBLIC_URL}/`} element={<Home/>}/>
      <Route path={"/movie/:id"} element={<Detail/>}/>
    </Routes>
  </Router>;
}

 

2. createHashRouter​

r​eact-router v6일 경우 createBrowserRouter를 사용할 수도 있다.

​

router는 "/"를 root 페이지로 인식하는데, gh-pages의 url은 eee0930.github.io/repository_name 이렇게 되어있기 때문에  "/repository_name"로 인해 404 페이지가 뜨게된다.

​

gh-pgaes에 올릴려면 createHashRouter를 사용하자.

url에 #이 붙긴하지만 다른 방법 알기전까진 이걸로 정착!

const router = createHashRouter([
    {
        path: `/`,
        element: <App />,
        children: [
            {
                path: "",
                element: <Home />,
            },
            {
                path: "movies/:movieId",
                element: <Home />,
            },
            {
                path: "tv",
                element: <Tv />,
            },
            {
                path: "search",
                element: <Search />,
            },
        ],
    }
]);

 

 

 

1. npm i gh-pages ​ 2. github 홈페이지에서 레파지토리 만들기 ​ 3. git remote add origin https://github.com/아이디/레파지토리 이름 ​ 4. package.json에 해당 내용 추가 "homepage": "https://eee0930.github.io/react-movie-app/" "scripts" : {      "deploy": "gh-pages -d build",      "predeploy": "npm run build" } ​ 5. npm run deploy

​

​