Vercel로 GitHub Organization 무료 배포하기 (w. github actions)

SODA 프로젝트 중간 발표를 앞두고 배포를 해야 했다.

백엔드는 배포 완료했는데, 프론트 배포를 안했다. aws s3로 배포할까 고민하다가 어차피 무료이고 몇 번 해봤던 vercel로 배포하기로 했다. 도메인 주소는 샀는데 아직 추가하지는 않았고, 일단 배포는 완료했는데 이 과정에서 생긴 일들을 기록해보려고 한다.

 

우선 vercel.

이전에 배포했을때는 몰랐는데, github organization 내부에 존재하는 repository는 배포할때 무료가 아니었다.

2주 무료 플랜이긴 한데 어차피 그 이후에 돈을 내야 했기에 우회해서 배포하는 방법에 대해 검색해보다가 다행히 찾았다.

 

바로 팀 Repo를 fork해서 개인 계정으로 가져온 다음, 그. repository를 통해 배포하는 것이었다.

그리고 매번 업데이트 될 때마다 포크하고 다시 배포할 수 없으니까 github action 통해서 자동으로 같이 복사되도록 추가해주었다.

 

 

 

 

 

1.  개인 계정으로 fork

orgaization에 존재하는 SODA FE repository를 개인 계정으로 fork 해왔다.

 

 

2. 개인 계정에서 github token 발급받기

Developer settting ➡️ Developer Settings ➡️ 토큰 발급 (classic)

 

여기서 체크한 것처럼 꼭 repo 체크를 해야 한다.

발급된 토큰은 다시 보여주지 않으니까 꼭 이 때 복사해두어서 저장해서 사용해야 한다.

 

3. build.sh 파일 생성 (organization의 팀 Repo)

organization에 존재하는 팀 repository 내부 프로젝트 루트 경로에 build.sh 파일을 생성해야 한다.

#!/bin/sh
cd ../
mkdir output
cp -R ./[레포이름]/* ./output
cp -R ./output ./[레포이름]/

 

이 스크립트를 통해 팀 repo에서 개인 repo로 코드를 복사할 수 있다.

 

4. secret key 설정

팀 repo에 secret key를 설정해야 한다.

Settings ➡️ Secrets and variables ➡️ Actions 여기서 설정하면 된다.

 

본인이 원하는대로 이름을 정해주면 되고,

AUTO_ACTION에는 아까 발급받았던 개인 계정의 token을 추가하면 된다.

EMAIL은 본인 계정의 이메일을 추가하면 된다.

 

5. github action 세팅

마찬가지로 팀 repo에 github action을 추가해야 한다.

 

.github/workflows/[원하는 파일명].yaml 

 

저 위의 버튼을 클릭해서 내 마음대로 yml 파일을 설정할 수 있다.

 

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.[깃허브토큰 secret key] }}
        with:
          source-directory: 'output'
          destination-github-username: [fork한 깃허브 계정]
          destination-repository-name: [fork한 repo 이름]
          user-email: ${{ secrets.[이메일 secret key] }}
          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

 

그리고 이걸 추가해주면 된다.

main 브랜치에 PR merge되거나 커밋된 코드들을 자동으로 개인 계정 레포에 복사해주는 역할을 해준다.

 

 

 

그러면 만약 main 브랜치에서 변경이 되면,

fork한 개인 레포에도 업데이트가 되는 걸 알 수 있다.

 

 

6. vercel 배포

예시 이미지

 

이미 배포를 완료해서 임시로 캡처해서 가져왔다.

vercel 배포야 금방 할 수 있으니 과정은 생략해야지.

 

 

 

 

 

 

 

 

 

 

---

아무튼, 이러한 과정을 거쳐서 성공적으로 배포할 수 있게 되었다.

물론 아직 여러 세팅이 완료되지 않아서 제대로 동작하지 않지만 내일 안으로 해결할 것 같다.

 

빌드 하기 전에 수많은 오류들을 만났지만...타입스크립트 타입 오류가 너무 많았어서 오늘 안에 다 해결할 수는 있었다.

사실은 이렇게 우회해서 하는 것보다 정식 과정을 거치거나 다른 걸로 배포하는게 좋겠지만...

어쩔 수 없는 선택이었다고 생각하고 ㅋㅋ

그나마 오늘 안에 배포할 수 있어서 다행이라고 생각한다.

 

 

참고 출처

https://bori-note.tistory.com/73