[React] TMDB API를 활용한 넷플릭스 클론 코딩 - 8. GitHub Actions를 이용한 React 앱 CI/CD 배포 자동화

GitHub Actions를 이용한 React 앱 CI/CD 배포 자동화

이 포스트에서는 GitHub Actions를 사용하여 React 앱을 GitHub Pages에 자동 배포하는 CI/CD 파이프라인을 설정하는 방법을 다룹니다. GitHub Actions는 소프트웨어 개발 워크플로우를 자동화할 수 있는 도구로, 다양한 작업을 자동으로 실행할 수 있습니다. React 앱을 GitHub Pages에 배포하는 프로세스를 자동화하여, 매번 수동으로 배포할 필요 없이, main 브랜치에 변경 사항이 푸시될 때마다 자동으로 빌드되고 배포되도록 설정할 수 있습니다.

1. GitHub Actions 워크플로우 파일 설정

GitHub Actions 워크플로우는 .github/workflows 폴더 내에 YAML 파일로 정의됩니다. 아래는 Deploy React App to GitHub Pages라는 이름의 워크플로우 파일의 예시입니다.

name: Deploy React App to GitHub Pages

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

jobs:
  deploy:
    runs-on: ubuntu-latest  # 실행 환경, 최신 우분투 환경에서 실행

    steps:
      # 1. 리포지토리 체크아웃
      - name: Checkout repository
        uses: actions/checkout@v2

      # 2. Node.js 설정
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: "14"

      # 3. 프로젝트 의존성 설치
      - name: Install dependencies
        run: npm install

      # 4. 앱 빌드
      - name: Build the app
        run: npm run build

      # 5. Git 설정 (이메일과 사용자 이름 설정)
      - name: Set Git user
        run: |
          git config --global user.email "leesengjie@naver.com"
          git config --global user.name "SeungjaeLee00"
          git config --global url."https://${GH_TOKEN}@github.com/".insteadOf "https://github.com/"

      # 6. GitHub Pages에 배포
      - name: Deploy to GitHub Pages
        run: |
          git remote set-url origin https://$GH_TOKEN@github.com/SeungjaeLee00/Netflix_cloneCoding.git
          npm run deploy
        env:
          GH_TOKEN: ${{ secrets.GH_TOKEN }}

2. 각 단계 설명

name:

• 워크플로우 이름: GitHub Pages에 React 앱을 배포하는 작업에 대한 이름입니다.

on:

• 푸시 이벤트: main 브랜치에 푸시될 때마다 이 워크플로우가 실행됩니다.

jobs:

• deploy: 배포 작업을 정의하는 Job입니다.

steps:

• 리포지토리 체크아웃: GitHub 리포지토리를 체크아웃하여, 워크플로우에서 사용할 수 있게 합니다.

- name: Checkout repository
  uses: actions/checkout@v2

 

• Node.js 설정: 프로젝트에서 사용하고 있는 Node.js 버전을 설정합니다. 여기서는 14 버전을 사용합니다.

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

• 프로젝트 의존성 설치: npm install을 실행하여 프로젝트 의존성들을 설치합니다.

- name: Install dependencies
  run: npm install

• 앱 빌드: npm run build 명령어를 실행하여, 배포용으로 최적화된 React 앱을 빌드합니다.

- name: Build the app
  run: npm run build

• Git 설정: 배포 시 사용할 Git 이메일과 사용자 이름을 설정합니다. 또한, GH_TOKEN을 사용하여 GitHub 리포지토리에 푸시할 수 있도록 설정합니다.

- name: Set Git user
  run: |
  git config --global user.email "leesengjie@naver.com"
  git config --global user.name "SeungjaeLee00"
  git config --global url."https://${GH_TOKEN}@github.com/".insteadOf "https://github.com/"

• GitHub Pages에 배포: npm run deploy 명령어를 실행하여, GitHub Pages에 배포합니다. 이때 GH_TOKEN은 GitHub의 Personal Access Token(PAT)으로 설정되어야 하며, 이 토큰은 GitHub의 Secrets에 저장해야 합니다.

- name: Deploy to GitHub Pages
  run: |
    git remote set-url origin https://$GH_TOKEN@github.com/SeungjaeLee00/Netflix_cloneCoding.git
    npm run deploy
  env:
    GH_TOKEN: ${{ secrets.GH_TOKEN }}

3. GitHub Secrets 설정

• GitHub Token: GH_TOKEN은 GitHub 리포지토리에 푸시할 수 있는 권한을 가진 Personal Access Token입니다. 이 토큰을 GitHub의 Secrets에 추가해야 합니다.
  • GitHub 리포지토리의 Settings > Secrets에서 새로운 secret을 추가할 수 있습니다.
  • Secret Name: GH_TOKEN
  • Secret Value: GitHub에서 생성한 Personal Access Token

4. npm run deploy 명령어 설정

배포를 위해 npm run deploy 명령어를 실행해야 합니다. package.json 파일에 다음과 같은 스크립트가 있어야 합니다:

"scripts": {
  "deploy": "gh-pages -d build"
}

• gh-pages 패키지는 React 앱을 GitHub Pages에 쉽게 배포할 수 있도록 도와줍니다. 이 패키지를 설치하려면, npm install --save gh-pages 명령어를 실행해야 합니다.

5. 배포 자동화

이제 main 브랜치에 코드가 푸시될 때마다 GitHub Actions가 자동으로 실행되며, 빌드된 React 앱을 GitHub Pages에 배포합니다. 이렇게 설정하면, 매번 수동으로 배포할 필요 없이 자동으로 배포가 이루어집니다.

---

🚀 결과 

넷플릭스 클론 웹사이트 주소: https://seungjaelee00.github.io/Netflix_cloneCoding/

---

💡 정리

GitHub Actions를 이용한 CI/CD 설정은 개발자에게 매우 유용하며, 배포 과정에서 발생할 수 있는 실수를 줄이고, 더욱 효율적인 개발 환경을 제공합니다. 이번 포스트에서는 GitHub Pages에 React 앱을 자동으로 배포하는 방법을 설명했으며, 이 설정을 통해 간편하게 배포 작업을 자동화할 수 있습니다.