Github Action 워크플로우 정의하기

Github Action

빌드, 테스트, 배포 등을 자동화할 수 있는 CI/CD 플랫폼이다.

Push Github Action

name: HybridJGS-FE Dev Production

on:
  push:
    branches:
      - dev
    paths:
      - 'client/**'

jobs:
  build-and-deploy-client:
    runs-on: ubuntu-latest
    env:
      working-directory: ./client

    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Setup node
        uses: actions/setup-node@v2

      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ap-northeast-2

      #       dependency 설치
      - name: Install dependencies
        run: yarn
        working-directory: ${{ env.working-directory }}

      #       build
      - name: Build project
        run: yarn build
        working-directory: ${{ env.working-directory }}

      #       S3 버킷에 배포
      - name: Deploy static site to S3 bucket
        run: aws s3 sync ./client/dist s3://hybridjgs-frontend

      #       CloudFront 삭제
      - name: Invalidate CloudFront Cache
        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.DEV_AWS_DISTRIBUTION_ID }} --paths '/*'

한 줄 한 줄 살펴보자면,

on:
  push:
    branches:
      - dev
    paths:
      - 'client/**'

on

on은 해당 워크플로우가 어떤 조건에 발생하는 워크플로우인지 정의한다 우리는 dev 브랜치에 push가 발생할때의 워크플로우를 정의할 것이기 때문에 위와 같이 정의한다

paths

어떤 폴더/파일에 변화가 발생한 경우 트리거가 될 것인지 정의한다

jobs:
  build-and-deploy-client:
    runs-on: ubuntu-latest
    env:
      working-directory: ./client

jobs

독립된 컨테이너 위에서 돌아가는 작업 처리 단위이다

runs-on

어떤 환경에서 해당 워크플로우가 돌아갈 것인지 정의한다

env

환경변수를 정의해서 워크플로우가 돌아갈 때 사용할 수 있다

    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Setup node
        uses: actions/setup-node@v2

steps

가장 작은 작업 단위로 실제 돌아갈 워크플로우들을 정의한다

uses

GitHub 자체에서 정의된 액션을 사용할 때 활용되는 속성이다 위 코드는 checkout, node 설정을 진행하는 작업이다

run

셸 명령어를 실행하는 속성으로 셸 환경에서 실행된다

      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ap-northeast-2

      #       dependency 설치
      - name: Install dependencies
        run: yarn
        working-directory: ${{ env.working-directory }}

      #       build
      - name: Build project
        run: yarn build
        working-directory: ${{ env.working-directory }}

      #       S3 버킷에 배포
      - name: Deploy static site to S3 bucket
        run: aws s3 sync ./client/dist s3://hybridjgs-frontend

      #       CloudFront 삭제
      - name: Invalidate CloudFront Cache
        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.DEV_AWS_DISTRIBUTION_ID }} --paths '/*'

aws-actions/configure-aws-credentials@v1

사전에 정의된 Github 액션으로, AWS에 자격 증명을 구성하는 작업이다 Github secret에 넣어둔 id와 access key를 사용해서 자격 증명을 구성할 수 있다 이후 배포 셸 스크립트를 통해서 배포가 진행된다.

PR Github Action

name: Build and Comment

on:
  pull_request:
    branches:
      - dev
    paths:
      - 'client/**'

jobs:
  build-client:
    runs-on: ubuntu-latest
    env:
      working-directory: ./client

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

      - name: Set up Node.js
        uses: actions/setup-node@v2

      - name: Install dependencies
        run: yarn
        working-directory: ${{ env.working-directory }}

      - name: Build project
        run: yarn build
        working-directory: ${{ env.working-directory }}

  comment-client:
    needs: build-client
    runs-on: ubuntu-latest
    if: always()

    steps:
      #       성공 시 코멘트
      - name: Add a comment on success
        if: ${{ needs.build.result == 'success' }}
        uses: actions/github-script@v6
        with:
          script: |
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: '빌드를 성공했습니다! :tada:'
            })

      #       실패 시 코멘트
      - name: Add a comment on failure
        if: ${{ needs.build.result == 'failure' }}
        uses: actions/github-script@v6
        with:
          script: |
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: '빌드를 실패했습니다. :x: 자세한 내용은 로그를 참고해주세요.'
            })

Push 액션과 중복된 부분은 제외하고, comment-client 부터 살펴보자면,

  comment-client:
    needs: build-client
    runs-on: ubuntu-latest
    if: always()

needs

어떤 작업이 끝난 후 실행되어야하는 작업인지 정의한다 위 코드는 comment-client 작업은 build-client 작업이 끝난 후 실행되는 것임을 정의한다

if

어떤 상황에 실행되는 작업인지 정의한다 always()는 선행 작업의 성공/실패 여부 상관없이 실행되는 것임을 정의한다 (다른 속성으로는 success(), failure() 등이 있다)

    steps:
      #       성공 시 코멘트
      - name: Add a comment on success
        if: ${{ needs.build.result == 'success' }}
        uses: actions/github-script@v6
        with:
          script: |
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: '빌드를 성공했습니다! :tada:'
            })

actions/github-script@v6

사전에 정의된 Github 액션으로, github 스크립트를 실행한다

with: script:

github 객체를 사용하여 GitHub REST API를 호출한다

github.rest.issues.createComment

createComment 메서드는 지정된 이슈에 댓글을 생성하는 역할을 한다

• issue_number: 댓글을 추가할 이슈 번호를 지정한다
• owner: 리포지토리 소유자 이름을 지정한다
• repo: 리포지토리 이름을 지정한다
• body: 이슈에 추가할 댓글의 내용을 지정한다