Vite React アプリを GitHub ページにデプロイするステップ:

Git を初期化し、すべてのファイルをコミットして、新しいリポジトリにプッシュします。

最初のステップ:

git init
git add -A

第 2 ステップ:

git commit -m “最初のコミット”
git ブランチ -M メイン
git Remote add Origin https://github.com/[username]/[repo_name].git # ユーザー名とリポジトリ URL に置き換えます
git Push -u Origin main

3番目のステップ:

vite.config.ts でベース パスを設定します

/ vite.config.ts
import { defineConfig } from “vite”;
import react from “@vitejs/plugin-react”;

// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
base: “/vite-react-deploy/”, // YOUR REPO NAME HERE
});

4番目のステップ:

GitHub ワークフローを追加する

.github/workflows ディレクトリ内にdeploy.yml ファイルを作成します。このワークフローをコピーして貼り付けます:

name: Deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repo
        uses: actions/checkout@v3

      - name: Setup Node
        uses: actions/setup-node@v3

      - name: Install dependencies
        uses: bahmutov/npm-install@v1

      - name: Build project
        run: npm run build

      - name: Upload production-ready build files
        uses: actions/upload-artifact@v3
        with:
          name: production-files
          path: ./dist

  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'

    steps:
      - name: Download artifact
        uses: actions/download-artifact@v3
        with:
          name: production-files
          path: ./dist

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

リポジトリ ページで次のようにします。

• 1. 「設定」→「アクション」→「一般」に移動します
• 2. 「ワークフロー権限」まで下にスクロールします。
• 3. [読み取り] と [書き込み] を選択し、保存します:

アクションを再実行します。

アクション → 失敗した展開を選択 → 失敗したジョブを再実行します。完了するまで待ちます。

GitHub ページを構成します。

• [設定] → [ページ] に移動します
• ソースで、「ブランチからデプロイ」を選択し、「gh-pages」ブランチを選択します。
• [保存] をクリックします。

最も重要なこと。

プロジェクト名、リンク名(ベース値)、またはリポジトリ名はほとんど同じ名前で作成します。

以上がVite React アプリを GitHub ページにデプロイするステップ:の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。