[Github Action] 깃허브 Organization 레포지토리 vercel 자동 배포

시작하기 앞서...

현재 프로젝트를 진행하고 있는데

깃허브에서 Organization 레포지토리에서 작업을 하고 vercel 로 배포를 하려면 프로 계정을 사용해야 된다.

Pro 계정 무료 체험 2주를 할 수 있지만 그 이후로는 요금제를 사용해야 한다.

요금제 사용해야 함

 

대신 Organization 레포지토리에 있는 걸 내 계정 레포지토리로 fork 해서 배포를 할 수 있다.

하지만 이 과정은 매번 브랜치의 sync 를 맞춰야 한다.

 

그래서 이러한 번거로운 작업을 해결하기 위해 깃허브 액션(github action) 을 사용하여 자동 배포 할 수 있다.

 

깃허브 액션으로 vercel 자동 배포

1. 내 계정에 fork 한다.

Organization 레포지토리에 있는 프로젝트를 내 계정으로 Public 으로 fork 한다.

fork

 

2. vercel 에 해당 레포지토리를 연동한다.

vercel 에서 위에서 만든 레포를 연동한다.

vercel 연동

 

3. secret 토큰을 발급받는다.

토큰 발급

스코프(scopes) 는 아래 사진처럼 선택하여 토큰을 발급받는다.

scopes

그러면 ghp_ 로 시작하는 토큰이 발급되는데 다시 볼 수 없으니깐 다른 곳에 메모해야 한다.

나는 카톡에 메모

 

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] 에는 아래에 Organization 레포지토리에 있는 프로젝트 이름으로 노란색에 있는 부분을 입력한다.

team-repo-name

build.sh

 

5. secret 변수를 등록한다.

Organization 레포지토리에 있는 프로젝트 settings 에서

Secrets and Varibles 에 있는 Actions 에 들어가서 secret 변수를 등록한다.

secret 변수

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

secret 변수 등록

 

6. GitHub Action 코드를 작성한다.

프로젝트의 루트 기준으로 .github/workflows/deploy.yml 이라는 경로에서 코드를 작성한다.

경로

아래 코드를 작성하면 된다.

name: Deploy

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 에 연동한 내 레포지토리 이름이며 아래 사진에서 노란색이다.

 

내 계정명, 레포지토리 이름

7. GitHub Action 결과를 확인한다.

위에서 작성한 코드를 main 에 올리고 Actions 탭에 들어가 확인을 하면 정상적으로 배포되는 것을 확인할 수 있다.

결과

 

마치며...

옛날에 프로젝트를 할 때, 매번 번거롭게 sync 를 맞췄던 기억이 나는데 이번 프로젝트에서 깃허브 액션을 도입하여 간편하게 프로젝트를 배포할 수 있게 되어 뿌듯했고 스스로 성장한 게 느껴져서 좋았다.

 

그리고 그냥 깃허브액션 코드를 복붙 했었는데 조금 더 공부해서 내가 원하는 내용으로 코드를 작성할 수 있는 날이 왔으면 좋겠다

참고

GitHub Organization 프로젝트를 vercel 무료로 연동하기 (+git actions)

GitHub Organization 프로젝트를 vercel 무료로 연동하기 (+git actions)