[React] github page 그리고 react-router-dom

deeplink를 사용해볼 겸 간단하게 배포를 해봐야했다.

static 웹페이지라면 github에 간단하게 배포를 해볼 수 있기 때문에 시도를 해보려고 했으나

뜻밖에 react-router와 github page에 대해서 공부하게 된 내용을 정리해보려고 한다.

 

프로젝트 별 Github Page

깃헙에서 새로운 레포를 만든 다음, 그 레포 이름을

 

`${MY_GITHUB_ID}`.github.io

 

이렇게 만들어주면 배포될 수 있는 페이지를 볼 수 있다고 알고 있다.

라우팅 되는 주소는 당연히 루트 주소!

 

루트 주소에 만들어도 꽤 유용하지만, 매번 다른 프로젝트를 만들 때 마다 루트를 태워보내는건 무척 비효율적이다.

이번 내 프로젝트 명이 "Mintty" 이니,

나의 경우에는 howdyfrom2019.github.io/mintty 에 프로젝트를 만들고 싶다는 생각을 해보았다.

 

404.html에 대해서

 

기본적으로 github page는 싱글페이지 어플리케이션(SPA)를 기반으로 빌드되기 때문에,

만약 내 프로젝트가 howdyfrom2019.github.io/mintty에서 동작한다고 했을 때, react-router-dom으로 설정해준 그 하위 url 파라미터를 인식하지 못한다.

 

react-router-dom이 처리하기 전에 github page 엔진을 먼저 거치기 때문에 이런 일들이 일어난다.

그렇기 때문에 메인페이지에서 UI를 눌러서 하위 주소 등으로 넘어갈 수는 있지만,

새로고침을 하거나 직접 하위 url을 입력해서 들어가면 위처럼 404페이지가 뜰 것이다.

 

404page의 기본 원리가 미리 짜여있는 404.html을 보여주는 것이기에, 우리가 index.html과 똑같은 404.html을 만들어서 넣어주면 편법으로 해결가능하다.

(아마 github 엔진은 똑같이 404.html을 보여주겠지만, 사실 내용물이 index랑 같기 때문에 이젠 react-router-dom까지 도달 할 수 있게 되는 것이라고 이해하면 되겠다.)

 

✨프로젝트 빌드하기

이전까진 매번 빌드한 후에 github.io 레포에서 직접 "add a new file" 버튼으로 직접 push를 해줬었는데,

귀찮게 이렇게 안해도 된다는 사실을 알았다.

 

그리고, 직접 페이지 레포에서 해주는 게 아니라 진행하고 있는 내 프로젝트 레포에서 gh-page라는 브랜치를 만들어주고 거기에서 따로 깃헙 페이지관리를 해줄 수 가 있었다.

 

npm i gh-pages
npm i shx

 

먼저 이 두 라이브러리를 설치해주자.

gh-pages는 빌드와 github 페이지로의 deploy를 도와준다.

shx는 나중에 설명할 깃헙 페이지에서 꼭 처리해줘야하는 404.html을 다루기 위해 필요하다.

 

배포를 위해 package.json에서 몇 가지 세팅을 해줘야한다.

 

package.json

/**
*@hompage: 배포할 홈페이지 주소를 넣어주세요."
*@scripts: predeploy와 deploy를 넣어주세요."
*/

{
  "homepage": "https://howdyfrom2019.github.io/mintty",
  "name": "YOUR_PROJECT_NAME",
  "version": "0.1.0",
  ...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "shx cp build/index.html build/404.html && gh-pages -d build"
  },
  ...
}

 

배포할 홈페이지 주소를 설정해준다.

이제 더 이상 루트에다가 배포하지 말고 하위 주소로 프로젝트 명을 넣는게 진짜 유용하다.

 

이어서 deploy와 predeploy를 설정해준다.

이렇게 설정해두면 deploy 스크립트가 실행되기 전에 predeploy에 넣어둔 빌드 스크립트가 실행된다.

