GitHub 페이지에 Vite React 앱 배포 단계:

Git을 초기화하고 모든 파일을 커밋한 후 새 저장소에 푸시합니다.

1단계:

git init
git add -A

2단계:

git commit -m “첫 번째 커밋”
git 브랜치 -M 메인
git Remote add Origin https://github.com/[username]/[repo_name].git # 사용자 이름과 repo URL로 바꿉니다
git push -u 원본 메인

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 디렉터리 내에 배포.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" 브랜치를 선택합니다.
• 저장을 클릭하세요.

가장 중요한 것.

프로젝트 이름, 링크 이름(기본값) 또는 Repo 이름은 대부분 동일한 이름으로 생성하세요.

위 내용은 GitHub 페이지에 Vite React 앱 배포 단계:의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!