preactで作ったプログラムをGitHub Pagesにデプロイできない問題を解決する

前提

preactで作ったアプリをGitHub Pagesにデプロイしようとしたのだが、JSやCSSが読めない問題が起きている。
F12を押すと、JSのコンソールには「MIME タイプ (“text/html”) が許可されていないため、"{{URL}}" からのモジュールの読み込みがブロックされました。」と出ていて、ネットワークのタブを見てもJSとCSSのリクエストが404でコケていた。

なかやばし

まずは「MIME タイプ (“text/html”) が許可されていないため、"{{URL}}" からのモジュールの読み込みがブロックされました。」というエラーメッセージに関して検索する。すると以下の記事が出てきた。

記事を読むと、パスに問題があることが判明。

もう一度、F12のネットワークタブに戻ると、https://eniehack.github.io/assets/にあるファイルを読みに行っていた。私はeniehack.github.ioというリポジトリを持っていないので、https://eniehack.github.io/assets/には何もないため404を返しているようだ。
GitHub Pagesはデプロイ先がhttps://{{GitHubのユーザ名}}.github.io/{{repo名}}となるので、JSやCSSの参照を/{{repo名}}/assets/{{ファイル名}}などにする必要がありそう。

なかやばし

preactでviteを使い、GitHub Pagesへデプロイする方法はgh_pagesブランチに成果物をコミットする方式しか見当たらなかったので（つまり、GitHub Actionsを用いてPagesへデプロイする方法に対応したものがなかったので）、reactの場合ではどうだろうかと思い、検索すると、以下の記事が出てきた。

この記事によれば、vite.config.tsを以下のように編集すればよいと書いてあった:

export default defineConfig({
  base: "/YOUR_REPOSITORY_NAME",
  plugins: [react()]
})

ということで、vite.config.tsを書きかえればよいことがわかった

このスクラップは2024/04/14にクローズされました