[AWS] S3 + Vue CI/CD 프론트 배포하기

해야겠다 생각만하고 미뤄왔던 S3 + Vue를 이용한 프론트 자동배포를 해보겠습니다.

개발프로젝트에 참여하면서 Vue를 다루는데 좀 익숙해졌기 때문에...

순서

1. node 설치 -> 재부팅
2. Vue설치 npm install vue, npm install -g @vue/cli
3. Vue 프로젝트 생성 및 실행
4. AWS 액세스 키 생성
5. github action에 AWS 액세스 키 등록
6. S3 버킷구성
7. github action CI/CD 구성

npm install vue
npm install -g @vue/cli

 

1. 노드설치

https://nodejs.org/en/

Node.js — Run JavaScript Everywhere

다운로드 후 실행

-> 환경변수 적용해야 하므로 설치완료 후 재부팅

 

2. Vue설치

npm install vue
npm install -g @vue/cli

 

3. Vue 프로젝트 생성 및 실행

vue create [프로젝트명]

#프로젝트 실행
cd [프로젝트]
npm run serve

 

4. AWS 액세스 키 생성

AWS 콘솔 > 계정 클릭 > 보안자격 증명 > 액세스 키 생성

액세스 키 ID 와 비밀 액세스 키를 별도로 기억해 놓을것!

5. github repo secret등록

github repo > Settings > Secrets and variables > New repository secret

 

6. S3 버킷 구성

버킷 생성 > 퍼블릭 액세스 허용 > 정적 웹사이트 호스팅

정적 웹사이트를 허용해도 엔드포인트 접속시 확인불가
버킷 객체에 대한 권한을 설정해주어야 한다.

S3 버킷 > 권한 > 버킷 정책 > 편집 > 정책 생성기

 

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::[버킷명]/*"
    }
  ]
}

7. github Action CI/CD 구성

 github actions > New workflow > workflow 작성

name: client

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-22.04
    steps:
      - name: Checkout source code
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '21'

      - name: Install dependencies
        run: npm install
        working-directory: ./s3-cicd-project

      - name: Build
        run: npm run build
        working-directory: ./s3-cicd-project

      - name: SHOW AWS CLI VERSION
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_EC2_METADATA_DISABLED: true
        run: |
          aws --version

      - name: Sync Bucket
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_EC2_METADATA_DISABLED: true
        run: |
          aws s3 sync \
            --region us-east-1 \
            ./s3-cicd-project/dist s3://my-vue-project \
            --delete

 commit changes 클릭 > 파이프라인 실행됨

 

결과 확인

수정 전

 

파이프라인 확인

수정 후

Vue 라우터를 설치해서 추가 페이지 구성

 

후기

- 생각만으로 해보던걸 직접 구성하니까 예상보다 빠르게 구현할 수 있었다.

- 하지만 간단히 테스트 해본것이지 실제로 사용하기에는 보안이나 workflow 구성을 수정할 필요가 있다.

- Jenkins와 비교해보아도 좋겠지만 github Action의 장점은 CI/CD를 수행할 서버를 직접 구성하지 않아도 된다는 점

- 프론트 배포시 빌드하는 과정이 있으면 S3에 모든 파일을 올리지 않아도 되니까 더 안전하지 않을까? 라는 생각을 해본다.