はじめに
GitHub Pagesで公開していた麻雀点数計算アプリ(React Router + Vite)を、SPAリライトに対応したホスティングへ移行するためCloudflare Pagesにデプロイしました。ビルド・デプロイ自体は成功したものの、実際にサイトを開くと画面が真っ白になるトラブルに遭遇しました。
原因はGitHub Pages特有の「サブパス配信」に合わせて設定していたbaseとbasenameが、Cloudflare Pages(ルート配信)ではむしろ悪さをしていた、というものでした。同じように複数のホスティングサービスを移行する際にハマりそうなポイントなので、備忘録として残します。
問題
Cloudflare Pagesへのデプロイ自体は成功のログが出ているにも関わらず、実際にサイトを開くと画面が真っ白でした。ブラウザの開発者ツールのConsoleを確認すると、以下のエラーが出ていました。
Refused to apply style from 'https://mahjong-scoring-1a1.pages.dev/mahjong_scoring/assets/index-P7q0HRPh.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
JSやCSSファイルを読み込もうとしたら、なぜかtext/htmlが返ってきている、というエラーです。
原因
このプロジェクトはもともとGitHub Pages(https://ユーザー名.github.io/mahjong_scoring/のようなサブパス配信)を前提にしていたため、vite.config.tsに以下の設定が入っていました。
// vite.config.ts
export default defineConfig({
base: '/mahjong_scoring/',
// ...
})
さらにReact Router側でも、同じサブパスに合わせてbasenameを指定していました。
<BrowserRouter basename="/mahjong_scoring">
baseの設定は、ビルドされるdistフォルダの中身自体を変えるものではありません。変わるのはdist/index.html内に書かれる、JS/CSSファイルへの参照パスです。
<!-- base: '/' の場合 -->
<script src="/assets/index-eTsBGabg.js"></script>
<!-- base: '/mahjong_scoring/' の場合 -->
<script src="/mahjong_scoring/assets/index-eTsBGabg.js"></script>
GitHub Pagesはサブパス配信なので、この設定でJS/CSSへの参照が正しく解決されていました。しかしCloudflare Pagesはドメインのルート(https://mahjong-scoring-1a1.pages.dev/)でアプリを配信するため、実際のファイルは/assets/...にあるのに、index.htmlは存在しない/mahjong_scoring/assets/...を探しに行ってしまいます。
その結果、Cloudflare PagesのSPAフォールバック機能が働き、「存在しないパスへのリクエスト」に対してindex.html(text/html)を返してしまい、ブラウザ側では「JS/CSSを期待していたのにHTMLが返ってきた」というMIMEタイプエラーになっていました。
解決方法
vite.config.tsのbase設定と、React Routerのbasename設定を削除しました。
// vite.config.ts
export default defineConfig({
// base: '/mahjong_scoring/', ← 削除
// ...
})
// Before
<BrowserRouter basename="/mahjong_scoring">
// After
<BrowserRouter>
これによりビルドされるindex.htmlが/assets/...という正しいパスを参照するようになり、Cloudflare Pagesでも正常に表示されるようになりました。
おわりに
今回の教訓は、ホスティング先を変更する際は「配信されるURLの構造」まで意識する必要がある、ということでした。GitHub Pagesのようなサブパス配信を前提にした設定(baseやbasename)は、ルート配信のホスティングに移行した際にはむしろ不要かつ有害になり得ます。
「デプロイは成功しているのに画面が真っ白」という症状に遭遇したら、まずはブラウザの開発者ツールでConsole/Networkタブを確認し、リソースの読み込みパスが正しいかどうかを疑ってみるとよさそうです。
参考
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼
https://projisou.jp