【超備忘録】Vite+Reactのプロジェクトをサブディレクトリ下にデプロイする方法【超初心者】

はじめに

タイトルどおりVite+Reactのウェブサイトをサブディレクトリ下にデプロイする方法です。毎度忘れそうなので超個人的な備忘録です。興味がある人がいるかもしれないのでブログ化しておきます。

自分のサイトですがこのサイトのようにサブディレクトリ以下にトップページを配置したい時の手順です。

1 前提条件

• vite
• react
• typescript

上記の設定でプロジェクト作成。主の開発環境はWindowsですがMacでも変わらないと思います。

2 TL;DR

プロジェクトのルートディレクトリにあるvite.config.tsのファイルの中にあるdefineConfigの中にbase:'/サブディレクトリ名'という行を追記する。あるいは既に記載があればurlのサブディレクトリ名にしたい文字列に変更する。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import tsconfigPaths from 'vite-tsconfig-paths'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(),tsconfigPaths()],
  base: '/web/konohagames/', // ←ビルドされたアプリケーションの基本パスを指定 https://gazushige.com/web/konohagamesとするのに必要
  build: {
    outDir: 'dist', // 生成されるディレクトリ
    sourcemap: false, // ソースマップを有効にする
  },
})

たったこれだけですが、これをしないとjsやcssファイルなどの参照先がバグるので初めての時は躓いたので書き残しておきます。