20 프로젝트 완성 및 배포: React 프로젝트를 Vercel, Netlify에 배포하고 GitHub Actions를 활용한 CI/CD 자동화

React 프로젝트가 완성되면, 이제 실제로 배포하여 사용자들이 접근할 수 있도록 해야 합니다. 이를 위해 Vercel과 Netlify 같은 플랫폼을 활용해 손쉽게 배포할 수 있습니다. 또한, GitHub Actions를 사용하여 CI/CD(지속적 통합 및 지속적 배포) 자동화도 가능합니다. 이번 글에서는 React 프로젝트 배포 방법과 CI/CD 자동화 과정에 대해 상세히 다뤄보겠습니다.

1. React 프로젝트 배포하기

React로 만든 프로젝트를 배포하기 위해서는 빌드된 파일을 배포 플랫폼에 올려야 합니다. Vercel과 Netlify는 React 애플리케이션을 배포하는 데 매우 인기 있는 플랫폼으로, 설정이 간편하고 무료 요금제를 제공하여 초보자에게 적합합니다.

a. Vercel에 배포하기

Vercel은 Next.js로 유명하지만, React 프로젝트도 쉽게 배포할 수 있는 플랫폼입니다. Vercel을 사용하면 GitHub와 연결하여 자동으로 배포가 가능하며, 빠르게 배포 결과를 확인할 수 있습니다.

1. Vercel 계정 생성 및 로그인
   먼저, Vercel 사이트에 접속하여 계정을 생성하고 로그인합니다.

2. GitHub 리포지토리와 Vercel 연결
   Vercel 대시보드에서 'New Project'를 클릭하고, GitHub 리포지토리와 연결합니다.

3. 프로젝트 설정
   React 프로젝트가 GitHub에 푸시되어 있다면, Vercel은 자동으로 프로젝트를 감지하고 설정을 시작합니다. 별도의 빌드 설정 없이도 React 애플리케이션을 바로 배포할 수 있습니다.

4. 배포 완료
   Vercel은 프로젝트를 빌드한 후 배포 URL을 제공합니다. 이제 이 URL을 통해 React 애플리케이션에 접근할 수 있습니다.

b. Netlify에 배포하기

Netlify도 React 프로젝트 배포에 널리 사용되는 서비스입니다. Vercel과 마찬가지로 GitHub와의 통합이 쉽고, 간단한 설정으로 배포가 가능합니다.

1. Netlify 계정 생성 및 로그인
   Netlify 사이트에 접속하여 계정을 생성하고 로그인합니다.

2. GitHub 리포지토리와 Netlify 연결
   Netlify 대시보드에서 'New site from Git'을 클릭하고, GitHub 리포지토리와 연결합니다.

3. 빌드 설정
   React 프로젝트는 기본적으로 npm run build 명령어로 빌드됩니다. Netlify에서는 빌드 명령어를 자동으로 감지하므로, 추가 설정 없이 바로 배포가 가능합니다.

4. 배포 완료
   배포가 완료되면, Netlify에서 제공하는 URL을 통해 프로젝트를 실시간으로 확인할 수 있습니다.

2. GitHub Actions를 활용한 CI/CD 자동화

**CI/CD(지속적 통합 및 지속적 배포)**는 소프트웨어 개발의 핵심적인 부분으로, 코드 변경이 있을 때마다 자동으로 빌드하고 배포하는 프로세스를 설정하는 것입니다. GitHub Actions는 GitHub에서 제공하는 자동화 도구로, 이를 활용하여 React 프로젝트의 배포 자동화를 설정할 수 있습니다.

a. GitHub Actions 워크플로우 설정

1. GitHub 리포지토리 열기
   React 프로젝트가 GitHub에 있는 상태에서 리포지토리를 열고, .github/workflows 폴더를 생성합니다.

2. 워크플로우 파일 생성
   .github/workflows 폴더 안에 deploy.yml 파일을 생성하여 CI/CD 자동화를 설정합니다.

3. 워크플로우 파일 작성
   deploy.yml 파일에 아래와 같은 내용을 작성합니다.

name: Deploy React App

on:
  push:
    branches:
      - main  # main 브랜치에 푸시될 때마다 실행

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v2

    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '16'

    - name: Install dependencies
      run: npm install

    - name: Build the app
      run: npm run build

    - name: Deploy to Netlify
      uses: nwtgck/actions-netlify@v1
      with:
        publish-dir: './build'
        production-deploy: 'true'
        NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
        NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

b. GitHub Secrets 설정

GitHub Actions에서 Netlify 배포를 위해서는 Netlify 인증 토큰과 Netlify 사이트 ID를 GitHub Secrets에 추가해야 합니다.

1. GitHub 리포지토리의 Settings 탭을 클릭합니다.
2. Secrets 섹션으로 이동하여 New repository secret을 클릭합니다.
3. NETLIFY_AUTH_TOKEN과 NETLIFY_SITE_ID를 각각 입력하여 추가합니다. (이 정보는 Netlify 대시보드에서 확인할 수 있습니다.)

c. GitHub Actions 자동화 실행

이제 main 브랜치에 코드가 푸시될 때마다 GitHub Actions가 자동으로 React 애플리케이션을 빌드하고 Netlify에 배포합니다. 배포가 완료되면, Netlify에서 제공하는 URL을 통해 프로젝트를 확인할 수 있습니다.

3. 결론

React 프로젝트를 Vercel과 Netlify에 배포하는 방법과 GitHub Actions를 활용한 CI/CD 자동화에 대해 살펴보았습니다. Vercel과 Netlify는 React 애플리케이션을 손쉽게 배포할 수 있는 플랫폼으로, 특히 자동 배포 기능을 통해 개발과 배포의 효율성을 높일 수 있습니다. 또한, GitHub Actions를 통해 코드 푸시만으로 자동으로 빌드하고 배포하는 CI/CD 파이프라인을 구현할 수 있습니다.

이 글을 통해 React 프로젝트의 배포와 자동화 과정을 잘 이해하고, 프로젝트의 배포를 더욱 효율적으로 관리할 수 있을 것입니다.