[CI/CD] Vue.js GitHub Actions 적용기 #3 (sandbox, qa)

https://honggom.tistory.com/199

[CI/CD] GitHub Actions 적용기 #1 (Front-prod)

https://honggom.tistory.com/202

[CI/CD] GitHub Actions 적용기 #2 (test)

이번 글에서는 prod와 test에 이어 Front의 마지막으로 sandbox, qa 워크플로우를 다룬다.

 

sandbox, qa의 워크플로우

1. sandbox, qa 브랜치가 push되면 동작
2. repository checkout
3. node setup 및 cache
4. ci
5. build
6. upload to s3
7. cloudfront invalidate
8. send slack message

 

간단히 훑어보면 lint하는 과정이 빠져있는데 그 이유는 아래와 같다.

1. sandbox와 qa의 push가 잦아서 워크플로우 시간을 단축하기 위해.
2. test에 lint하는 과정이 있어서 중복되기 때문에.

---

1. sandbox, qa 브랜치가 push되면 동작

name: deploy-sandbox-qa
on:
  push:
    branches: [ sandbox, qa ]

sandbox와 qa브랜치에 push되면 이 워크플로우가 동작한다.

 

 

2. repository checkout

jobs:
  deploy-sandbox-qa:
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@main

GitHub Actions에서 제공하는 actions/checkout을 사용하면 해당 repository로 checkout한다.

 

 

3. node setup 및 cache

- name: setup node
  uses: actions/setup-node@main
  with:
    node-version: 16
    cache: 'npm'

node setup과 의존성 cache도 그냥 플러그인을 가져다가 쓰면 되고 환경에 맞게 버전과 같은 변수만 설정해주면 된다. 이렇게 하면 해당 워크플로우 환경에 명시된 버전으로 node가 설치되고 cache도 알아서 해준다.

 

4, 5 : ci, build 

- name: ci
  run: npm ci

- name: build
  run: npm run build -- --mode ${{ github.ref_name }}

npm 의존성을 설치하고 소스를 빌드한다. 여기서 ${{ github.ref_name }}는 push된 브랜치명(ex: sandbox)을 나타낸다. 

 

 

6. upload to s3

앞에 글에서도 다뤘지만 build한 소스를 AWS S3에 업로드하는 과정이다.

- name: upload to s3
  run: aws s3 sync --region $AWS_REGION dist $AWS_S3_URL/${{ github.ref_name }}/

(설명은 앞 글에서 했기에 생략..)

 

7. cloudfront invalidate

- name: invalidate cloudfront
  run: |
    if [ ${{ github.ref_name == 'sandbox' }} ]; then
    DISTRIBUTION=...
    fi
    if [ ${{ github.ref_name == 'qa' }} ]; then
    DISTRIBUTION=...
    fi
    aws cloudfront create-invalidation --distribution-id ${DISTRIBUTION} --paths "/index.html"

(설명은 앞 글에서 했기에 생략..)

 

8. send slack message

- name: send slack message
  uses: 8398a7/action-slack@v3
  if: always()
  with:
    status: ${{ job.status }}
    fields: repo,message,author,ref,workflow,took
    author_name: ''

- name: send slack message (URL)
  uses: 8398a7/action-slack@v3
  if: success()
  with:
    status: custom
    custom_payload: |
      {
        attachments: [{
          text: '<https://myproject-${{ github.ref_name }}.io/|:house:*myproject - ${{ github.ref_name }}*>',
        }]
      }

(설명은 앞 글에서 했기에 생략..)

 

-워크플로우 끝-

---

이것으로 Vue.js의 GitHub Actions 적용은 끝이다. GitLab에서 직접적으로 CI/CD를 구현해보진 않았지만 GitHub이 편한 것은 확실한 것 같다.