페이지 4: 배포 전략 (정적 호스팅)

4. 배포 전략 (정적 호스팅)

Vite React 애플리케이션은 빌드 시 순수 정적 파일(HTML, CSS, JS)을 생성하므로, GitHub Pages, Netlify, Vercel 등 다양한 정적 호스팅 서비스에 쉽게 배포할 수 있습니다.

4.1. GitHub Pages에 배포

Vite 앱을 GitHub Pages에 배포하려면 base 옵션을 vite.config.js에 추가해야 합니다. 프로젝트 이름이 my-react-app이라면 /my-react-app/을 사용합니다.

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

export default defineConfig({
  plugins: [react()],
  base: '/my-react-app/', // GitHub Pages 서브경로 설정
});

배포 단계:

• npm run build 실행.
• gh-pages 패키지를 설치하고 사용합니다.

npm install gh-pages --save-dev
// package.json의 scripts에 추가
// "deploy": "gh-pages -d dist"
// "predeploy": "npm run build"

• npm run deploy를 실행하여 dist 디렉토리를 gh-pages 브랜치로 푸시합니다.
• GitHub 저장소 설정에서 GitHub Pages 소스를 gh-pages 브랜치로 지정합니다.

4.2. Netlify 또는 Vercel에 배포

Netlify와 Vercel은 Git 저장소와 연동하여 자동으로 빌드 및 배포하는 기능을 제공하므로 훨씬 간단합니다.

• 1. 저장소 연결: Netlify/Vercel 대시보드에서 GitHub/GitLab/Bitbucket 저장소를 연결합니다.
• 2. 빌드 설정:
  • 빌드 명령어: npm run build
  • 배포 디렉토리: dist
• 3. 자동 배포: 코드를 푸시할 때마다 서비스가 자동으로 앱을 빌드하고 배포합니다.