💡 통합과 배포를 용이하게 하기 위해서 프로젝트 초기에 GitHub Actions를 활용한 CI/CD 파이프라인을 구축했습니다. CI를 통해 조기에 오류를 포착할 수 있었고, CD를 통해 재빠른 수동 테스트와 버그 수정을 할 수 있었습니다.

• CI
  • 깃브랜치 지속적 통합을 위한 테스트 프로세스 자동화
  • main/develop 브랜치에 pull request를 보냈을 때 린트 테스트(eslint), 유닛 테스트(jest), 빌드(typescript 컴파일) 등을 실행
  • frontend와 backend CI를 별도로 구축
• CD
  • 배포 프로세스 자동화
  • main 브랜치에 push(merge) 됐을 때 자동으로 빌드 결과를 운영 서버에 배포
  • frontend와 backend CD를 별도로 구축

• 툴 : GitHub Actions
• 레포의 .github/workflows 폴더 아래 workflow 파일을 yaml로 작성
• GitHub Actions가 정의된 조건(on)에 맞춰 workflow를 트리거함
• GitHub Actions Secrets를 활용해 환경변수 저장

  • 코드로 살펴보기(FE)

    name: cd-frontend
    
    on:
      push:
        branches: ["main"]
        paths:
          - "frontend/**"
    
    jobs:
      deploy-frontend:
        name: deploy-frontend
        runs-on: ubuntu-latest
        defaults:
          run:
            working-directory: frontend
    
        steps:
          - name: checkout
            uses: actions/checkout@v3
    
          - name: create env files
            run: |
              touch .env.production
              cat << EOF >> .env.production
              ${{ secrets.FE_ENV_PRODUCTION }} 
              EOF
    
          - name: install dependencies
            run: npm ci
    
          - name: build
            run: npm run build
    
          - name: deploy build outputs
            uses: appleboy/scp-action@master
            with:
              host: ${{ secrets.FE_HOST }}
              username: ${{ secrets.FE_USERNAME }}
              password: ${{ secrets.FE_PASSWORD }}
              port: ${{ secrets.FE_PORT }}
              source: "frontend/build/*"
              target: "/tody

  • 코드로 살펴보기(BE)

    name: cd-backend
    
    on:
      push:
        branches: ["main"]
        paths:
          - "backend/**"
    
    jobs:
      deploy-backend:
        name: deploy-backend
        runs-on: ubuntu-latest
        steps:
          - name: deploy to prod
            uses: appleboy/ssh-action@master
            with:
              host: ${{secrets.BE_HOST}}
              username: ${{secrets.BE_USERNAME}}
              password: ${{secrets.BE_PASSWORD}}
              port: ${{secrets.BE_PORT}}
              script: |
                cd tody
                git pull origin main
                cd backend
                npm ci
                npm run build
                pm2 reload main

• CI를 통해 조기에 오류를 포착
• CD를 통해 재빠른 수동 테스트와 버그 수정