S3 Bucket, CI/CD(Vue.js)

name: Deploy Vue.js to S3  # GitHub Actions에서 표시될 워크플로우 이름

on:
  push:
    branches:
      - main  # main 브랜치에 push될 때 실행됨

jobs:
  deploy:
    runs-on: ubuntu-latest  # GitHub Actions가 실행될 OS 환경 (Ubuntu 최신 버전)

    steps:
      - name: Checkout repository  # 현재 리포지토리의 코드 가져오기
        uses: actions/checkout@v3

      - name: Create .env file
        run: |
          echo "VUE_APP_BASE_URL=${{ secrets.API_BASE_URL }}" > .env

      - name: Setup Node.js  # Node.js 환경 설정
        uses: actions/setup-node@v3
        with:
          node-version: 18  # Node.js 버전 지정 (18 사용)

      - name: Install dependencies  # npm 패키지 설치
        run: npm install

      - name: Build Vue.js project  # Vue 프로젝트 빌드
        run: npm run build  # 'dist' 폴더 생성됨 (기본 Vue 빌드 경로)

      - name: Deploy to S3  # AWS S3에 배포
        uses: jakejarvis/s3-sync-action@v0.5.1 # GitHub Actions에서 S3로 파일을 업로드할 수 있도록 도와주는 액션
        env:
          AWS_S3_BUCKET: ${{ secrets.S3_BUCKET_NAME }}  # S3 버킷 이름 (GitHub Secrets에서 가져옴)
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}  # AWS 액세스 키
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}  # AWS 시크릿 키
          AWS_REGION: ${{ secrets.AWS_REGION }}  # AWS 리전 (ex: ap-northeast-2 for 서울)
          SOURCE_DIR: "dist"  # Vue.js 빌드 결과물이 위치한 폴더

 

백엔드 CI/CD 보다 훨씬 간편하고 쉽다

 

프로세스

1. main branch에 push될 때 마다
2. github actions가 실행될 환경은? -> ubuntu환경
3.  checkout-> 현재 리포지터리 코드 가져오기
4. github actions의 secret에서 APP_BASE_LINE을 가져와서 env파일을 만든다
5. node.js 환경 설정
6. npm 설치
7. Vue프로젝트 빌드
8. S3에 푸쉬

 

매우매우 쉽다!!