[CI] GitHub Organization 프로젝트 Vercel 무료 연동하기

0x45c·2024년 9월 5일

Vercel ci

CI

목록 보기

5/5

Vercel은 개인 레포지토리에 대해 무료 배포를 제공하지만, 조직(Organization) 프로젝트의 배포는 유료 플랜이 필요하다.

하지만.. 약간의 우회방법을 통해 조직의 프로젝트도 Vercel의 무료 플랜으로 배포할 수 있다!

바로 조직 레포를 개인 레포로 포크떠서 동기화 시키고, Vercel에는 개인 레포를 연동하는 방법인데...

계속해서 수동으로 개인 레포와 동기화 시키기 귀찮으니, Github Actions 기능을 활용하여 개인 레포에 자동으로 동기화 되도록 해보자!

〰️ 흐름

조직 레포의 특정 브랜치에 push

개인 레포에 자동 push

개인 레포와 Vercel 연동하여 자동 배포

1. 🍴 개인 레포지토리 생성하기

조직의 레포지토리를 개인 계정으로 포크하여 개인 레포지토리를 생성한다.

2. ⚓ Vercel에 연동하기

포크한 개인 레포지토리를 Vercel에 연결한다.
방법은 아주 쉽다. 그냥 개인 레포 선택하고 배포하면 된다.

환경변수가 있으면 등록하여 사용하면 된다.
난 아직 사용할 일이 없어서 생략했다.

3. 🔑 GitHub 토큰 생성하기

작업 대상 레포: 개인

GitHub에서 개인 액세스 토큰을 생성한다.
tokens 에서 클래식 토큰을 추가하면 된다.

설명은 적당히 넣고, 만료 기간은 제한을 없앨 수 있으나 권장되지 않으니, 커스텀 최대 유효 기간인 1년으로 설정했다. 범위 체크는 repo 영역만 하면 된다.

생성 후에는 ghp_로 시작하는 토큰값이 나오는데, 이 값은 다시 확인이 불가능하기 때문에 반드시 잘 복사해야한다!!!

4. 📜 빌드 스크립트 작성하기

작업 대상 레포: 조직

조직 레포지토리에 build.sh 파일을 생성

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

5. 🔐 시크릿 변수 등록하기

작업 대상 레포: 조직

조직 레포지토리의 시크릿에 다음 변수를 추가:

AUTO_ACTIONS: 개인 레포에서 생성한 토큰
OFFICIAL_ACCOUNT_EMAIL: 개인 계정 이메일

6. 🔄 GitHub Actions 설정하기

작업 대상 레포: 조직

.github/workflows/deploy.yml 파일을 생성하여 다음 스크립트를 작성한다.
(파일 이름은 자유롭게 작성 가능하다.)

secret 다음에 적히는 변수 : 5번에서 등록한 조직 레포지토리의 시크릿 변수 이름
destination-github-username: 개인 레포 소유자의 username
destination-repository-name: 포크 뜬 개인 레포 이름
on:push: branches : 어떤 브랜치에 push 될 때 실행할건지 지정 (나는 default가 develop이고, 개발용이라 develop으로 설정, 릴리즈로만 사용할거면 main이나.. 각 상황에 맞게 설정)
target-branch : 개인 레포의 어느 브랜치에 복사할건지

name: Deploy

on:
  push:
    branches: ['develop'] # 어떤 브랜치에 push 될 때 실행할건지

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 }} # 5번에서 설정한 secret 토큰 중 ghp_ 로 시작하는 값 넣은 변수
        with:
          source-directory: 'output'
          destination-github-username: JANGSEYEONG # 개인 레포 소유자의 username
          destination-repository-name: FANMIX # 포크 뜬 개인 레포 이름
          user-email: ${{ secrets.OFFICIAL_ACCOUNT_EMAIL }} # 개인 계정 이메일
          commit-message: ${{ github.event.commits[0].message }}
          target-branch: develop # 개인 레포의 어느 브랜치에 복사할건지

      - name: Test get variable exported by push-to-another-repository
        run: echo $DESTINATION_CLONED_DIRECTORY

7. 🚀 배포 테스트하기

머지 및 작업 대상 레포: 조직

PR을 생성하고 지정된 브랜치(예: develop)에 머지해보며 배포가 잘 되는지 확인할 수 있다.

변경사항이 포함된 내용을 develop에 merge 시키면..
GitHub Actions이 잘 실행되고,

개인 레포지토리와 Vercel에 변경사항이 반영되는걸 확인할 수 있다!

처음 했던 프로젝트는 수동으로 동기화를 시켜줬었고, 이전 사이드 프로젝트에는 위 방법을 적용했었다.

작지만 이런 Vercel 배포 자동화 경험을 통해 CI/CD의 실질적인 이점을 체감했다. 귀찮은 작업을 줄이는 것을 넘어 전체 개발 과정이 훨씬 효율적으로 변하기에, 앞으로 프론트엔드 개발 외에도 DevOps 관련 지식을 더 쌓아, 더 나은 개발 환경을 만들어가고 싶다.

이런 자동화 도구들을 잘 활용하면 개발자의 삶이 한결 편해질 것 같다. 그리고 앞으로도 작업을 하다가 귀찮은 것들이 있으면 한번 편하게 작업할 수 있는 방법이나 환경을 세팅해봐야겠다!

다음에는, PR을 올리면 자동으로 코드 리뷰를 해주는 봇을 세팅해보고 싶다 :)