AWS - Nuxt.js SSR Super Lightweight Deploy with github actions

AWS Lambda@Edge를 이용해서 Server Side Rendering을 사용한 Nuxt.js를 배포하는 글을 작성하였는데

해당 방법은 gmyankee.tistory.com/349 docker를 사용하며 docker를 선행 학습하여야 하는 단점이 있었습니다.

 

하지만 요즘같은 CI/CD가 무료 한도로 많이 발전한 시대에는 자동화라는 개념이 필요로 합니다.

우리는 devOps에서 사용되는 이러한 CD로 2020년 4월 중순경 github에서 private와 기업용을 개인에게도 무료로 풀리면서 github actions의 장점을 획득할 수 있게되었습니다.

 

 

Github Actions를 제가 선호하는 이유는

• Docker Image를 기반
• Docker를 기반으로 사용하니 필수 의존성을 예를들면 aws-cli 등을 설치하기 보다는 이미 구성된 이미지를 쓰는게 시간절약등에서 유리함
• 사용법이 쉽고 설정이 매우 쉬움
• 클라우드 러너로 동작하지만 MS가 제정신이 아니라서 메모리가 무려 8GB나 됩니다...

 

name: Deploy to AWS Lambda@Edge on S3 with CloudFront
'on':
  push:
    branches:
      - master
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: ./frontend
    env:
      PORT: ${{ secrets.PORT }}
      FIREBASE_APIKEY: ${{ secrets.FIREBASE_APIKEY }}
      FIREBASE_AUTHDOMAIN: ${{ secrets.FIREBASE_AUTHDOMAIN }}
      FIREBASE_DATABASEURL: ${{ secrets.FIREBASE_DATABASEURL }}
      FIREBASE_PROJECTID: ${{ secrets.FIREBASE_PROJECTID }}
      FIREBASE_STORAGEBUCKET: ${{ secrets.FIREBASE_STORAGEBUCKET }}
      FIREBASE_MESSAGINGSENDERID: ${{ secrets.FIREBASE_MESSAGINGSENDERID }}
      FIREBASE_APPID: ${{ secrets.FIREBASE_APPID }}
      FIREBASE_MEASUREMENTID: ${{ secrets.FIREBASE_MEASUREMENTID }}
      ADSENSE_KEY: ${{ secrets.ADSENSE_KEY }}
      GRAPHCMS_API_URL: ${{ secrets.GRAPHCMS_API_URL }}

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

      - name: Configure AWS credentials from Test account
        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: us-east-1 # 버지니아 북부

      - name: Global Install on Deploy dependency
        run: |
          sudo npm i -g node-prune modclean minify-all serverless serverless-prune-plugin serverless-offline
      - name: Project Package Install and Production Build
        run: |
          npm i && npm run build --production
      - name: Super LightWeight
        run: |
          node-prune && minify-all && echo y | modclean -n default:safe,default:caution && \
          npm prune --production
      - name: Serverless Deploy
        run: |
          serverless config credentials --provider aws --key ${{ secrets.AWS_ACCESS_KEY_ID }} --secret ${{ secrets.AWS_SECRET_ACCESS_KEY }} && \
          sls deploy --stage production
      - name: AWS CloudFront Invalidation
        run: |
          aws cloudfront create-invalidation --distribution-id <distribution-id> --paths "/*"

 

저의 구성 방식입니다.

 

working_directory는 진행할 루트 경로를 설정하는데, 특정 step마다 작성하여도 문제 없지만 저는 전역으로 사용할 예정이라 jobs defaults에 포함하였습니다.

 

env 환경변수는 github 저장소에서 secrets 키로 설정하실수 있습니다.

 

핵심은 steps입니다.

aws-actions/configure-aws-credentials@v1 이미지를 사용해서 aws-cli가 설치되어 있는 이미지를 사용했습니다.

lambda@edge 특성상 버지니아 북부로 설정하셔야 합니다.

 

 

Global Install On Deploy dependency

이 위치에서는 이름 대로 전역으로 배포에 필요한 의존성을 설치하는 단계입니다.

 

 

Project Package Install and Production Build

이 구간에서는 패키지를 설치하고 production으로 빌드합니다.

 

 

Super LightWeight

지난 포스팅에서 설명한 초 경량화 작업을 진행합니다. github actions로 구간이 나뉘어져서 오히려 보기도 더 좋아진듯 합니다.

 

 

Serverless Deploy 

마찬가지로 지난 포스팅에서 사용한 방법인 serverless에서 configure를 설정하고 serverless 명령으로 배포를 진행합니다.

 

 

AWS CloudFront Invalidation

지난 포스팅에서는 클라우드 프론트를 작성하지는 않았지만, 연동되어 있는 클라우드 프론트의 캐시를 무효화하기 위한 작업을 진행합니다. (사실 이 부분때문에 aws-cli 이미지를 사용합니다)