Github Actions으로 CICD 구축하기 (3) - React 빌드 파일 배포

System Architecture

 

 

 

Github Secrets 설정

1. GitHub 리포지토리에서 Settings로 이동
2. 좌측 메뉴에서 Secrets and variables > Actions를 클릭
3. New repository secret 버튼을 클릭
4. Secrets 추가
   • secret명은 특수문자 포함 불가능
   • workflow에서 secrets. 으로 불러옴 (secrets.DOCKER_REPO)
   • 추가해야할 내용들
     • ENV : .env에 들어갈 내용
     • HOST_PROD : EC2 퍼블릭 IPv4 DNS
     • PRIVATE_KEY : EC2 서버 접속 key. (key는 .pem 형식이어야 한다.)

workflow 작성

on:
  push:
    branches: [ "develop", "main"]
  pull_request:
    branches: [ "develop", "main"]

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

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

      - name: Cache node modules
        uses: actions/cache@v3
        id: cache
        with:
          path: node_modules
          key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.OS }}-node-

      - name: Install Dependencies
        if: steps.cache.outputs.cache-hit != 'true'
        run: npm ci

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

      - name: Build React App
        run: npm run build
        env:
          CI: false

      # 빌드한 파일 tar파일로 묶기
      - name: Package Application
        run: tar -czvf build.tar.gz -C build .

      # EC2서버에 빌드파일 전송
      - name: Transfer build to EC2
        uses: appleboy/scp-action@master
        if: contains(github.ref, 'main')
        with:
          host: ${{ secrets.HOST }}
          username: ubuntu
          key: ${{ secrets.SSH_KEY }}
          source: build.tar.gz
          target: /tmp

      # 빌드파일 배포 (기존에 있던 배포 파일을 지우고 tar 풀고 배포 폴더에 이동시키기)
      - name: Deploy to /var/www/html
        uses: appleboy/ssh-action@master
        if: contains(github.ref, 'main')
        with:
          host: ${{ secrets.HOST_PROD }}
          username: ubuntu
          key: ${{ secrets.PRIVATE_KEY }}
          script: |
            sudo rm -rf /var/www/html/*
            sudo tar -xzvf /tmp/build.tar.gz -C /var/www/html
            sudo rm /tmp/build.tar.gz

• npm ci
  npm install 과 같이 package-lock.json의 파일을 사용해서 패키지 설치. ci 환경을 위해 설계된 명령어로 Npm install 보다 빠름. 로컬환경에서 작업할 때는 적합하진 않음.
• CI: false
  경고(warnings)를 오류(errors)로 간주하지 않도록 하는 역할 특히 eslint 경고와 같은 문제로 인해 빌드가 실패하는 것을 방지