Vue Github Action & S3 배포하기

 

요즘은 배포 자동화로 편리하게 배포를 하는 것 같아서 Github Action에 대해 알아보았다.

우선 AWS 계정이 있어야 하고, 배포할 Git Repository가 있어야 한다. 

 

 

우선 S3 버킷을 생성해야 하는데, 특별한 설정은 없고 모든 퍼블릭 엑세스 차단만 해제하여 버킷을 하나 만든다.

 

그리고 해당 버킷 속성에서, 버킷 정책을 들어간다. 정책을 만들기 위해 정책 생성기를 누른다.

 

 

위와 같이 설정한 후, Amozon Resource Name은 정책 생성기 버튼을 누른 페이지에 있는 버킷 ARN을 복사한 후 

뒤에 /*을 붙여준다.

 

예시: arn:aws:s3:::hoon-github-action/*

 

정책을 만들었다면, 복사하여 붙여넣고 저장한다.

 

 

그리고 사용자를 추가해야한다. AWS에 IAM을 검색하여 사용자 페이지로 간 후, 사용자 추가를 클릭한다.

 

 

프로그래밍 방식 엑세스를 체크한다. 사용자 이름은 편한대로 한다.

 

기존 정책 직접 연결 클릭 후, AmazonS3FullAccess를 체크해주고 넘어간다. 이후 3,4번은 계속 다음으로 체크하면 

사용자가 생성되고, Access key가 나오는데 여기서만 볼 수 있기 때문에 자기만 볼 수 있는 곳에 저장해두자. (2개 모두)

 

이제 배포할 Repository Settings로 가서, Secrets에서 위의 키를 추가해줘야한다. 아래처럼 추가해주자.

 

 

키까지 추가가 완료되었다면, Actions에서 설정이 필요하다. 

Actions를 클릭하고, Simple workflow에 Set up this workflow를 클릭한다. 

위 방식은 간단하게 어떤 구조로 프로세스가 진행되는지 쉽게 알기 위함이다. 

 

 

위 파일을 커밋하고, 간단하게 보면 어떤식으로 구성이 되어 있는지 확인할 수 있다.

이제 코드를 직접 수정해보자. 파일 이름은 원하는대로 해도 상관없다. 

 

name: deploy-to-s3-example

on: 
  push:
    branches: [ master ]

jobs: 
  build: 
    runs-on: ubuntu-18.04
    steps:
      - name: git clone
        uses: actions/checkout@v2

      - name: npm install
        run: npm install 

      - name: build
        run: npm run build
      
      - name: deploy
        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://hoon-github-action

 

여기서 env 쪽을 보면, 변수를 사용하고 있는데 아까 Settings에서 설정한 변수다. 아래 dist s3에는 s3 프로젝트 이름을 적는다.

이제 master로 push하면, Github Actions 페이지에서 자동으로 배포가 되는 걸 확인할 수 있다.

 

 

하나를 깜빡했다. AWS 버킷 -> 속성에서 정적 웹사이트 호스팅 설정을 해줘야 한다. 

호스팅될 엔드포인트도 여기서 확인할 수 있다. 

 

정적 웹 사이트 호스팅을 활성화해주고, 인덱스 문서를 설정해주자.

 

이로써 master 브랜치에 push 할 때마다 Github Action이 자동 배포 프로세스를 진행한다.