Organization Repository를 vercel+git actions로 무료 배포하기

팀 프로젝트를 진행하는데 프론트쪽을 미리 배포를 하고 진행을 하려고 했다.
여러가지 방법으로 배포가 가능하지만 비교적으로 편리한 Vercel을 이용하기로 했다.

Github Repositories 불러오기

Vercel 페이지를 들어가서 로그인을 하면 이 페이지가 보일 것이다. 다른 페이지가 보인다면 Add new...을 클릭 후 드롭다운 메뉴 중에 project 클릭하면 이 화면이 나타날 것이다.

개인 프로젝트, 레포지토리를 불러오려면 그냥 검색을 해서 import 버튼을 클릭하면 된다. 하지만 나는 Organization에 있는 레포지토리를 불러오려했기에 Add Github Account를 클릭하여 불러왔다.
Organization owner면 상관없는데, 일반 Member일 경우 owner에게 메일이 가서 따로 승인을 받아야했다.

이후 팀 이름, 프로젝트 이름, 도메인 등을 설정해주고 deploy를 눌러준다. 다른 블로그를 봤을때 바로 배포가 됐는데 나는 아무 반응이 없어서 안된줄 알았다. 그래서 계속 시도를 하니 이미 존재하는 프로젝트라고 나와서 개인 페이지로 돌아가봤는데 프로젝트가 만들어져있었다. 아직 배포된 상태는 아니였고, master branch에 push를 하니까 배포가 시작되었다.

정상적으로 배포가 되었지만 문제가 하나 있었다.
Pro요금제가 적용된다는 점..!
아쉽게도 평가판에서만 가능하고, 이후에는 요금을 따로 지불해야했다.

그래서 다른 방법이 없을까? 고민을 하다가 바로 좋은 블로그를 발견했다.

블로그의 내용을 간단하게 설명하자면, 내 개인 레포지토리를 만들고 vercel과 연동을 한다. 그리고 배포하고 싶은 Organization 레포지토리에 Git Actions를 적용하여 내 개인 레포지토리로 push하여 그 내용이 배포가 되는것이다.

배포 작업을 위해 해야할 일

1. 개인 레포지토리를 생성해준다.(public)

2. vercel에 개인 레포지토리를 연동한다.

3. Organization 레포지토리 루트 경로로 build.sh 파일을 생성해준다.
   [team-repo-name]을 모두 지우고 Organization 레포지토리 이름을 입력해준다.

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

4. Organization 레포지토리에 secret 변수를 등록해준다.
   EMAIL에는 Github 계정 이메일을, AUTO_ACTIONS에는 개인 계정에서 발급받은 token값을 넣어준다. token값을 만들때는 repo 권한을 선택해주고, 다시 확인하기 어려울 수 있으므로 다른 곳에 복사해두길 바란다. token값은 ghp_가 들어가는 값이다.
   

5. GitHub Actions 활성화 & 워크플로우 생성

   name: git push into another repo to deploy to vercel
   
   on:
   	push:
   		branches: [master]
   
   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: "your-github-name"
         			destination-repository-name: "your-project-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

Organization 레포지토리에서 push하는 branch가 master이기 때문에 바꿔줬다. 하지만 아래 target-branch는 개인 레포지토리의 main branch이기 때문에 main으로 설정했다.

처음 생성할땐 actions/checkout@v2으로 작성했는데 현재 2024년 11월 기준 최신 버전은 v4이다.

아까 secret 변수로 등록했던 token값과 Email을 불러와주고, your-github-name your-project-name에 해당 값을 넣어준다.

나는 이 파일을 Github 사이트에서 Actions -> New workflow를 통해서 생성했다. 생성하고 Actions에 들어가면 작동하고 있는지 확인이 가능하다.

성공적으로 작동이 된다면 개인 레포지토리로 파일들이 잘 옮겨졌는지, vercel에 제대로 배포가 되었는지 확인해보자!

우선 나는 배포를 잘 확인했지만, 프로젝트를 진행하면서도 계속 확인해야겠다.
끝!

출처

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