Git Actions 을 이용한 프론트엔드 배포 자동화

프론트엔드를 배포할때 s3를 통해 프론트 엔드 파일을 넣고 cloud front 로  s3에 있는 데이터를 가져와서 보여주는 방식으로 프론트엔드를 배포를 구현했는데 이것을 자동화시키기 위해서 먼저 vue js를 통해 프론트엔드를 만들었기때문에 먼저 배포를 위한 형태로 만들어줘야하기떄문에 npm run build를 해야합니다

name: depoly vue to s3

on:
  push:
    branches: [ main ]
    
jobs:
  build:
    runs-on: ubuntu-latest
    env:
      AWS_ACCESS_KEY_ID: ${{ secrets.ACCESS_KEY }}
      AWS_SECRET_ACCESS_KEY: ${{ secrets.SECRET_ACCESS_KEY }}
    steps:
      - name: checkout
        uses: actions/checkout@v2
      
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: 14

      - name: Install dependencies
        run: npm install
        
      - name: build
        run: npm run build

npm 은 node package manager의 기능이기때문에 npm을 설치를 해주고 그다음에 래퍼지토리에올라와있는 vue파일을 build로 배포형식으로 바꾼다음에 이 파일을 s3로 넣어줘야한다

     - name: deploy vue to s3
        run: |
          aws s3 sync dist s3://makebsetie --delete --debug --region ap-northeast-2

해당코드를 통해 s3의 버킷과 동기화를 한후에 대상 S3 버킷에서 로컬 디렉토리와 일치하지 않는 파일들을 삭제하는 코드이다 그 후에 클라우드 프론트를 초기화를 해줘서 변화된내용을 즉시 적용시키면 프론트페이지가 짜잔 하고 바뀌게된다

      - name: Invalidate cache CloudFront
        uses: chetan/invalidate-cloudfront-action@master
        env:
          DISTRIBUTION: ${{ secrets.DISTRIBUTION_ID }}
          AWS_REGION: ap-northeast-2
          PATHS: '/*'
        continue-on-error: true