git | github action CI 구성

.github/workflows 폴더 내에
.yml 파일을 생성하여 github action 워크플로우 설정

vercel 사용 시 organization 레포는 팀 플랜을 사용해야 해서
개인 저장소로 fork 하여 사용하기로 했다
때문에 CI 와 CD 를 분리하여 구성하려 한다

CI

organization

• dev 브랜치에 PR 요청 시 빌드 테스트
• main 브랜치에 PR 완료 시 개인 저장소로 main 브랜치를 push 하도록 구성

dev -> main 작업은 개발 환경에서 충분히 검토 후
수동으로 PR 하는 쪽이 좋을 것 같다

ci.yml

name: CI Pipeline

on:
  pull_request:
    branches:
      - dev

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v3

    - name: Set up Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '20'
        cache: npm # npm 캐시 사용

    - name: Install dependencies
      run: npm install

    - name: Build project
      run: npm run build

테스트 코드나 린터 검증을 추가하거나
build 실패 시 PR 닫기를 추가해보면 좋을 것 같다

PR 닫기 설정

Organization - Settings - Actions - General
에서 Workflow permissions 을
Read and write permissions 로 선택 후 저장
저장소에서도 Read and write permissions 되어있는 지 확인

name: CI Pipeline

on:
  pull_request:
    branches:
      - dev

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20'
          cache: npm # npm 캐시 사용

      - name: Install dependencies
        run: npm install

      - name: Build project
        run: npm run build

      - name: Close PR, if build fails # 빌드 실패시 pr 닫기
        if: ${{ failure() }}
        uses: actions/github-script@v6
        with:
          github-token: ${{ github.TOKEN }}
          # octokit 문법 참고
          script: |
            const pull_number = context.payload.pull_request.number
            const updated_title = `[BUILD FAIL] ${{ github.event.pull_request.title }}`
            await github.rest.pulls.createReview({
              owner: context.repo.owner,
              repo: context.repo.repo,
              pull_number: pull_number,
              body: '빌드에 실패했습니다.',
              event: 'REQUEST_CHANGES'
            })
            await github.rest.pulls.update({
              owner: context.repo.owner,
              repo: context.repo.repo,
              pull_number: pull_number,
              title: updated_title,
              state: 'closed'
            })

      - name: Approve PR, If build test passes # 빌드 통과시, PR 상태 열기
        uses: actions/github-script@v6
        with:
          github-token: ${{ github.TOKEN }}
          script: |
            const pull_number = context.payload.pull_request.number
            await github.rest.pulls.createReview({
              owner: context.repo.owner,
              repo: context.repo.repo,
              pull_number: pull_number,
              body: '빌드 테스트에 통과했습니다',
              event: 'COMMENT'
            })

build.sh

프로젝트 최상단에 build.sh 파일 작성
이 파일은 workflows 에서 사용할 파일

cd ../
mkdir output
cp -R ./[TEAM_REPO_NAME]/* ./output
cp -R ./output ./[TEAM_REPO_NAME]/

TEAM_REPO_NAME 에 organization 내 저장소 이름을 적어준다

git-push.yml

name: git push to deploy repository

on:
  pull_request:
    types: [closed]
    branches: 
      - main

jobs:
  build:
    if: github.event.pull_request.merged == true
    runs-on: ubuntu-latest
    container: pandoc/latex
    steps:
      - uses: actions/checkout@v3
      - 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.TOKEN }}
        with:
          source-directory: 'output'
          destination-github-username: ${{ secrets.TARGET_USER_NAME }}
          destination-repository-name: ${{ secrets.TARGET_REPO_NAME }}
          user-email: ${{ secrets.EMAIL }}
          commit-message: ${{ github.event.pull_request.title }}
          target-branch: main
      - name: Test get variable exported by push-to-another-repository
        run: echo $DESTINATION_CLONED_DIRECTORY

저장소 세팅 페이지에서
Secrets and varibables - Actions - New repository secret
을 추가해줘야 한다

TARGET_USER_NAME = 개인 저장소 user name
TARGET_REPO_NAME = 개인 저장소에 fork 한 저장소 명
EMAIL = user name 에 맞는 깃허브 아이디
TOKEN = user name 에서 발급한 깃허브 classic token

참고자료

• [Next.js] Vercel로 GitHub Organization 무료 배포하기 with github actions
• https://velog.io/@mmmdo21/CICD-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0Github-Actions-Vercel