그리고 cp라는 명령어가 linux용 복사 명령으로 보이는데 윈도우에서는 해당 명령이 없다고 나오기 때문에 아까 설치한 shx를 이용해서 index.html을 404.html로 복사 해준 다음 gh-pages에 deploy를 해준다.

(그냥 build된 index.html을 그대로 복사해서 404.html로 만들어줘도 될 것 같긴 한데, 라우팅에서 못알아 먹을 까봐 그냥 이렇게 해줬다.)

 

🪢BrowserRouter 설정

우리가 배포할 주소앞에 mintty를 넣었기 때문에, BrowserRouter에서 baseurl을 설정해줘야한다.

homepage의 주소를 기본으로 해서 라우팅이 동작하기 때문에,

이전에 "localhost:3000/"에서 동작한 라우터였다면 이젠 "localhost:3000/mintty"에서 동작하도록 만들어줘야할 필요가 있다.

 

App.tsx

return (
  <BrowserRouter basename={process.env.PUBLIC_URL}>
    //...
    <Route path={"/*"} element={<Docs404 language={"NULL"} />} />
  </BrowserRouter>
  );

 

이렇게 넣어주면 알아서 되는 걸로 보인다. 따로 .env를 만들지 않아도 알아서 알아먹는다.

원래 없는 url을 직접 입력하고 들어왔을 때 github에서 보여주는 404.html이 우리가 빌드할 index.html과 같기 때문에 404 page에 대한 케이스 대비를 우리가 직접 해줘야한다.

나는 일단 급한대로 404 DOCS를 넣어줬다.

 

howdyfrom2019.github.io/mintty/hi~

 

뭔가 이상하지만 일단 그냥 넘어가는 걸로..😀

 

배포하기

npm run deploy

 

이렇게 해주면 우리 프로젝트의 하위 브랜치로 gh-pages가 생긴다.

이 브랜치는 빌드된 파일로 구성되어 있다. 잘 보면 index.html과 404.html 모두 들어가 있는 걸 확인할 수 있다.

이러면 성공적으로 잘 동작 된것!

 

 

 

이제 github 캐시가 지워지길 기다리자!

한 5분 정도 뒤에 접속해보면 이제 내 홈페이지가 배포되어있다. 이제 라우팅도 문제없이 된다!

 

https://howdyfrom2019.github.io/mintty/

Mintty

 

여담. Open Graph 메타 데이터에 대해서

메타 데이터를 보여주는 위의 링크를 보면, 프로젝트 명, 설명, 사진 처럼 간단한 설명들을 볼 수 있다.

이런 세팅은 해당 주소의 index.html에 넣어져있는 메타태그를 파싱해서 가져오는데, 이런 정보를 넣어주는 걸 open graph라고 한다.

 

public/index.html의 head 태그 안에 이렇게 넣어주면 된다.

<meta property="og:type" content="콘텐츠 유형(website | blog)">
<meta property="og:url" content="사이트 주소">
<meta property="og:title" content="프로젝트 명">
<meta property="og:image" content="썸네일 주소">
<meta property="og:description" content="프로젝트 설명">
<meta property="og:site_name" content="사이트 이름">
<meta property="og:locale" content="en_US">

<!--여긴 권장사항입니다. 썸네일 크기를 보통 이렇게 넣어줍니다.--!/>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

 

썸네일 주소는 그냥 로컬 주소를 써도 되지만, 어디 웹사이트에다가 올려서 가져오는게 나아보인다.

따로 s3같은 클라우드를 쓴다면 해당 주소에 넣어주면 되고, 나는 그냥 imgur에 올린다음에 거기 이미지 주소를 넣어줬다.

 

그럼 이제 끝!

---

모바일에서 deeplink를 테스트해보거나 하면, ssh가 꼭 있어야한다.

근데 이 ssh를 git bash에서 직접 만들어 줄 수 있는 것 같다. 

 

 

이렇게 만들어 주면 github page에서도 ssh를 통한 안전한(?) deeplink 사용이 가능하다.

이 과정이 너무 길어서 다음에 따로 다뤄봐야할 것 같다.

그럼 진짜로 이만...!