프론트엔드 배포 yml 파일에서 사용되는 키워드

• github actions
• self-hosted
• aws s3, cloudfront

on

develop 브랜치에서 시작해서

• 새로운 기능(feature)를 구현하고,
• develop 브랜치로 PR(Pull Request)를 생성하고,
• 코드 리뷰를 주고 받다가 develop 브랜치로 머지가 될 때 Frontend CD workflow를 실행한다.

깃허브 이벤트에는 merge가 존재하지 않으므로, develop 브랜치에 push가 되었을 때 워크 플로우를 실행한다.

name: Frontend CD

on:
  push:
    branches: ["develop"]
    
permissions:
  checks: write

jobs

1) detect-changes

detect-changes:
  runs-on: ubuntu-latest
  permissions:
    pull-requests: read
  outputs:
    backend: ${{ steps.filter.outputs.backend }}
    frontend: ${{ steps.filter.outputs.frontend }}
  steps:
    - uses: actions/checkout@v4 # Push 이벤트이기 때문에 checkout 해야 함
      with:
        ref: develop
    - uses: dorny/paths-filter@v3
      id: filter
      with:
        base: "develop" # 해당 브랜치의 last commit과 변경점 비교
        filters: |
          backend:
            - 'backend/**'
          frontend:
            - 'frontend/**'

백엔드의 PR이 머지되어 develop 브랜치에 push 이벤트가 발생할 경우에는 프론트엔드 CD 워크플로우가 실행될 필요가 없기 때문에, detect-changes job을 활용한다. detect-change는 develop 브랜치의 last commit과 PR에서의 backend, frontend 폴더 내부의 commit들과 비교해서 비교 결과를 outputs의 frontend, backend에 각각 담는 작업을 수행하는 job이다.

2) fe-build

fe-build:
  needs: detect-changes # jobs들은 병렬로 실행됨, needs 키워드를 사용해서 특정 job이 완료(성공)면 실행하도록 설정
  if: ${{ needs.detect-changes.outputs.frontend == 'true' }}
  runs-on: ubuntu-latest
  defaults:
    run:
      shell: bash
      working-directory: ./frontend

  steps:
  - name: 모모 레파지토리의 코드를 가져와요 :)
    uses: actions/checkout@v4

  - name: 노드 버젼을 설정해요 :)
    uses: actions/setup-node@v4
    with:
      node-version: "lts/*"

  - name: 이전 의존성을 저장해둔게 있나~? 확인해요 :)
    id: cache
    uses: actions/cache@v4
    with:
      path: "frontend/node_modules"
      key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
      restore-keys: |
        ${{ runner.os }}-node-
        ${{ runner.os }}

  - name: package-lock.json을 활용해서 의존성을 깨끗하게 설치해요 :)
    if: steps.cache.outputs.cache-hit != 'true'
    run: npm ci

  - name: .env 파일을 생성해요 :)
    run: |
      echo "${{ secrets.MOMO_FE_ENV }}" >> .env

  - name: 프론트엔드 리소스를 빌드해요 :)
    run: npm run build

  - name: 프론트엔드 리소스 결과물을 깃허브 레파지토리 artifacts로 업로드해요
    uses: actions/upload-artifact@v4
    with:
      name: momoResources
      path: frontend/dist

1) needs

깃허브 워크플로우에서 각 job들은 병렬로(동시에) 실행되기 때문에, 만약 A job이 B job의 결과에 영향을 받는다면 A job에서 needs를 활용해서 B job이 끝나기를 기다려야 한다는 것을 명시한다. fe-build는 detect-change의 결과에 따라서 실행을 할지 말지 결정되기 때문에 needs에 detect-change를 추가한다. detect-change job의 결과물에서 frontend에 변경사항이 있으면, 프론트엔드 리소스들을 빌드하기 위한 job을 수행한다.