Viteプロジェクトを GitHub Pages にデプロイする方法

はじめに

ViteでビルドしたReactプロジェクトをGitHub Pagesにデプロイする方法を説明している記事があまりなかったため作成しました。

デプロイの手順

1. 必要なパッケージのインストール

まず、gh-pagesパッケージをインストールします。これは、GitHub Pagesへのデプロイを簡単にするツールです。

npm install gh-pages --save-dev

2. package.jsonの設定

package.jsonファイルに以下の内容を追加します：

{
  "homepage": "https://<ユーザー名>.github.io/<リポジトリ名>/",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  }
}

• <ユーザー名>を自身のGitHubユーザー名に置き換えてください。
• <リポジトリ名>を自身のGitHubリポジトリ名に置き換えてください。

3. vite.config.jsの設定

vite.config.jsファイルを開き、baseオプションを追加します：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

export default defineConfig({
  plugins: [react()],
  base: '/<リポジトリ名>/',
})

<リポジトリ名>を作成したGitHubリポジトリ名に置き換えてください。

4. ビルドとデプロイ

以下のコマンドを実行してプロジェクトをビルドし、GitHub Pagesにデプロイします：

npm run deploy

このコマンドは、まずpredeployスクリプトを実行してプロジェクトをビルドし、次にdeployスクリプトを実行してGitHub Pagesにデプロイします。

5. GitHub Pagesの設定

1. GitHubのリポジトリページに移動します。
2. 「Settings」タブをクリックします。
3. 左側のメニューから「Pages」を選択します。
4. 「Source」セクションで、ブランチを「gh-pages」に設定します。
5. 「Save」をクリックします。

6. デプロイの確認

https://<ユーザー名>.github.io/<リポジトリ名>/で利用可能になります。

まとめ

ViteでビルドしたReactプロジェクトをGitHub Pagesにデプロイする方法を簡単にまとめてみました。
間違っている部分、これでできなかったなどあればコメントにてお願いいたします。