React + Vite アプリを GitHub Pages にデプロイする

はじめに

この記事はプログラミング初学者が他の記事を参考にしたり、実際に実装してみたりして、アウトプットの一環としてまとめたものです。内容に不備などあればご指摘いただますと幸いです。

今回、React + Vite アプリを GitHub Pages にデプロイしました。
その方法について備忘録も兼ねて記事を作成していきます。

前提として、npm create vite@latestで React 環境を構築済みで、そのアプリをGitHubのリポジトリにpushできることを想定しています。

手順

1. gh-pages のインストール

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

npm install gh-pages --save-dev

2. package.json の設定

下記の行を追加します。

package.json

{
  "name": "react_todo_list",
+ "homepage": "https://GitHubのユーザー名.github.io/リポジトリ名/",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview",
+   "predeploy": "npm run build",
+   "deploy": "gh-pages -d dist"
  },
  "dependencies": {
    省略
  },

3. vite.config.js の設定

下記の行を追加します。

vite.config.js

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

// https://vite.dev/config/
export default defineConfig({
+ base: '/リポジトリ名/',
  plugins: [react()],
});

4. デプロイ

下記のコマンドでデプロイします。

npm run deploy

5. GitHub Pagesの設定

下記の手順で設定します。

• GitHubのリポジトリにアクセスして Setting タブを選択します。
• 左サイドバーにあるCode and automationの Pages を選択します。
• 数分待ってから画像のように表示された Visit site をクリックすると作成したアプリが表示されます。

おわりに

最後まで読んでいただきありがとうございました。
少しでも皆さんの参考になれば幸いです。

参考にしたサイト