Vue 시작하기 (4) | Github actions + S3로 배포 자동화

 

📄 목차

• 1. Amazon IAM 생성
• 2. github secrets 세팅
• 3. github workflows정의

 

1. Amazon IAM 생성

 

1. 사용자 이름, 자격증명 유형 선택

2. 권한 설정

나머지는 다음 다음 눌러서 넘겨주시면 됩니다.

사용자 추가가 완료되면  키가 포함된 csv를 다운로드 할 수 있습니다.

 

 

2. github secrets 세팅

 

깃헙 프로젝트를 새로 생성하여 작업한 vue 프로젝트를 업로드 합니다. 

 

Settings탭 > secrets > actions > New repository secret 

아까 S3에서 생성한 key id와 secret을 각각 AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY 이름으로 등록합니다. 

 

 

3. github workflows정의

프로젝트의 루트 디렉토리에

.github/workflows 폴더를 만들고 하위에 deploy.yml 파일을 생성해줍니다.

 

name: Deploy

on:
  push:
    branches:
      - [브랜치명]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Cache modules
        uses: actions/cache@v1
        id: yarn-cache
        with:
          path: node_modules
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: ${{ runner.os }}-yarn-
      - 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
      - name: Use Node.js 12.x
        uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - name: Install dependencies
        run: yarn
      - name: Build
        run: yarn build
      - name: Deploy
        run: aws s3 sync ./dist s3://[버킷명]

 

branches: 쪽에 workflow를 트리거할 branch를 정의해주세요. 저는 main브랜치로 했습니다.

그리고 맨 아래에 S3 버킷명은 본인이 만든 버킷 명으로 수정해주세요. 

 

 

새로운 커밋을 푸시하면 아래와 같이 workflow가 실행됩니다.

 

 

 

웹사이트에 방문해보면 수정사항이 잘 반영되는것을 확인할 수 있습니다.