vite, ec2, github action 을 이용한 배포 자동화!

김인태·2024년 11월 6일
ec2github actionvite
0
post-thumbnail

🤔 개요

전에도 비슷한 글을 쓴 적 있지만, 이번에는 조금 더 자세하게 포스팅 하고자 합니다.

이 글을 왜 쓰게 돼었느냐?!

그럼 왜 썼는지 알기 전에 간단하게 제 배포 시퀀스에 대해서 말씀드리겠습니당 ㅎㅎ

  1. 메인 브랜치에 푸시 한다
  2. 터미널을 실행시킨다.
  3. 폴더에가서 ssh 명령어를 통해 ec2 인스턴스에 접속
  4. 프로젝트 폴더에 들어간다
  5. 업데이트 된 프로젝트를 내려받는다
  6. 깃 유저네임과 패스워드를 입력한다
  7. 의존성 설치를 한다
  8. 빌드한다
  9. 프로젝트를 재 실행시킨다

와 !! 간단하다~! 9개면 개꿀따리다~ 라고 생각하시는 개발자분 없으시겠죠…???

이 귀찮고 복잡한 프로세스를 수동으로 다 입력해야된다는 말입니다…ㅠㅠ

그렇다면 이 귀찮은 프로세스를 어떻게 해결 할 수 있느냐? 바로바로

github action 입니다!

GitHub Action은 GitHub 저장소에서 소프트웨어 개발 워크플로우를 자동화하는 도구입니다. 코드 변경 시 자동으로 빌드, 테스트, 배포 등의 작업을 수행할 수 있어 개발 프로세스를 간소화하고 효율성을 높입니다.

저는 저 귀찮은 프로세스를 해결하기 위해서 github action 이라는 도구를 사용했고,

어떻게 사용했는지 간단하게 말씀드리겠습니다!

이야기 하기 전에 일단 CI/CD 라는 단어 먼저 짚고 가면 좋을 것 같아요!

많이는 들어봤지만 정확한 개념을 짚고 넘어가봅시다!

CI (Continuous Integration)

CI란? GPT 선생님께 여쭈어봤습니다

  • 목적: 코드의 지속적인 통합을 통해 문제를 초기에 발견하고 해결하는 것.
  • 동작 방식: 개발자들이 각자의 코드를 자주 main branch나 공유 브랜치에 병합하면서 빌드와 테스트를 자동화합니다.
  • 주요 기능:
    • 코드 병합 시 자동으로 테스트와 빌드를 수행하여 에러나 충돌을 조기에 발견.
    • 코드 품질 검사나 정적 분석 도구 등을 통해 코드의 일관성 유지.
  • 장점: 코드 병합 시 발생할 수 있는 문제를 빠르게 해결하여 개발 속도와 품질을 높입니다.
  • 요약 : CI는 코드 병합과 테스트, 빌드를 자동화하여 코드 품질을 유지하는 데 초점을 둡니다.
  • 다른 CI 도구들: Jenkins, Travis CI, CircleCI

CD (Continuous Deployment)

CD 란?

CI 이후의 단계로 CD는 Continuous Delivery와 Continuous Deployment로 나뉩니다.

Continuous Delivery

  • 목적: 언제든지 배포 가능한 상태의 코드를 유지하는 것.
  • 동작 방식: CI 이후 QA, 스테이징 환경까지의 배포를 자동화하여 최종 프로덕션 배포만 수동으로 진행.
  • 주요 기능:
    • 프로덕션 환경 이외의 배포 자동화.
    • 코드가 릴리즈 준비 상태로 유지되며 최종 배포는 사람이 결정.
  • 장점: 안정적인 릴리즈 준비 상태를 유지하여 배포의 안정성과 빈도를 높입니다.

Continuous Deployment

  • 목적: 코드의 변경사항이 발생할 때마다 프로덕션에 자동 배포하는 것.
  • 동작 방식: CI와 CD 파이프라인을 통해 코드 변경 후 모든 과정을 자동화하여 프로덕션에 배포.
  • 주요 기능:
    • 코드가 자동으로 프로덕션 환경에 배포되며, 변경사항이 즉시 반영됨.
  • 장점: 사용자에게 빠르게 기능을 제공하여 피드백을 즉시 반영할 수 있습니다.
  • Continuous Deployment 예: AWS CodePipeline, GitLab CI/CD

😃 결론적으로는 CI/CD는 코드의 변경사항이 발생했을 때 프로덕션에 배포를 하는데 , 하기전에 테스트, 빌드 등을 할 수 있는 것이군요!

저는 CI/CD 를 모두 github action으로 해결했다~

그렇다면 어떻게 사용했는지 workflow 한 번 보자구요~

👻 Workflow

name: 서버 배포

on:
  push:
    branches:
      - main

