Viteで作ったサイトをGitHub Pagesでホストしてカスタム404ページを有効にする #GithubPages

この記事の概要

タイトル通り、Viteでサイトを作成し、GitHub Pagesで公開する際、カスタム404ページを適用する方法を記事にしました。

環境

主だったものを記載します。

パッケージ名	バージョン
react	18.2.0
typescript	4.9.3
vite	4.1.0

前提

公式サイトにあるようにGitHub Actionsを使ってGitHub Pagesへデプロイするとします。

もちろん手動でデプロイしても構いませんが、要はvite buildをした結果生成されるdist/を静的に配信する、ということです。

実施すること

要約すると以下を実行します。

404.htmlを用意する
vite.config.jsを編集して、エントリーポイントを増やす

本来GitHub Pagesでは404.htmlを用意すればそれだけでカスタム404ページとして公開してくれます。
しかしViteはデフォルトではこのファイルを認識してくれないため、ビルドしたコードに含まれません。
そのため、vite.config.jsを編集して明示的に404.htmlを含めるようにする必要があります。

vite.config.js

import { resolve } from "path";
import { defineConfig } from "vite";

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

この状態でnpm run buildなどのコマンドが叩かれれば、dist/内に404.htmlが含まれて、カスタム404ページを配信できます。

より細かいことは、公式の本番環境用のビルド - マルチページアプリを参照してください。

試したけどダメだったこと

publicの中に404.htmlを配置すればいける？と思いましたがダメでした。
よく考えれば当たり前ですね。

中身を何も書き換えないままdist/内に配置されてしまうので、バンドル後のJavaScriptではなく開発用のファイルを呼び出そうとしてしまいました。

最後に

何も手を加えないでもできるものだと勘違いしていましたが、思ったよりは設定が必要でした。
今回はカスタム404ページを作るだけの話だったものの他でも使いそうな知識な気がして、記事にしています。

お役に立てれば幸いです。

最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！

Devトークでお話してくださる方も募集中です！