React+Viteで作成してGitHub Pagesにデプロイしたサイトの下層ページが404エラー

Question

実現したいこと

• React+Viteで作成したサイトの下層ページを直接URL指定した際に発生する404エラーの解消

前提

• React+Viteでjsx言語を用いてSPAサイトを作成しています。

• GitHub Pagesに、Custom GitHub Actions Workflowsを使用する設定でデプロイしています。

• /ページを表示してからのページ遷移には成功しています。

• パッケージ管理にはnpmを使用しています。

• ルーティングにはreact router domを使用しています。

発生している問題・エラーメッセージ

下層のページを直接URL指定(または更新)した時にのみ404エラーが発生しています。

改善に繋がりそうなソースコード

import './style.css' 
 import {Header} from "./components/Header"; 
 import {Dev} from "./components/Dev"; 
 import {Skill} from "./components/Skill"; 
 import {Profile} from "./components/Profile"; 
 import {MiniMemo} from "./components/MiniMemo"; 
 import {Tobaccost} from "./components/Tobaccost"; 
 import {Footer} from "./components/Footer"; 
 import {Bottom} from "./components/Bottom"; 
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; 
  
  
 export const App = () => { 
  
   return ( 
     <Router> 
       <div className="container"> 
  
         <Header /> 
  
         <Routes> 
           <Route path='/WorksTest/' element={<Dev />} /> 
           <Route path='/WorksTest/Skill' element={<Skill />} /> 
           <Route path='/WorksTest/Profile' element={<Profile />} /> 
           <Route path='/WorksTest/MiniMemo' element={<MiniMemo />} /> 
           <Route path='/WorksTest/Tobaccost' element={<Tobaccost />} /> 
         </Routes> 
  
         <Footer /> 
  
         <Bottom /> 
       </div> 
     </Router> 
   ) 
  
 }

import { defineConfig } from 'vite' 
 import react from '@vitejs/plugin-react-swc' 
  
 // https://vitejs.dev/config/ 
 export default defineConfig({ 
   base: '/WorksTest/', 
   plugins: [react()], 
 })

{ 
   "name": "test", 
   "private": true, 
   "version": "0.0.0", 
   "type": "module", 
   "scripts": { 
     "dev": "vite", 
     "build": "vite build", 
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 
     "preview": "vite preview" 
   }, 
   "dependencies": { 
     "cross-env": "^7.0.3", 
     "react": "^18.2.0", 
     "react-burger-menu": "^3.0.9", 
     "react-dom": "^18.2.0", 
     "react-scroll": "^1.8.9" 
   }, 
   "devDependencies": { 
     "@types/react": "^18.2.15", 
     "@types/react-dom": "^18.2.7", 
     "@vitejs/plugin-react-swc": "^3.3.2", 
     "autoprefixer": "^10.4.14", 
     "eslint": "^8.45.0", 
     "eslint-plugin-react": "^7.32.2", 
     "eslint-plugin-react-hooks": "^4.6.0", 
     "eslint-plugin-react-refresh": "^0.4.3", 
     "gh-pages": "^6.0.0", 
     "postcss": "^8.4.27", 
     "react-router-dom": "^6.15.0", 
     "tailwindcss": "^3.3.3", 
     "vite": "^4.4.5" 
   } 
 }

試したこと1

1. index.html をコピーして 404.htmlを作成

2. package.jsonに下記を追記

 "scripts": {
    "postbuild": "cp build/index.html build/404.html",
 }

試したこと2

1. 404.htmlを作成(空のパターンとindex.htmlの内容をコピーするパターンを試行)

2. vite.config.jsに下記を追記

  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        404: resolve(__dirname, '404.html'),
      }
    }
  }

補足情報

恐らく404ページが表示される場合にindex.htmlを参照するようにビルドを行う、ということだと思うのですが、現在の知識では改善することが出来ず、ご教授をおねがいしたいです。

バージョン

• Node.js16.17.1
• React.js:18.2.0
• Vite:4.4.9
• react router v6

Answer 1

解決しました

結論、1行コードを追記するだけでした。

修正内容

package.jsonのscriptsの項にpostbuildを追記

 "scripts": {
    "postbuild": "cp dist/index.html dist/404.html",
 }

詳細

やっている事としては質問に記載した「試したこと1」がベースとなっています。

要はビルドを行う際、本番環境にindex.htmlの内容を404.htmlへコピー出来ればいいと理解しました。

GitHubでコミット履歴を見たら、試したことの内容のコミット時に尽くエラーとなっていたため、原因を考えたところ、

• Reactのみで構築した環境ではbuildした本番環境の内容がbuildディレクトリへ、Viteを生じた場合はdistディレクトリへ保存される

ということに気が付き、buuld =>distへ記載を変えたところ、無事デプロイに成功、404エラーも解消されました。