공통‐CI, CD 흐름

개요

CD_diagram_team_corea_3rd_demo

백엔드 CI 흐름

Github Actions를 사용하여 지속적 통합(CI)을 수행한다.

다른 CI 도구들과 달리 깃허브에서 제공하는 자체 서버를 통해 관리
우리의 코드는 깃허브로 형상 관리를 진행하기 때문에 위와 같은 방식에서 접근성의 이점을 취할 수 있다고 생각하여 선택

CI 과정

develop 브랜치 중 backend 패키지 하위 경로에 해당하는 pull request 가 열렸을 때 동작한다.
- 동작하는 pull request 상태
  - opened
  - synchronize
  - reopened
해당 저장소의 코드를 가져온다.
필요한 자바 버전(17)과 gradle 패키지를 설치하고 필요한 권한을 부여한다.
gradle 테스트를 수행하고 결과를 게시한다.

CI 설정

# .github/workflows/backend-ci.yml

name: Backend CI

on:
  pull_request:
    branches:
      - 'develop'
    paths: ['backend/**']
    types:
      - opened
      - synchronize
      - reopened

defaults:
  run:
    working-directory: backend

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Repository checkout
        uses: actions/checkout@v4

      - name: Setup java 17
        uses: actions/setup-java@v3
        with:
          java-version: 17
          distribution: 'zulu'

      - name: Cache gradle packages
        uses: actions/cache@v3
        with:
          path: |
            ~/.gradle/caches
            ~/.gradle/wrapper
          key: ${{ runner.os }}-gradle-${{ hashFiles('**/*.gradle*', '**/gradle-wrapper.properties') }}
          restore-keys: |
            ${{ runner.os }}-gradle-

      - name: Assign grant gradlew
        run: chmod +x gradlew

      - name: Test with gradle
        run: ./gradlew --info test

      - name: Publish test results
        uses: EnricoMi/publish-unit-test-result-action@v2
        if: always()
        with:
          files: '**/build/test-results/test/TEST-*.xml'

      - name: Publish test report
        uses: mikepenz/action-junit-report@v4
        if: always()
        with:
          report_paths: '**/build/test-results/test/TEST-*.xml'

프론트엔드 CI 흐름

CI 과정

develop 브랜치 중 frontend 패키지 하위 경로에 해당하는 pull request 가 열렸을 때 동작한다.
- 동작하는 pull request 상태
  - opened
  - synchronize
  - reopened
해당 저장소의 코드를 가져온다.
필요한 Node.js 버전(20.x)과 패키지를 설치한다.
npm 테스트를 수행한다.

CI 설정

name: Frontend CI

on:
  pull_request:
    branches:
      - 'develop'
    paths: ['frontend/**']
    types:
      - opened
      - synchronize
      - reopened

defaults:
  run:
    working-directory: frontend

jobs:
  build:
    timeout-minutes: 10
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [20.x]

    steps:
      # 해당 저장소의 코드를 가져온다
      - name: Checkout
        uses: actions/checkout@v4

      # 노드 설치
      - name: Install Nodejs
        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}

      # 패키지 설치
      - name: Install dependencies
        run: npm ci

      # 테스트
      - name: Run tests
        run: npm test

스토리북 배포 자동화 구성

name: Frontend Storybook Deploy
on:
  pull_request:
    branches:
      - 'develop'
    paths: ['frontend/**/*.stories.ts', 'frontend/**/*.stories.tsx']

defaults:
  run:
    working-directory: frontend

jobs:
  chromatic:
    timeout-minutes: 10
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [20.x]

    steps:
      # 해당 저장소의 코드를 가져온다
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      # 노드 설치
      - name: Install Nodejs
        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}

      - name: Install dependencies
        run: npm ci

      # 스토리북 배포
      - name: Run Chromatic
        uses: chromaui/action@latest
        with:
          workingDir: frontend
          projectToken: ${{ secrets.STORY_BOOK_TOKEN }}

storybook 코드 변경 시 자동으로 배포하여 리뷰 시 최신 스토리북을 보며 컴포넌트 단위로 확인