GitHub Actions with Vercel (React + Firebase)

목적

개인프로젝트를 vercel로 배포 후 평소에 CI/CD를 경험 해보고싶어 GitHub Actions를 사용하려고 합니다.

Github Action은 github에서 공식적으로 제공하는 CI/CD 툴, 다시 말해 개발의 work flow를 자동화할 수 있게 도와주는 툴입니다.

CI : 테스트, 빌드, Dockerizing, 저장소에 전달하는 것까지 프로덕션 환경으로 서비스를 배포할 수 있도록 준비하는 프로세스
CD : 저장소로 전달된 프로덕션 서비스를 실제 사용자들에게 배포하는 프로세스

Github Action 생성

Github Action은 event, job, step을 정의하기 위해 YAML 파일을 사용합니다.
workflow를 구성할 레포지토리에 .github/workflows 디렉토리 안에 test-github-actions.yml 형태로 파일을 생성합니다.

나는 npm을 사용했고 vercel로 배포해서 토큰키까지 넣는 코드를 생성하였습니다.

name: CI/CD

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build

  test:
    runs-on: ubuntu-latest

    needs: build

    steps:
      - uses: actions/checkout@v2

      - name: Install dependencies
        run: npm install

      - name: Test
        run: npm run test

  deploy:
    runs-on: ubuntu-latest

    needs: test

    steps:
      - uses: actions/checkout@v2

      - name: Deploy to Vercel
        uses: vercel/vercel-action@v2
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          project-id: ${{ secrets.VERCEL_PROJECT_ID }}

추가로 vercel 관련해서 두가지 방식을 찾아봤습니다.
vercel-action: 이 액션은 주로 로컬 환경이나 CI/CD 파이프라인에서 사용됩니다. 예를 들어, 개발자가 로컬 환경에서 코드를 빌드하고, 이를 Vercel에 직접 배포하고자 할 때 사용할 수 있습니다. 또는 CI/CD 파이프라인에서 빌드 단계 이후에 이를 사용하여 배포할 수도 있습니다.

deploy-to-vercel-action: 이 액션은 주로 GitHub Actions와 함께 사용되며, GitHub 리포지토리에서 발생하는 이벤트(예: pull-request가 열리거나 머지될 때)에 응답하여 배포를 수행합니다. 따라서 주로 GitHub에서의 작업을 자동화하고자 할 때 사용됩니다. 예를 들어, pull-request가 머지되면 해당 변경 사항을 Vercel에 자동으로 배포하는 데 사용될 수 있습니다.

기존 코드는 vercel-action으로 작성하였지만 추후를 위해 GitHub를 이용해서 배포할경우가 많을것 같아 변경하였습니다.

    steps:
      - uses: actions/checkout@v2

      - name: Deploy to Vercel Action
        uses: BetaHuhn/deploy-to-vercel-action@latest
        with:
          GITHUB_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

GitHub Secrets

우선 원하는 레포지토리의 Settings>Secrets>Actions로 들어가서 New repository secret을 클릭하여 해당 토큰값들을 기입하면됩니다.

• PERSONAL_ACCESS_TOKEN : Settings>Developer settings>Personal access tokens에서 생성이 가능합니다.

• VERCEL_TOKEN : Vercel의 우측 상단의 프로필의 Settings>Tokens로 가면됩니다.
  해당 페이지의 Tokens 섹션에서 Create 버튼을 눌러 토큰을 생성하고 SCOPE는 Full Account를 설정해주면 됩니다.

• VERCEL_ORG_ID : 해당 프로젝트에 Settings로 이동하여 General에 Team ID

• VERCEL_PROJECT_ID : 우측 상단의 프로필에서 General Vercel ID
  세팅 후 파일 커밋하면 .github/workflows 폴더가 생기고 main.yml 파일이 생성됩니다.

변경된 작업 내용을 브랜치 생성 , 커밋 후 master에 pull requests를 하면 테스트 성공 후 merge를 합니다.
이후 자동 배포로 업데이트 됩니다.