話すこと
- すでにGitHubでソース管理しているかつ実装済のReactアプリをGitHubPagesにデプロイする
話さないこと
- GitリポジトリやReactプロジェクトの作成方法
- カスタムドメインの取得方法
環境
| 技術 / ツール | バージョン |
|---|---|
| Bun | 1.1.5 |
| TypeScript | 5.4.5 |
| Vite | 5.3.1 |
| React | 18.3.1 |
| React Router | 6.26.0 |
手順
1. GitHubリポジトリの設定
リポジトリのSettings > Pagesから、デプロイするブランチを選択後、docsを選択してSaveを押下します
2. vite.config.tsの変更
デプロイ時にディレクトリ名を変更したりコピーするのが面倒なのでビルドの出力先を予めデフォルトのdistからdocsに変更しておきます。
vite.config.ts
export default defineConfig(({ mode }) => ({
// 他のオプションは省略します
build: {
outDir: 'docs',
},
}));
3. デプロイスクリプトの作成
bun run deployでデプロイできるようにスクリプトを作成します
deploy.sh
# 前回のビルドを削除
rm -rf docs
# ビルド実行
bun run build
# カスタムドメインの設定
touch docs/CNAME
echo "{カスタムドメイン}" > docs/CNAME
# 個別に必要なファイルをコピー
cp docs/index.html docs/404.html
# コミット & プッシュしてGitHubActionsをトリガー
git add .
git commit -m "deploy"
git pull
git push
deploy.sh# カスタムドメインの設定 touch dist/CNAME echo "{カスタムドメイン}" > dist/CNAME
ここでCNAMEを作成することで、GitHub側でいう下記のCustom domainの設定が完了します。
作成を忘れるとカスタムドメインで公開されなくなってしまいます。
このように手動でCNAMEを作成しないと毎回Custom domainがリセットされていたので、リセットされない方法があれば教えていただきたいです🙏
また今回React Routerを使用していますが、普通にデプロイするとルーティングができずに下記のようなGitHubPagesの404ページが表示されてしまう事態が発生しました。
deploy.sh# 個別に必要なファイルをコピー cp dist/index.html dist/404.html
上記のようにindex.htmlを404.htmlとしてコピーしてやると解決し、単純に存在しないページにアクセスした際にもReact RouterのerrorElementが表示されるようにできました。
参照: Github Pages で BrowserRouter が正常に処理されない
4. package.jsonに追加してデプロイ
package.jsonのscriptsに以下のコマンドを追加します
package.json
"scripts": {
"deploy": "sh deploy.sh"
}
bun run deployを実行するとカスタムドメインへの公開が完了します。