프로젝트 자동화 구현하기: Projects 연결, branch 삭제, Organization Vercel 배포편

0. 자동화 구현 배경

(1) Issue, PR 관리

위치 추측 게임 서비스, 어데고?!를 개발하며, 프로젝트를 관리하기 위해 팀원 모두가 신경을 써야 하는 부분들이 생기기 시작했다. Github에서 제공하는 Projects로 업무 분담 및 모니터링을 진행하기로 했기에, Issue를 생성한 후 직접 Projects에 등록하고 상태를 진행중으로 바꾸는 작업이 추가적으로 요구되었으며 Projects를 연결하는 것을 잊어 현재 진행 중인 작업이 추적되지 않는 문제가 발생했다. 더불어 Pull Request를 Merge하게 된 후, branch를 삭제하지 않아 더 이상 사용하지 않는 branch가 쌓여 삭제할 필요가 있는 branch와 현재 사용하고 있는 branch를 구별하지 못하는 문제가 발생했다.

이러한 반복적인 작업이 피로도와 실수 발생률을 높임을 인지하고, 시스템에서 자동적으로 작업을 추적하도록 설정하는 자동화를 만들어야 한다는 결정으로 이어지게 되었다.

 

(2) 프론트 배포

로컬에서만 돌리는 것이 아닌, 배포된 환경에서 사용자가 직접 사용할 수 있는 환경을 조성해야 했다. 이때, Vercel 배포를 자동화하여 올린 코드를 바탕으로 즉각적인 배포를 진행하고자 했다.

 

1. Projects 자동화

(0) Projects Status 설정

• Ready ✏️: Issue를 생성했으나, 작업 순위에 밀려 진행중이지 않는 경우 사용하는 상태
• In progress ⚡: 현재 작업 중인 상태
• In review 📑: Pull Request를 생성한 상태
• Done 👍: Issue, Pull Request가 Close되며, 작업이 종료된 상태

 

(1) Issue가 생성되었을 때

• Projects에 할당

• Projects의 In progress ⚡ 상태로 변경

 

(2) Issue가 Close되었을 때

• Projects의 Done 👍 상태로 변경

• 완료된 상태(Done 👍)이라면, Issue Close

 

(3) Issue가 ReOpen되었을 때, Projects의 In progress ⚡ 상태로 변경

 

2. PR merge되었을 때, branch 삭제

Settings/General에 위치하는 기능을 활성화해주면 된다.

• 활성화 해야 하는 기능

• PR이 merge된 후, 자동으로 branch 삭제되는 예시

 

3. Vercel 배포 자동화

(0) Organization Repo를 fork한 개인 Repo 생성 및 개인 Repo Vercel 연결

Organization을 활용해 Repo를 생성했다. Vercel은 Organization Repo로 배포를 하기 위해선 유료 버전을 사용해야 하기에, Organization Repo를 fork하여 개인 Repo를 생성했고 이를 Vercel과 연결해주었다.

 

⚡ fork한 개인 Repo: https://github.com/minjeongss/Urdego_Frontend_Deploy

 

(1) Git actions로 Repo 연결 설정

Git actions의 기능을 활용해, Organization Repo에 코드가 push되면 이를 감지하여 개인 Repo에 해당 내용을 push하는 자동화 기능을 구현했다.

 

설정해주어야 하는 값은 다음과 같다.

• Organization Repo에서 push를 감지하는 branch: develop
• 개인 Repo에서 push를 반영하는 branch: main
• Organization Repo의 Screts에 등록하는 key
  • AUTO_DEPLOY_KEY: 개인 계정에서 발급한 토큰
  • AUTO_DEPLOY_EMAIL: 개인 계정과 연동된 이메일

• 위치: .github/workflows/git-push.yml

name: git push into another repo to deploy to vercel

on:
  push:
    branches: [develop] //설정 필요

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_DEPLOY_GITHUB_KEY }}
        with:
          source-directory: 'output'
          destination-github-username: minjeongss //설정 필요
          destination-repository-name: Urdego_Frontend_Deploy //설정 필요
          user-email: ${{ secrets.AUTO_DEPLOY_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

• 위치: build.sh

// ./build.sh 

#!/bin/sh
cd ../
mkdir output
cp -R ./Urdego_Frontend/* ./output
cp -R ./output ./Urdego_Frontend/

 

(2) Git actions 작동

현재 github flow 전략을 택하여, feature branch를 생성한 후 PR을 merge해야 develop branch에 코드가 반영이 되는 구조로 구성되어 있다. PR을 merge하게 되면 git actions가 이를 감지하여, 개인 Repo로 push를 진행하고 개인 Repo는 업데이트된 코드를 바탕으로 Vercel 배포를 진행하게 된다.

 

(3) Vercel 배포