vite + React 에서 base url 설정하기

웹페이지를 도메인 루트에 배포하고 패스들은 라우팅으로 관리할 수도 있지만, nginx를 앞에 두고 패스 별로 다른 웹앱을 배포하고 싶은 경우가 있다.
예를 들면 my.awesome.site 와 my.awesome.site/admin, my.awesome.site/customer 가 각각 바닐라 JS, React, Vue를 써서 만들어진 경우가 있다.
우선, /admin 이라는 패스가 붙기 때문에, React 라우터에서 수정이 필요하다.

<BrowserRouter>
  <Routes>
    {/* my.awesome.site/admin 이나 my.awesome.site/admin/* 으로 접속한 경우, 
        my.awesome.site/admin 으로 다시 보내주는 역할 */}
    <Route index path="/admin" element={<Render />} />
    <Route path="*" element={<Navigate to="/admin" />} />

    {/* 만약 위와 같이 안 하고 아래처럼 루트로 보내주면,
        my.awesome.site/admin 이나 my.awesome.site/admin/* 으로 접속했을 때
        url을 my.awesome.site/ 으로 설정해서, 당장 작동은 정상적으로 하긴 하지만
        url과 렌더링 페이지의 괴리가 생긴다. */}
    <Route index path="/" element={<Render />} />
    <Route path="*" element={<Navigate to="/" />} />
  </Routes>
</BrowserRouter>

아래쪽의 코드를 지우고 위쪽의 코드를 사용하면 되지만,
그냥 두더라도 위쪽의 path="*"에 걸려서 무관하다.

다만 이렇게 라우팅만 설정해주면 html에서 js, css, 이미지 등의 애셋을 불러올 때 에러가 떠서 페이지가 정상적으로 로드되지 않기 때문에, vite.config.ts(js)에도 수정을 해야 한다.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  base: "/admin",
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        entryFileNames: "[name].js",
        assetFileNames: "[name].[ext]",
      },
    },
  },
});

base에 시작하는 루트 패스 (여기서는 "/admin")를 제공하면 된다.
(plugins 부분은 원래 있는 것이고, build 부분은 js와 css의 파일명이 매번 바뀌는 것을 막기 위한 설정이어서, 여기서는 필수는 아니다.)

요약:
1. React 라우터에서 기본적으로 라우팅되는 url의 앞에 전부 (설정할 패스)를 붙여준다. 단일 페이지가 아닌 경우 nested 라우트를 사용하는 것이 편할 것 같다.
2. vite.config.ts(js)의 defineConfig 함수 안쪽 오브젝트의 멤버 변수 base에 (설정할 패스)를 지정한다.