はじめに
Vite + React + TypeScript + Tailwind CSSで作成した簡単なアプリケーションをGitHub Pagesでデプロイしようとしたのですが、タブにタイトルだけは出るものの、画面が真っ白になってしまいました。
検索して出てくる対処法を色々試したのですがうまくいかず、結局、gh-pagesブランチを使うことで無事画面が表示されました。上手くいった理由はわからないのですが、一応記録しておきます。
環境
- vite: 5.4.10
- React: 18.3.1
- React Routerは未使用
- TypeScript: 5.6.2
- Tailwind CSS: 3.4.14
結論
以下のようにgh-pagesブランチを使ってデプロイすることで上手くいきました。
gh-pagesパッケージのインストール
$ npm install gh-pages --save-dev
package.jsonへの追記
- 直下に"homepage"を追加
package.json
"homepage": "https://{GitHubアカウント名}.github.io/{リポジトリ名}/",
- "script"に以下を追加
package.json
"deploy": "npm run build && gh-pages -d dist"
デプロイ
$ npm run deploy
GitHubの設定変更
Settings > Pagesでブランチをgh-pagesに変更して『Save』を押す
以上で無事に表示されるようになりました。
効果がなかったこと
私の環境では効果がなかったことを挙げます。
index.htmlでの相対パスの変更
-
src="/src/main.tsx"などをsrc="./src/main.tsx"に変更する- 画面が真っ白ということは、tsxやcssのファイルが参照されていないってことなので、パスの変更は効果ありそうでしたが、だめでした
vite.config.tsのbaseの変更
-
base: process.env.GITHUB_PAGES ? 'REPOSITORY_NAME' : './',やbase: /{リポジトリ名}/を追加する- 検索して真っ先に出てくる解決策でしたが効果なし、、
ちなみに、gh-pagesブランチでのデプロイは、baseを上記のどちらにしても上手くいきました
BrowserRouterの修正
- main.tsx.のBrowserRouterを以下の通り修正する
-
めちゃくちゃ意味ありげでしたが、私はそもそもReact Router使ってないので関係なかったです
<BrowserRouter basename={import.meta.env.DEV ? "/" : "/{リポジトリ名}/"}>
-
終わりに
せっかく作成したアプリなのでやっとデプロイできて良かったですが、原因がわからないのでモヤモヤしてます。よろしければコメントで教えてください。