前提
- Node.js がインストール済みであること
- git がインストール済みであること
- GitHub でリモートリポジトリを作成済みであること
リモートリポジトリが未設定の場合
以下の記事を参考にセットアップする
Git の環境構築をしよう！(Progate)
開発環境
$ npm -v
10.2.4
$ git -v
git version 2.45.2.windows.1
ローカル環境の作業
公開するプロジェクトの概要
- React + TypeScript で作成した Web アプリ
- ビルドツールは Vite を使用
リモートリポジトリ（GitHub）への追加
Windows 環境の場合、以下のコマンド操作は Git Bash や WSL2 で実行すること。
（コマンドプロンプトだとデプロイ時にエラーが発生するため）
1, ローカルプロジェクトに移動しターミナルを開く
2, ローカルプロジェクトを Git リポジトリに変換する
3, プッシュ先のリモートリポジトリを指定する
# Git リポジトリに変換（初期化）する
git init
# プッシュ先のリモートリポジトリを指定
git remote add origin <URL>
# 確認
git remote -v
リモートリポジトリの URL は、GitHub のリポジトリのページ右上の「<> Code」ボタンを押し、「SSH」タブを開くと確認できる。
4, プロジェクトの全ファイルをステージングする
5, ステージングしたファイルをコミットする
# 全ファイルをステージングする
git add .
# ステージング確認
git status
# ステージングしたファイルをコミットする
git commit -m "コミットメッセージ"
コミットメッセージは、GitHub リポジトリのページで、ファイル名の横に表示される。
6, リモートリポジトリの変更を取り込みプッシュする
# リモートリポジトリの変更を取得
git fetch origin
# 取得した変更をリベース
git rebase origin/main
# 変更をリモートリポジトリにプッシュ
git push origin main
GitHub Pages 公開設定
1, デプロイに使用するパッケージ（gh-pages）をインストールする
npm install --save gh-pages
2, package.json ファイルにデプロイ用のスクリプトを追加する
// アプリケーションのベース URL を指定
"homepage": "https://your-username.github.io/your-repository"
...
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d dist", // distフォルダを gh-pages ブランチにデプロイする
"build": "tsc -b && vite build"
}
注意点
今回は Vite でプロジェクトを作成したため、デフォルトのビルド出力フォルダが「dist」となる。「create-react-app」でプロジェクトを作成した場合は、出力フォルダが「build」になるため、deploy スクリプトの d オプションの指定を置き換える。
3, vite.config.js ファイルでベース URL を設定する
export default defineConfig({
plugins: [react()],
base: '/your-repository-name/', // GitHub Pagesのリポジトリ名に変更
});
4, 変更をリモートリポジトリにプッシュする
git add .
git commit -m "Add homepage and deploy scripts"
git push origin main
5, アプリケーションをビルドする
npm run build
6, デプロイする
npm run deploy
SSH のパスワードを要求されるので、SSH 設定時のパスワードを入力する。
なお、デプロイの反映には 1~2 分程度かかる。
GitHub での操作
1, GitHub リポジトリのページで、「Settings」タブをクリック
2, サイドバーの「Pages」セクションをクリック
3, ブランチのドロップダウンから「gh-pages」ブランチを選択
4, 「Pages」セクションの最上部に表示されている「Visit site」をクリックし、デプロイしたアプリにアクセスする
ソースコードの修正を反映する
ローカル環境でソースコードを修正し、以下のコマンドを実行する。
# 変更したファイルを追加
git add App.tsx
# コミット
git commit -m "text fix"
# プッシュ
git push origin main
# ビルド
npm run build
# デプロイ
npm run deploy
トラブルシューティング
デプロイすると SSH キー認証エラーになる
エラー内容
ProcessError: git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.
確認点
- リモートリポジトリが登録されているか
- SSH キーが作成されているか
- GitHub に SSH 接続ができるか
# リモートリポジトリが登録されているか
ls ~/.ssh # 「id_ed0000」のようなファイルがあればOK
# SSH キーが作成されているか
ssh -T git@github.com # 「Hi <github name>!」と表示されたらOK
# GitHub に SSH 接続ができるか
git remote -v # 「origin git@github.com:<github name>/<repository name>」と表示されたらOK
参考
今回作成したプロジェクト
https://github.com/m-bitterC2/todo-with-react-and-ts/tree/main