[Next.js] Vercel로 GitHub Organization 무료 배포하기 with github actions

Bomin·2024년 1월 10일

🔎 팀 프로젝트 vercel hobby 플랜에 배포하기

vercel 에서 github organization의 팀 프로젝트를 배포하려고 했는데, 이 경우에는 유료인 team plan에서만 가능했다.(14일 무료체험은 가능…)

최종 개발이 완료될 때까지 임시 방편으로 배포된 환경이 필요해서 무료로 할 수 있는 방법이 없을까 찾아보니….

💡 팀 프로젝트를 개인 레포지토리에 포크해서 개인 플랜으로 배포하는 방법이 있었다.
💡 또한 github actions을 통해 팀 레포에 PR이 되면, 개인 레포에 push가 자동으로 이루어지게 만들면 워크플로우도 문제가 없게 할 수 있다.

📌 개인 계정에서는

1. 팀 레포지토리를 개인 레포지토리로 fork(public) 한다.

2. vercel에 hobby plan으로 연동한다.

Add New - project 탭 -> fork한 개인 레포를 import한다.

환경변수가 있다면 여기서 등록해주면된다. 후에 settings에서도 추가, 수정이 가능하다.

3. https://github.com/settings/tokens 에서 secrets 토큰 생성하기

권한은 repo에만 체크해주면 된다.

📌 팀 Organization 레포지토리에서는

1. 팀 레포지토리의 Settings 에서 만든 토큰과 개인 계정 이메일을 시크릿 변수로 등록하기

2. 팀 레포 루트 경로에 `build.sh` 파일 생성하기

최상위 경로에 그냥 build.sh 파일을 추가 해주면 된다. 여기서는 팀 레포의 이름을 넣어주어야한다.

// ./build.sh 

#!/bin/sh
cd ../
mkdir output
cp -R ./team-repository-name/* ./output
cp -R ./output ./team-repository-name/

3. github actions 탭에 들어가서 `.github/workflows/git-push.yml` 파일을 생성하기

set up a workflow yourself를 눌러서 만들 수 있다.
여기서는 개인 레포 이름을 넣어주면 된다.

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.YOUR_GITHUB_KEY }}
        with:
          source-directory: 'output'
          destination-github-username: your-github-username
          destination-repository-name: your-github-repository-name
          user-email: ${{ secrets.YOUR_ACCOUNT_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

시크릿 변수로 등록해준 토큰과 이메일의 이름, 개인 계정 username, 개인 레포 이름들을 잘 확인하고 넣어주자.

✨ 결과

위 과정을 마무리한 후 팀 레포지토리 main 브랜치에 commit이나 PR이 되면 github actions이 동작하면서 자동으로 포크한 개인 레포에 push해준다.

포크한 개인 레포에서도 잘 push 된 것을 확인할 수 있다.

😅 마무리

원래 production 배포와 개발 중인 dev의 배포를 나누기 위해 vercel의 브랜치 별 배포 기능을 사용했었는데 이 방법을 사용하면 어떻게 해야하는지 고민이다. 똑같이 dev브랜치에도 github actions를 사용하면 될거 같은데, 다음에 테스트 해봐야겠다.