Vercel로 팀 프로젝트 무료 배포하기

📌 문제 상황

vercel로 github organization에 있는 팀 프로젝트를 배포하려고 했는데, free trial 횟수를 넘겨서 무료로 배포를 할 수 없었다. 🥲

이를 해결할 수 있는 방법을 찾아보다가 팀 프로젝트를 개인 프로젝트로 fork해와 무료로 배포할 수 있는 방법을 찾게 되었다.

📌 해결 방법

1. 팀 레포지토리를 개인 레포지토리로 fork한다.
   
2. vercel에 들어가 개인 레포지토리를 연동한다.

• Dashboard -> Add New -> Project -> fork 해 온 레포지토리 import
  
• 프로젝트 제목을 작성하고, Environment Variables에 프로젝트 env에 있는 내용을 작성해준다. 이후 Deploy를 클릭하면 배포 끝!
  

3. 개인 github 설정에서 token을 하나 새로 만들어 준다.

• Settings -> Developer Settings -> Personal access tokens -> Tokens -> Generate new token
• 발급된 토큰은 다시 보이지 않으므로 복사해둔다.
  

4. 팀 레포지토리의 최상단 루트에 bulid.sh 파일을 생성한다.

#!/bin/sh
cd ../
mkdir output
cp -R ./팀 레포지토리 이름/* ./output
cp -R ./output ./팀 레포지토리 이름/

5. 팀 레포지토리의 세팅에 들어가 시크릿 변수를 등록한다.

• 팀 레포 -> Settings -> Secrets and variables -> Actions -> New repository secret
• 개인 계정 이메일과 개인 계정에서 발급한 토큰을 시크릿 변수에 등록한다.
  

6. 팀 레포지토리의 Actions 에서 새로운 workflow를 생성하고 yml 파일을 생성한다.

• Actions -> new workflow -> set up a workflow yourself
• yml 파일을 아래와 같이 생성한다.
  • API_TOKEN_GITHUB : 시크릿 변수에 등록한 토큰 변수명
  • destination-github-username : 개인 깃헙 username (프로필에서 굵고 진한 이름말고 바로 아래 있는거!)
  • destination-repository-name : fork 해 온 개인 레포 이름
  • user-email : 시크릿 변수에 등록한 개인 이메일 변수명

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.AUTH_TOKEN }} // 변경
        with:
          source-directory: 'output'
          destination-github-username: 개인 깃헙 아이디 // 변경
          destination-repository-name: fork 해 온 개인 레포 이름 // 변경
          user-email: ${{ secrets.OFFICIAL_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

7. 성공하면 아래와 같이 초록불이 뜬다.

• 이후 팀 레포지토리의 main 브랜치에 push가 발생하면 배포에도 자동으로 반영이 된다.
  

참고 자료

GitHub Organization 프로젝트를 vercel 무료로 연동하기 (+git actions)
vercel로 배포한 앱에 .env(환경 변수) 적용하기