🚀 개요

Vite 기반으로 생성한 리액트 프로젝트를 GitHub Pages에 배포하는 방식에 대해 정리해보고자 한다.

---

🚀 GitHub Actions란?

GitHub에 내장되어있는 기능으로, 코드를 자동으로 빌드하고 테스트하고 배포하는 자동화 도구
CI/CD 파이프라인을 짜는 데 많이 쓴다고 한다.

기존에 리액트 프로젝트를 GitHub pages에 배포하려면 매번 배포할 때 마다 dist 폴더를 생성하여 배포를 했어야 했지만 GitHub Actions를 이용하면 코드 변경 후 Push만 하면 배포 완료!
즉, Push만 하여도 빌드 → 테스트 → 배포가 된다🫰

💡React 프로젝트 수동 배포 흐름 예시
npm run build → dist/ 폴더 생성 → GitHub Pages에 dist/폴더 배포

GitHub Actions 기능 예시

상황	자동 작업 예시
코드를 푸시했을 때	테스트 실행, 앱 빌드, 자동 배포
PR을 생성했을 때	코드 검사(Lint), 테스트 돌리기
매일 정해진 시간에	크롤링 작업 실행, 데이터 저장
특정 디렉토리가 수정됐을 때	해당 부분만 다시 빌드

GitHub Actions 구성 요소

용어	설명
Workflow	자동화 작업 전체를 정의한 .yml 파일
Job	워크플로우 안에서 병렬 또는 순차적으로 수행되는 작업 단위
Step	Job 안에서 한 줄씩 실행되는 명령어
Action	자주 사용하는 기능을 재사용 가능하게 만든 외부 패키지 (예: npm처럼 불러와서 사용 가능)

---

🚀 React 앱 자동 배포 : 프로젝트 기본 세팅

Vite 설정 파일 수정

vite.config.ts 파일 수정

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

export default defineConfig({
  plugins: [react()],
  base: '/GitHub 레파지토리 이름', // ✅ 변경 위치
})

gh-pages 설치

npm install gh-pages --save-dev

deploy 스크립트 추가

package.json 파일 수정

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview",
  "deploy": "gh-pages -d dist" // ✅ 변경 위치
}

---

🚀 React 앱 자동 배포 : Gihub Actions 워크플로우 생성

.github/workflows 디렉터리 생성 후 deploy.yml 파일 생성 후 아래의 내용 추가

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

on:
  # 기본 브랜치에 대한 푸시 이벤트 발생 시 실행
  push:
    branches: [ 'main' ] # ✅ 본인이 푸시하는 origin 브랜치로 설정하면 됨

  # 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@v4
        with:
          node-version: 20
          cache: 'npm'
      - name: Install dependencies
        run: npm ci
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # dist 디렉터리 업로드
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

---

🚀 React 앱 자동 배포 : GitHub Pages 연결

1. GitHub 저장소 → setting → pages
2. Build and deployment 내 source를 GitHub Actions 로 설정하기

---

🚀 확인하면 끝!

---

🔗 참고 자료

• vite 공식문서 - 정적 웹 페이지로 배포하기