[CI/CD] 배포를 자동화하는 방법: 깃액션과 SSH로 EC2에 프론트엔드를 배포하기🚀

배포를 자동화하는 방법: 깃액션과 SSH로 EC2에 프론트엔드를 배포하는 이야기 🚀

개발을 하다 보면, 배포 과정이 정말 귀찮을 때가 있다. 특히나 프론트엔드 배포처럼 간단하지만 반복적인 작업을 계속해야 할 때는 더 그렇다. 매번 코드를 수정할 때마다 git push를 하고, EC2에 접속해서 git pull, 그리고 npm run dev를 하는 일이 반복되다 보면 정말 지루해진다. 이 단순하고 반복적인 작업을 자동화할 수는 없을까? 바로 그 해답이 CI/CD다! 💡

문제점: 수동 배포는 너무 귀찮다 😩

배포 과정을 자동화하지 않으면, 다음과 같은 흐름으로 배포 작업을 해야 한다:

1. 로컬에서 코드를 수정하고 git push 한다.
2. AWS EC2 서버에 접속한다.
3. 서버에서 git pull 명령어를 실행한다.
4. 최신 코드로 npm run dev를 실행한다.

이 과정을 매번 하다 보면 어느 순간부터 귀찮다는 생각이 든다. 게다가 사람이 하는 일은 실수가 발생하기 마련이다. 간단한 배포인데 왜 이렇게 복잡할까? 🤔 자동화가 답이다.

해결책: CI/CD로 배포 자동화하기! ✨

이런 반복적인 작업을 깃액션(GitHub Actions)을 통해 자동화할 수 있다. 깃액션을 사용하면 git push 한 번으로 EC2 서버에 자동으로 배포가 진행되도록 설정할 수 있다. 이제 수동으로 EC2에 접속하고 명령어를 실행하는 대신, 깃액션이 알아서 해준다. 이 과정에서 SSH 키를 이용해 안전하게 EC2 서버에 접속하고, 필요한 명령어를 실행한다.

SSH 시크릿 키 설정 🎯

여기서 중요한 점은 SSH 시크릿 키 설정이다. 깃액션 시크릿에 프라이빗 키를 저장할 때, 개행 없이 한 줄로 넣어야 한다. 또한 큰따옴표를 포함하지 않고, -----BEGIN OPENSSH PRIVATE KEY-----부터 -----END OPENSSH PRIVATE KEY-----까지 그대로 입력해야 한다. 실수로 개행이나 따옴표를 포함하면 배포 과정에서 SSH 연결에 실패할 수 있다. 😵

백그라운드 실행을 위한 tmux 사용

배포 스크립트에서 저는 백그라운드 실행을 위해 tmux를 사용했다. 이렇게 하면 배포 후 EC2에서 실행 중인 서버가 계속 돌아가도록 설정할 수 있다. 이 내용을 run.sh에 넣어 EC2 서버에서 백그라운드로 리액트 앱이 실행되도록 했다.

디버깅을 위한 깃액션 워크플로우 수정 🛠️

자동 배포를 설정하면서 SSH 연결에 문제가 생길 수 있기 때문에, 중간에 SSH 연결을 테스트하는 과정을 추가했다. 이 명령어는 SSH 키가 제대로 작동하는지 미리 확인해주며, 줄바꿈 문제를 해결하기 위해 tr 명령어로 윈도우와 유닉스 간의 줄바꿈 차이를 처리했다.

수정된 깃액션 워크플로우 코드 👇

name: React App CI/CD

on:
  push:
    branches:
      - main
    paths:
      - 'FE/**'
  pull_request:
    branches:
      - main
    paths:
      - 'FE/**'

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Check out code
      uses: actions/checkout@v4

    - name: Set up Node.js
      uses: actions/setup-node@v4
      with:
        node-version: '18'

    - name: Install dependencies
      run: |
        cd FE/pdf_quiz
        npm install

    - name: Build the React app
      run: |
        cd FE/pdf_quiz
        npm run build

  deploy:
    runs-on: ubuntu-latest
    needs: build
    env:
      EC2_HOST: ${{ secrets.EC2_REACT_HOST }}
      EC2_USER: ${{ secrets.EC2_USER }}
      SSH_KEY: ${{ secrets.EC2_SSH_REACT_KEY }}

    steps:
    - name: Check out code
      uses: actions/checkout@v4

    - name: Check environment variables
      run: |
        echo "EC2_HOST: $EC2_HOST"
        echo "EC2_USER: $EC2_USER"

    - name: Add SSH key to agent
      run: |
        echo "$SSH_KEY" | tr -d '\r' > key.pem  # Windows와 Unix 줄바꿈 문제 해결
        chmod 400 key.pem
        eval "$(ssh-agent -s)"
        ssh-add key.pem

    - name: Test SSH connection
      run: |
        ssh -o StrictHostKeyChecking=no -i key.pem $EC2_USER@$EC2_HOST "echo Connection successful"

    - name: Deploy to EC2
      run: |
        ssh -o StrictHostKeyChecking=no -i key.pem $EC2_USER@$EC2_HOST << 'ENDSSH'
          echo "Running run.sh on EC2"
          tmux new-session -d -s mysession 'sh run.sh'  # 백그라운드에서 run.sh 실행
          echo "Finished running run.sh"
        ENDSSH

결론: 귀찮음을 해결하는 자동화 🏆

CI/CD를 통해 배포 과정을 자동화하면, 더 이상 수동으로 EC2에 접속해 배포할 필요가 없다. 깃에 커밋하고 푸시만 하면 자동으로 배포가 진행되니, 얼마나 편한가! 게다가, 오류가 발생해도 자동화된 프로세스 덕분에 쉽게 문제를 파악하고 수정할 수 있다.

자동화는 개발자의 귀찮음을 덜어주는 강력한 도구다. 이제 반복적인 작업을 자동화하고, 더 중요한 일에 집중할 수 있게 된다. 🌟