[Github Action] Organization 레포지토리 vercel 미리보기 preview 배포

시작하기 앞서...

프로젝트를 진행할 때, 작업한 내용을 pull request 에 올리면서 다른 사람의 코드를 보게 되는데

이 코드가 제대로 동작하는지 내 눈으로 보고 싶으면 번거롭게 그 브랜치로 이동해서 직접 확인해야 된다.

 

이러한 과정이 번거롭기 때문에 pull request 를 올렸을 때, 자동으로 vercel 로 미리 보기 preview 를 배포해야 한다.

 

그러나 Organization 레포지토리가 아닌 경우 vercel 봇을 사용하여 간단하게 미리보기를 배포할 수 있지만

Organization 레포지토리는 권한때문에 github action 을 사용해서 구현해야 된다.

 

깃허브 액션으로 pr 미리 보기 배포

1. vercel 토큰 발급

vercel 토큰을 발급받는 곳에서 토큰을 발급받는다. 발급 받은 토큰을 다시 볼 수 없으니깐 다른 곳에 메모해야 한다.

토큰 발급

 

2. vercel 설치 및 로그인

프로젝트를 vercel 로 배포하기 위해 터미널 창에서 vercel 을 설치하고 로그인한다.

[설치]

npm install -g vercel@latest

[로그인]

vercel login

설치 및 로그인

 

3. vercel 로 프로젝트 배포

preview 를 배포할 프로젝트의 터미널에 간 후 vercel 로 프로젝트를 연결한다.

vercel

vercel 명령어를 입력하면 친절하게 질문을 하니깐 본인 상황에 맞게 알맞게 선택하고 입력하면 된다.

연결

끝나고 나면 .vercel 이라는 폴더가 생기고 그 안에 project.json 파일에 가면 projectId 와 orgId 가 생긴다.

project.json

 

4. secert 변수 등록

레포지토리에 있는 프로젝트 settings 에서 Secrets and Varibles 에 있는 Actions 에 들어가서 secret 변수를 등록한다.

 

단계 1번에서 발급받은 vercel 토큰은 VERCEL_TOKEN, 단계 3번에서 발급받은 projectId 는 VERCEL_PROJECT_ID, orgId 는 VERCEL_ORG_ID 에 등록한다.

secret 변수

 

5. Github Action 코드 작성

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

경로

아래 코드를 작성한다.

name: Preview

on:
  pull_request:
    branches: ['main']

jobs:
  vercel-preview:
    runs-on: ubuntu-latest

    env:
      VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
      VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

    steps:
      - uses: actions/checkout@v4

      - name: Install Vercel CLI
        run: npm install --global vercel@latest

      - name: Get Vercel Environment Variables
        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}

      - name: Build Project Artifacts
        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}

      - name: Deploy Project Artifacts to Vercel
        id: deploy
        run: |
          vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }} > vercel-output.txt
          echo "preview_url=$(cat vercel-output.txt)" >> $GITHUB_OUTPUT

      - name: Comment PR with Preview URL
        uses: thollander/actions-comment-pull-request@v2
        with:
          message: |
            🎉 구현한 기능 Preview: ${{ steps.deploy.outputs.preview_url }}

 

+) Github Action 실패

사실 위에 코드를 작성했는데 처음에는 실패를 하였다. 😅

실패

원인을 알아보니 읽고 쓰는 권한 때문이었다.

그래서 Settings -> Actions -> General 에서 Read and wrtie permissions 를 활성화하여 읽고 쓸 수 있는 권한을 줘야 한다.

권한

그런데... 나는 활성화 버튼을 누를 수 없다.. (왜인지는 모름...)

그래서 github action 코드 안에 권한을 부여해 주는 코드를 작성하여 runs-on 밑에 두었다.

일단 최대한 부여할 수 있는 권한을 주었다.

permissions:
  contents: read
  pages: write
  deployments: write
  id-token: write
  issues: write
  pull-requests: write

결과는 다행히도 성공하였다. 👍

성공

 

6. pull request 미리 보기

Pull Reqeust 를 올리면 프리뷰를 볼 수 있고, Push 할 때마다 새로운 배포 링크가 생성되어 보여준다.

프리뷰

 

+) Team Access Required

미리보기 주소에 다른 사람이 들어오면 아래처럼 Team Access Required 라는 문구가 뜨게 되는데

team access required

 

이때 vercel Settings 에서 Vercel Authentication 를 Disabled 하면 다른 사람들 모두가 볼 수 있게 된다.

vercel authentication

 

마치며...

이제 번거롭게 pull request 리뷰를 남길 때, 직접 내 로컬에서 해당 브랜치로 이동해서 실행할 필요 없이 간편하게 결과를 확인할 수 있다!

이로 인해 팀프로젝트에서 시간도 절약되고 생산성이 증가하였다.

 

main 에 push 했을 때에도 깃허브 액션을 사용하여 배포하였는데 이번에도 깃허브 액션을 경험해 보아서 너무 좋았다.

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