깃허브 Organization 레포지토리 Vercel 자동 배포하기 with Github Action

배경

GitHub Organization 레포지토리를 Vercel로 배포할 때, 아래 조건을 충족해야 합니다:

1. 레포지토리가 Public일 것

2. Vercel Pro 계정을 사용할 것 (유료)

 

저는 무료로 사용하고 싶었기 때문에, Organization 레포지토리를 제 개인 계정 레포지토리로 fork하여 배포하는 방법을 선택했습니다.

하지만 Organization에서 작업한 후 main 브랜치로 병합할 때마다, fork된 레포지토리와 동기화해야 한다는 단점이 있습니다. 즉, 수동으로 sync 작업을 수행해야 하므로 정말 번거롭습니다..

 

이 문제를 해결하기 위해 GitHub Actions를 활용하여 CI/CD를 구축하여 -> 레포지토리 동기화와 Vercel 배포를 자동화하고 수동 작업의 번거로움을 없앴습니다.

1. Organization 레포지토리 fork 및 Vercel 배포

Organization 레포지토리를 개인 계정으로 fork하고 fork한 레포지토리를 Vercel에 연결합니다.

2. secrets token 발급

Github Token 발급 페이지에서 secret token 발급하면 됩니다.

권한에서 repo 항목만 체크해주면 됩니다.

그러면ghp_로 시작하는 토큰이 발급되는데 다시 볼 수 없으니까 복사해 놓는 것이 좋습니다.

3. Organization 레포지토리에서 secret 변수 등록

발급받은 토큰과 이메일을 Organization 레포지토리의 Secret 변수로 등록합니다.

1) 프로젝트 settings -> security -> actions 선택
2) Repository secrets의 New repository secret을 선택하고 아래 값들을 등록

• 아까 위에서 발급받은 토큰(ghp_로 시작하는 토큰)을 AUTO_ACTIONS 에 저장
  
• 본인 깃허브 계정 이메일을 EMAIL로 저장
  

4. build.sh 파일 생성

Organization 레포지토리에 있는 프로젝트 루트에 build.sh 파일을 생성하고 아래 내용을 입력합니다.

#!/bin/sh
cd ../
mkdir output
cp -R ./[team-repo-name]/* ./output
cp -R ./output ./[team-repo-name]/

[team-repo-name]에는 위 이미지 노란색 부분을 입력하면 됩니다.

5. GitHub Action Workflow 작성

GitHub Action을 설정해 자동으로 fork 레포지토리에 업데이트하도록 만듭니다.

Organization 레포지토리에 있는 프로젝트의 Actions에서 새로운 workflow를 생성하고 yml 파일을 생성합니다. 해당 방법은 아래와 같습니다.

1) Actions -> new workflow -> set up a workflow yourself 클릭

2) yml 파일 작성

name: git push into another repo to deploy to vercel

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    container: pandoc/latex
    steps:
      - uses: actions/checkout@v2
      - name: Install mustache (to update the date)
        run: apk add ruby && gem install mustache
      - name: creates output
        run: sh ./build.sh
      - name: Pushes to another repository
        id: push_directory
        uses: cpina/github-action-push-to-another-repository@main
        env:
          API_TOKEN_GITHUB: ${{ secrets.AUTO_ACTIONS }}
        with:
          source-directory: 'output'
          destination-github-username: [내 깃허브 계정 이름]
          destination-repository-name: [배포한 내 레포지토리 이름]
          user-email: ${{ secrets.EMAIL }}
          commit-message: ${{ github.event.commits[0].message }}
          target-branch: main
      - name: Test get variable exported by push-to-another-repository
        run: echo $DESTINATION_CLONED_DIRECTORY

• [내 깃허브 계정 이름]: 개인 계정 이름.
• [배포할 레포지토리 이름]: Vercel과 연동된 레포지토리 이름

6. 결과 확인

GitHub Action이 정상적으로 실행되었는지 Actions 탭에서 확인할 수 있습니다. 성공 시 자동으로 fork 레포지토리가 동기화되고 Vercel에 배포됩니다.

참고
참고 1
참고 2