React + github actions 배포하기

Install React with vite

https://ko.vitejs.dev/guide/

npm create vite@latest
npm run dev

Repo Sync

*멀티 계정
git config --local user.name "username2"
git config --local user.email "username2@naver.com"

git push origin main

setip github actions

문서 >> https://ko.vitejs.dev/guide/static-deploy.html#github-pages

//1.
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: "/react-test-2/", // 추가
});

//2. 
# .github/workflows/deploy.yml
# GitHub Pages에 정적 콘텐츠를 배포하기 위한 간단한 워크플로우
name: Deploy static content to Pages

on:
  # 기본 브랜치에 대한 푸시 이벤트 발생 시 실행
  push:
    branches: ["master"]
  # Actions 탭에서 수동으로 워크플로우를 실행할 수 있도록 구성
  workflow_dispatch:

# GITHUB_TOKEN의 권한을 설정하여 GitHub Pages에 배포할 수 있도록 함
permissions:
  contents: read
  pages: write
  id-token: write

# 동시에 하나의 배포만 허용하도록 구성
concurrency:
  group: "pages"
  cancel-in-progress: true

jobs:
  # 단순히 배포만 수행하기에 하나의 잡으로만 구성
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: "npm"
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          # dist 디렉터리 업로드
          path: "./dist"
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2
---
이 GitHub Actions workflow는 Node.js 프로젝트를 빌드하고 GitHub Pages로 배포하는 과정을 수행합니다. 각 단계는 다음과 같습니다:

1. **Checkout (체크아웃):**
   - `actions/checkout` 액션을 사용하여 현재 레포지토리의 코드를 체크아웃합니다.

2. **Node 설정:**
   - `actions/setup-node` 액션을 사용하여 Node.js 환경을 설정합니다.
   - Node.js 버전을 18로 설정하고, npm 패키지를 캐시합니다.

3. **의존성 설치:**
   - `npm install` 명령을 실행하여 프로젝트의 npm 종속성을 설치합니다.

4. **빌드:**
   - `npm run build` 명령을 실행하여 프로젝트를 빌드합니다.

5. **GitHub Pages 설정:**
   - `actions/configure-pages` 액션을 사용하여 GitHub Pages를 설정합니다.

6. **Artifact 업로드:**
   - `actions/upload-pages-artifact` 액션을 사용하여 빌드된 결과물을 GitHub Pages에 업로드할 수 있도록 artifact로 저장합니다.
   - `path: "./dist"`는 빌드된 결과물이 저장된 디렉토리를 지정합니다.

7. **GitHub Pages로 배포:**
   - `actions/deploy-pages` 액션을 사용하여 GitHub Pages로 빌드된 결과물을 배포합니다.
   - `id: deployment`는 이 배포 작업을 식별하기 위한 고유 식별자입니다.

이 workflow는 Node.js 프로젝트를 빌드하고, 그 결과물을 GitHub Pages로 자동으로 배포하는 과정을 자동화합니다.