[Github Actions] AWS S3에 Vue.js 프로젝트 자동 빌드 + 배포 해보기

달달칩·2020년 10월 28일

aws github vue.js

한때 팀에서 개발업무를 맡게 되었을때 회사에서 자체 개발되어 있던 CI/CD를 경험하면서 그 환경이 당연하게 느껴졌었다.

그러나 퇴사를 하고 나서 개발을 하다 보니 이런 환경이 참 좋았었구나 라는걸 몸소 깨닫고 있었다.

물론 옛날부터 개발에도 관심이 있어서 자주 혼자 이것저것 만들어보면서 수동으로 빌드+배포를 했지만..

한번 엄청난 편한 CI/CD를 경험한 뒤로 다시 수동으로 되돌아 가니 시간이 좀 아깝기도 했다.

사실 CI나 CD툴은 이미 많이 나와있었고 많이 접해볼 기회도 있었는데 본업이 개발자가 아니다 보니..

개발자체를 많이 하지는 않아서 그 도구 사용법을 익히는 것에 대해서는 그닥 땡기지는 않았다. 한번만 쓰면 몇개월 뒤에나 쓸것 같았기 때문이다.

그런데 얼마전 Github에서 Actions 라고 하는 자체 CI/CD 서비스를 공식 런칭을 하는것을 보았고 최근 Vue.js 로 개인 프로젝트를 하고 있었어서 이참에 한번 해보자고 결심했다.

Github Actions

Automate, customize, and execute your software development workflows right in your repository with GitHub Actions. You can discover, create, and share actions to perform any job you'd like, including CI/CD, and combine actions in a completely customized workflow. (https://docs.github.com/en/free-pro-team@latest/actions)

대충 깃헙 Actions로 여러분의 개발 워크 플로우를 자동화 시키라는 소개 문구이다.

사전 세팅

Actions 에서 AWS cli2 를 사용하기 위해서 깃헙 프로젝트에서 Secrets 탭에서 환경변수를 세팅해두자.

AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY

위는 AWS 에서 발급받는 Access Key 와 Secret Key 이다.

만약 특정 S3 버킷에 대해서만 접근할 수 있는 Access Key를 발급 받고 싶다면 아래를 참고해주세요.

https://velog.io/@sweetchip/AWS-Credential-%EB%B3%84-%EA%B6%8C%ED%95%9C-%EB%B6%84%EB%A6%AC-%EC%9C%A0%EC%A0%80%EB%B3%84-s3-%EB%B2%84%ED%82%B7-%EA%B6%8C%ED%95%9C-%EC%84%A4%EC%A0%95

세팅은 New Secret 을 눌러서 값을 세팅할 수 있다.

Actions 예제

만약 S3 정적 웹 호스팅에 대해 알아보고 싶거나 세팅하고싶다면 아래 링크 참고!

https://velog.io/@sweetchip/AWS-S3-%EC%A0%95%EC%A0%81-%EC%9B%B9-%ED%98%B8%EC%8A%A4%ED%8C%85%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-Vue.js-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0

아래는 현재 내가 사용하는 예제이다.

name: deploy-to-s3-example

on:
  push:
    branches: [ master ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout source code.
        uses: actions/checkout@v2

      - name: Cache node modules
        uses: actions/cache@v1
        with:
          path: node_modules
          key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.OS }}-build-
            ${{ runner.OS }}-
            
      - name: Install Dependencies
        run: npm install
        
      - name: Build
        run: npm run build

      - name: Deploy to s3
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        run: |
          aws s3 cp \
            --recursive \
            --region ap-northeast-2 \
            dist s3://bucket.domain.com

위는 master 브랜치에 커밋이 된 경우 실행되는 actions 의 예제이다.

위 예제에서 맨 마지막 라인 ap-northeast-2, dist, s3://bucket.domain.com 를 적절하게 세팅해주자.

(dist 는 vue 빌드시 자동으로 생성되는 디렉터리여서 기본 세팅이라면 그냥 냅둬도 좋다)

위 과정을 간단하게 요약하면