jobs:
  deploy:
    name: 서버에 배포
    runs-on: ubuntu-22.04

    steps:
      - name: 리포지토리 체크아웃
        uses: actions/checkout@v3

      - name: SSH 클라이언트 설치
        run: sudo apt-get install -y openssh-client

      - name: Git을 SSH로 설정
        run: |
          git remote set-url origin git@github.com:${{ secrets.GITHUB_REPOSITORY }}

      - name: SSH를 통해 서버에 배포
        uses: appleboy/ssh-action@v0.1.5
        with:
          host: ${{ secrets.SSH_HOST }}
          username: ${{ secrets.SSH_USERNAME }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          port: ${{ secrets.SSH_PORT || 22 }}
          script: |
            # nvm 설치 및 Node.js 버전 관리
            export NVM_DIR="$HOME/.nvm"
            [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # nvm 초기화
            [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # bash_completion 초기화

            # 원하는 Node.js 버전 설치 및 사용
            nvm install 20.9.0
            nvm use 20.9.0

            node -v
            npm -v

            # 프로젝트 디렉토리로 이동 및 최신 코드 가져오기
            echo "https://${{ secrets.GH_USERNAME }}:${{ secrets.GH_PAT }}@github.com" > ~/.git-credentials
            git config --global credential.helper store

            cd ~/프로젝트이름
            git reset --hard
            git pull origin main

            # 의존성 설치
            npm install
            npm run build

            # PM2로 애플리케이션 재시작
            pm2 restart 프로젝트이름

1. 워크 플로우 생성!

천천히 워크 플로우를 보면서 말씀드릴게요!

일단 프로젝트의 루트 폴더에 .github > workflows > [워크플로우 이름].yml 로 파일을 만드셔야해요!

레포지토리의 Action 에 들어가셔서 new workflow를 통해 생성하셔도 상관은 없습니다!

2. 어떤 상황에서 워크플로우를 실행시킬 것인가?

저는 dev 브랜치에서 개발이 완료되고, 테스트를 통과했을 때 main 브랜치와 병합합니다.

그래서 main 브랜치에 push 됐을 때 이 워크플로우가 실행됐으면 했습니다!

name: 서버 배포  //원하는 workflow 이름!

on:
  push: // push가 workflow를 발생시키는 트리거!
    branches: // main 브랜치에서~
      - main

3. 어떤 환경에서 워크플로우를 실행시킬 것인가?

현재 ec2 는 ubuntu 22.04 버전이고, node 는 20.9.0 버전을 사용하고 있습니다!

   name: 서버에 배포
    runs-on: ubuntu-22.04

4. 무엇을 할 것인가?

   steps:
      - name: 리포지토리 체크아웃
        uses: actions/checkout@v3

현재 워크플로우 실행 환경의 파일 시스템에 준비되며 이후 run에서 자유롭게 접근하고 수정할 수 있습니다.

     - name: SSH 클라이언트 설치
        run: sudo apt-get install -y openssh-client

SSH를 통해 서버에 접속하기 위해 OpenSSH 클라이언트를 설치합니다. github은 https가 아니라 ssh로 인증을 하기 때문에 필요합니다

     - name: Git을 SSH로 설정
        run: |
          git remote set-url origin git@github.com:${{ secrets.GITHUB_REPOSITORY }}

Git 리모트를 SSH 방식으로 변경하여 서버에 SSH 키를 사용해 인증할 수 있도록 설정합니다.

   - name: SSH를 통해 서버에 배포
        uses: appleboy/ssh-action@v0.1.5
        with:
          host: ${{ secrets.SSH_HOST }}
          username: ${{ secrets.SSH_USERNAME }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          port: ${{ secrets.SSH_PORT || 22 }}
          script: |
            # nvm 설치 및 Node.js 버전 관리
            export NVM_DIR="$HOME/.nvm"
            [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # nvm 초기화
            [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # bash_completion 초기화

            # 원하는 Node.js 버전 설치 및 사용
            nvm install 20.9.0
            nvm use 20.9.0

            node -v
            npm -v

            # 프로젝트 디렉토리로 이동 및 최신 코드 가져오기
            echo "https://${{ secrets.GH_USERNAME }}:${{ secrets.GH_PAT }}@github.com" > ~/.git-credentials
            git config --global credential.helper store

            cd ~/프로젝트이름
            git reset --hard
            git pull origin main

            # 의존성 설치
            npm install
            npm run build

            # PM2로 애플리케이션 재시작
            pm2 restart 프로젝트이름

저는 기본적으로 인스턴스에 nvm을 설치해서 사용중이기 때문에 nvm을 설치하고 사용하는 명령어를 추가했습니다.

npm을 인식하지 못하는 문제를 많이 겪었기 때문에 다시 한 번 설치해줬습니다.

혹여나 build전에 reset 하는 것은 종종 build 하는 과정에서 다른 파일들이 설치될 수 있기 때문에 그것을

초기화 하기 위해서 reset 해주고 다시 pull 했습니다!

짜잔~ 아주아주 잘됩니다~!!!

이 게시물이 다른분들이 스크립트 작성하는데 도움이 되길 바라며..
혹시나 안되거나 의문점 있으시면 댓글 달아주시면 감사하겠습니다 ㅎㅎ

profile
김인태
새로운 걸 배우는 것을 좋아하는 프론트엔드 개발자입니다!
이전 포스트

PDF Viewer 와 CORS 에러

다음 포스트

Vitest! test 라이브러리 도입하기!

0개의 댓글