웹드루아 - 웹 개발자 드루아

백엔드와 함께 서로의 코드를 보면서 진행하고자 GitHub Organization에서 작업을 하기로 결정해 Organization을 만들어 프론트엔드 repo와 백엔드 repo를 만들었습니다.

해당 과정에서 문제가 생긴게 Organization의 레포지토리를 Vercel에 배포하려면 유료 결제를 해야한다는 점이었습니다. 그래서 이를 해결할 방법을 찾아봤고, 개인 레포지토리와 Organization의 레포지토리를 연결해 무료로 자동 배포할 수 있는 환경을 구축하는 방법을 알아냈습니다. 해당 과정을 정리하면 좋을 것 같다는 생각이 들어서 이렇게 정리하게 되었습니다.

1. Organization의 레포지토리를 개인 계정에 fork 합니다.

2. Vercel에 fork한 레포지토리를 연동합니다.

연동하는 방법은 깃허브 계정 연결 후 배포하려고 하는 레포지토리를 선택하면 됩니다.

3. secret 토큰을 발급 받습니다.

생각보다 Secret 토큰 발급하는 쪽을 찾기 어렵더라고요

Settings -> Developer Settings -> Personal access tokens -> Tokens (classic) -> Generate new token을 클릭하여 secret 토큰을 발급 받을 수 있습니다.

스코프는 상단 repo 체크박스 하나만 체크하고 생성하면 됩니다. 

그럼 ghp_로 시작하는 토큰이 발급되는 데, 다시 확인 할 수 없기 때문에 기록해 놓아야 한다.

4. build.sh 파일을 Organization 레포지토리에 생성한 후 아래의 코드를 입력합니다.

  
#!/bin/sh

cd ../

mkdir output

cp -R ./{Organization의 배포하려고 하는 repo 이름}/* ./output

cp -R ./output ./{Organization의 배포하려고 하는 repo 이름}/

5. Organization 레포지토리에 발급 받은 secret 토큰을 secret 변수로 등록합니다.

Organization repo -> settings -> Secreat and Variables -> Actions에 들어가 secret 변수 등록

토큰을 secret 변수로 저장한 후 GitHub 이메일도 secret 변수로 저장해야한다.

6. 배포하려는 Organization 레포지토리에 GitHub Action 코드를 작성합니다.

최상단 폴더에 .github 폴더를 만들고 workflows 폴더를 만든 후에 햐소 GitHub Action 코드를 작성할 yml 파일을 생성합니다.

name: Deploy



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.AUTO_ACTIONS }}

        with:

          source-directory: 'output'

          destination-github-username: {내 깃허브 계정 이름}

          destination-repository-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

7. 이렇게 설정 한 후 main 브랜치에 develop 브랜치를 Merge할 때 업데이트가 되는지 확인해 보면 됩니다 :)