[배포] Github Actions 활용한 Vue 프론트엔드 자동배포

 

Secret 설정

• EC2 서버  IP주소와 Keypem 파일 내용 저장하는 secret을 만들어줬다. 추후 EC2 서버에 접속 및 권한 설정과 push된 내용 cp로 복붙이동을 위해선 필요하기때문에 추가해줬다

---

Workflow 작성

진행 과정

1. 코드 체크아웃(GitHub Action이 매번 새로 실행되기 때문에 저장소 코드 가져오는 명령어 필요)
2. Node.js 설정 및 의존성 설치, npm을 이용한 vue내용 빌드
3. 이전에 저장해뒀던 secrets를 활용 및 scp명령어 통해서 폴더 해당 ec2서버에 저장
4. ec2 접속 및 nginx가 해당 폴더에 실행 권한 가질 수 있도록 설정 변경
5.  

name: Deploy Frontend to EC2

on:
  push:
    branches:
      - dev/fe

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      # 1. 코드 체크아웃
      - name: Checkout repository
        uses: actions/checkout@v3

      # 2. Node.js 설정 및 의존성 설치
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18' # Node.js 버전

      - name: Install dependencies and build
        run: |
          npm install
          npm run build
      # 3. EC2에 dist 폴더 업로드
      - name: Upload dist folder to EC2
        uses: appleboy/scp-action@v0.1.2
        with:
          host: ${{ secrets.SERVER_IP }}
          username: ec2-user
          key: ${{ secrets.SSAFYTRIP_KEY }}
          source: dist/*
          target: /home/ec2-user/dist

      # 4. EC2에서 권한 설정
      - name: Set permissions for dist folder
        run: |
          ssh -o StrictHostKeyChecking=no -i ${{ secrets.SSAFYTRIP_KEY }} ec2-user@${{ secrets.SERVER_IP }} << 'EOF'
          sudo chmod -R 755 /home/ec2-user/dist
          sudo chown -R nginx:nginx /home/ec2-user/dist
          EOF

 

문제점

1. Vue 파일 참조 오류

• 문제 내용: index.js에서 참조하는 Vue파일이 존재하지 않는 오류
• 원인: 파일명 대소문자 차이로 인해 Ubuntu 환경에서는 파일 참조 오류 발생(window에서 수동 배포시에는 os특성상 대소문자 구분하지 않는 case-insenstive 특성 때문에 문제 발생하지 않았음)
• 해결 방법: local에서 작업하고 다시 git push 하면 git에서도 해당 내용 문제 발생x, 따라서 Github repo에서 직접 파일 명 수정 후 커밋하여 해결

2. SSH 오류

• 문제 내용: SSH 키 파일 사용 시 권한 오류 발생
• 원인: SSH 키 파일이 권한이 과도하게 설정되어 보안 정책에 위배
• 해결 방법: chmod 400 명령을 통해 키 파일의 읽기 전용 권한만 부여, Workflow에 해당 내용 추가

3. dist 폴더 덮어쓰기, 삭제오류

• 문제 내용: scp명령어 사용해서 dist폴더 덮어쓰기를 할려고 하면 기존 dist폴더를 삭제하지 못하는 문제 발생
• 원인: 현재 실행, 수정, 삭제 권한이 nginx에게 있음, 따라서 다시 ec2-user에게 권한 위임필요
• 해결 방법: chown -R 명령어 사용해서 해결 및 폴더 삭제 

 

문제 수정 후 최종 Workflow

name: Deploy Frontend to EC2

on:
  push: 
    branches:
      - dev/fe/68 # dev/fe 브랜치에 푸시될 때 실행

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      # 1. 코드 체크아웃
      - name: Checkout repository
        uses: actions/checkout@v3

      # 2. Node.js 설정 및 의존성 설치
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18' # Node.js 버전
          
      - name: Install dependencies and build
        run: |
          npm install
          npm run build

     # 3. SSH 키 파일 생성
      - name: Create SSH key file
        run: |
          echo "${{ secrets.SSAFYTRIP_KEY }}" > /tmp/ssafytrip-key.pem
          chmod 400 /tmp/ssafytrip-key.pem

      # 4. 기존 dist 폴더의 소유권 변경 및 삭제
      - name: Prepare EC2 for new deployment
        run: |
          ssh -o StrictHostKeyChecking=no -i /tmp/ssafytrip-key.pem ec2-user@${{ secrets.SERVER_IP }} << 'EOF'
          sudo chown -R ec2-user:ec2-user /home/ec2-user/frontend/dist || true
          sudo rm -rf /home/ec2-user/frontend/dist
          EOF

      # 5. EC2에 dist 폴더 업로드
      - name: Upload dist folder to EC2
        uses: appleboy/scp-action@v0.1.2
        with:
          host: ${{ secrets.SERVER_IP }}
          username: ec2-user
          key: ${{ secrets.SSAFYTRIP_KEY }}
          source: dist/*
          target: /home/ec2-user/frontend/dist
          overwrite: true  # 덮어쓰기 활성화

      # 6. EC2에서 권한 설정
      - name: Set permissions for dist folder
        run: |
          ssh -o StrictHostKeyChecking=no -i /tmp/ssafytrip-key.pem ec2-user@${{ secrets.SERVER_IP }} << 'EOF'
          sudo chmod +x /home/ec2-user/frontend
          sudo chmod -R 755 /home/ec2-user/frontend/dist
          sudo chown -R nginx:nginx /home/ec2-user/frontend/dist
          EOF