React 배포하기

• FE에서 간단하게 페이지를 배포하는 툴은 여러가지가 있습니다. vercel. AWS, netllify, gh-pages 등등 다양하게 제공되고 있고 언제든 무료로 사이트를 배포할 수 있습니다. 이중 저는 프로젝트가 무겁지 않고 가벼울 때는 주로 gh-pages를 활용해서 배포를 합니다.
• 이때 리엑트는 CSR(Client-side-rendering)이며 SPA(Single-page-Application)이라는 특징을 가지고 있습니다. 이는 자바스크립트를 통해 페이지가 동작하며, 하나의 페이지(index.html)에서 모든 화면과 데이터를 처리한다는 것을 의미합니다. 이러한 상황에서 router를 적용하기 위해 사용하는 라이브러리가 react-router입니다. 라이브러리이지만, 페이지 전환을 하고 싶다면, 필수적으로 사용되는 라이브러리고 생각합니다.
• react-router v6부터는 data API를 제공해주는데, 이는 createrBrowserRouter, createMemoryRouter, createHashRouter 등을 사용할 때만 제공이 되는 내장 API입니다. 이는 많은 편의성과 기능을 제공하기에 개인적으로 사용하는 것이 개발에서 많은 편의성을 제공해준다고 생각합니다.
• 이러한 상황에서 배포시에 고려할 점은 BroswerRouter 와 HashRouter의 차이입니다.

BrowserRouter vs HashRouter

• react-router는 ‘client side routing’을 가능하게 해주는 라우팅입니다. 즉 실질적인 routing이 발생하는 것이 아닌, routing이 발생하는 것처럼 눈속임을 사용자에게 주는 것이라고 할 수 있습니다. 즉 서버에 다른 문서를 요청하지 않고도 링크 클릭으로 URL을 업데이트 할 수 있습니다. 앱은 즉시 새 UI를 렌더링 하고 데이터를 요청하여 새 정보로 페이지를 업데이트 합니다.

• 우선 두 Router의 차이를 살펴 보겠습니다.

BroswerRouter를 통해 배포하기

• github-page를 통해 배포한 사이트의 url은 다음과 같은 형식을 가지고 있습니다. https://[github-user-id].github.io/[github-repository-name]/ 하지만 로컬에서 router를 사용하여 작업을 할 시에는, router경로가 다음과 같이 시작합니다. http://localhost:3000/ 이와 같은 이유로 어떠한 설정 없이 배포하면, 배포 파일은 시작 URL을 https://[github-user-id].github.io/ 로 인식합니다. 따라서 이를 수정해야 할 필요가 있습니다.

BASE_URL 설정하기

• 다음과 같은 문제를 해결하기 위해서 BASE_URL을 설정하여 문제를 해결할 수 있습니다.
• 이는 router에게 기본 URL을 제공하여 베이스 url을 새롭게 인식하도록 만들 수 있습니다.

// React CRA
<BrowserRouter basename={process.env.PUBLIC_URL}>
 
// React vite
/* 타입스크립트를 사용할시에는 index.d.ts에 env 환경을 인식시킬 필요가 있습니다.
따라서 import 'vite/client' 를 통해 vite/client에서 제공하는 env 환경을 인식하도록 합니다.
*/
<BrowserRouter basename={import.meta.env.BASE_URL}>

• vite를 사용할 시에는 vite.config.ts 혹은 vite.config.js에 BASE_URL을 설정해주어야 합니다.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
 
// https://vitejs.dev/config/
export default defineConfig({
  base: '[해당 Github Repo 이름]',
  plugins: [react()],
});

• 만약 v6에서 제공하는 createBrowserRouter를 사용한다면 해당 페이지를 통해 인수 전달을 어떻게 하는지 확인할 수 있습니다. createBrowserRouter v6.15.0

  function createBrowserRouter(
    routes: RouteObject[],
    opts?: {
      basename?: string;
      future?: FutureConfig;
      hydrationData?: HydrationState;
      window?: Window;
    },
  ): RemixRouter;

  //예시
   
  const router = createBrowserRouter(
    [
      {
        path: '/',
        element: <App />,
        children: [
          {
            path: Path.HOME,
            element: <Home />,
          },
          {
            path: Path.PRODUCT,
            element: <ProductLists />,
          },
          {
            path: Path.BOOKMARK,
            element: <Bookmark />,
          },
        ],
        errorElement: <NotFound />,
      },
    ],
    { basename: import.meta.env.BASE_URL },
  );
   
  export default router;

배포하기

• react에서 gh-pages에 쉽게 배포하기 위해 우선 해당 라이브러리를 설치합니다.

• package.json에 다음과 같이 작성을 합니다.

{
	...,
  "scripts": {
    "deploy": "gh-pages -d dist"
  },
  "homepage": "http://kd02109.github.io/ShoppingApp/"
}

• npm run build 를 실행합니다.
• 이후 npm run deploy를 실행합니다.
• 정상적으로 배포가 되는 것을 확인할 수 있습니다.

Reference

• npm: gh-pages

• [React] react-router 적용한 React 앱을 github pages로 배포하는 법

• createBrowserRouter v6.15.0

• https://github.com/vitejs/vite/issues/9539