【GitHub Pages】Vite+Reactで作成したSPAの下層ページで404エラー

記事内容

GitHub PagesへデプロイしたVite+Reactで作成しているSPAサイトの下層ページで404エラーが発生する事象への対処

前提条件

• Topページの表示には成功している

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

バージョン等あれこれ

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

試したこと

「vite 404 github」や「vite react
404」などで検索し、いくつかの対処方法を試したものの改善せず、困り果ててましたが、
以下の対処が今回のエラー解消に直結しました。

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

package.json

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

しかし、この時点では現象の改善には至りませんでした。

結論

上記のコードを下記に変更する。

package.json

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

詳細

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

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

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

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

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