LoginSignup
6
1
記事投稿キャンペーン 「2024年!初アウトプットをしよう」

Vite+ReactのプロジェクトをGitHub Pagesにデプロイする

Last updated at Posted at 2024-01-01

以下のページに従ってVite+Reactプロジェクトを作成したあと、そのページをGitHub Pagesにデプロイする方法を書いておきます。
https://ja.vitejs.dev/guide/

前提

ローカル上ではViteプロジェクトを動かせている、すなわちnpm run devで起動したらlocalhost上でアクセスできる状態にあるとします。

gh-pages のインストール

まずgh-pagesというライブラリをインストールしておきます。このライブラリはGitHub Pagesのデプロイ手順を自動化してくれるものです。

npm install gh-pages --save-dev

スクリプトの設定

package.jsonにスクリプトを設定します。distはビルドされたファイルの出力先です。

package.json
{
  ...
  "scripts": {
    ...
    "deploy": "gh-pages -d dist"
    ...
  },
  ...
}

リポジトリの設定

vite.config.js(vite.config.ts)baseにGitHubのリポジトリ名を設定します。
もし既にGitHub上にリポジトリが存在しているならその名前を設定します。そうでないなら好きな名前をつけられますが、後ほど作成するリポジトリにも同じ名前をつけます。今回はreact-testとします。スラッシュを忘れないようにしてください。

vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/react-test/'
})

ビルド&デプロイ

プロジェクトディレクトリでビルドとデプロイを実行します。

npm run build
npm run deploy

GitHubリポジトリの作成+プッシュ

ビルドされたファイルをGitHubのリポジトリにプッシュします。まだ作成していない場合はここで作成してください。その際名前はvite.config.tsbaseと揃えます。今回はreact-testとします。
特別な手順は必要なく、一般的なGitの操作になるのでここでは説明を割愛します。

GitHub Pagesの設定

作成したリポジトリのSettings > Pagesを開きます。
Branchの項目でgh-pages/(root)を選択し、saveを押します。

image.png

Visit Siteはデプロイ完了後に表示されます

公開

セーブするとActionsタブでデプロイの様子が見られます。緑色のOKが出たらデプロイ完了です。
完了後にSettingsを開くと一番上にURLが表示されるのでVisit Siteを押します。
ローカルで表示されたページと同じものが表示されたらデプロイ完了です!

デプロイ完了と出ても数分間は反映されないことがあります。


以上で終了です。
ちなみにViteはヴィートと読むらしいですが、どうしても脳内でバイトと読んでしまいます。

6
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
1