Github Action + NCP + Nginx로 간단 CI / CD 구성하기

Github Action + NCP + Nginx로 간단 CI / CD 구성하기

요구사항

sara-mara 웹 사이트를 꾸준히 배포하고, 관리하기 위하여 CI / CD를 구축하기로 하였다. 우리 프로젝트의 경우 프런트와 백엔드 코드를 따로 관리하고 있기 때문에 나는 프런트 CI/CD를 맡아서 작업하기로 하였다.

Github Action 활용하기

우선, 우리 프로젝트는 Naver Cloud Platform과 Nginx로 React를 배포하고 있었다. 그렇기 때문에 도커 + 젠킨스 조합 보다 Github Action을 활용하여 쉽게 배포할 수 있었다.

deploy yml 파일을 만들어 main 브랜치에 푸쉬 됐을 때 Workflow가 실행되도록 코드를 작성하였다. 간단하게 설명하자면, main에서 푸시가 됐을 때, SSH를 통해 서버 컴퓨터에 원격접속하고, 새로운 프로젝트를 빌드, nginx를 재가동하는 코드이다.

처음 이게 될려나? 걱정했지만, appleboy라는 천재개발자가 SSH로 서버에 접속할 수 있게 만든 Github Action을 통해 이 과정을 쉽게 처리 할 수 있었다.

name: deploy

on:
  push:
    branches:
      - main
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: SSH-deploy
        uses: appleboy/ssh-action@master
        with:
          host: ${{secrets.REMOTE_IP}}
          username: ${{secrets.SSH_ID}}
          password: ${{secrets.REMOTE_SSH_KEY}}
          port: ${{secrets.REMOTE_SSH_PORT}}
          script: |
            whoami
            cd /app/sara-frontend
            git pull origin main
            npm install --force
            npm run build
            nginx -s reload

위의 오픈소스 깃헙에서 자세한 설명을 해주고 있지만, SSH가 익숙하지 않은 나한테는 조금 어려웠고, secrets의 키가 조금 틀리다면, 불친절한 에러코드와 함께 많이 헷갈렸다.

수 많은 실패와 불친절한 에러코드

사실 간단하게 생각하면 Putty로 접속하기 위해 필요한 정보를 Github Secrets를 통해 주는 것이다.
host : 공인 접속 IP를 의미한다.
username : 접속 계정 ID를 의미한다.
password : SSH 접속 패스워드를 의미한다.
port : SSH 접속을 위해 열어놓은 포트를 의미한다.

만약 Putty를 사용한다면 username@host p -port로 생각하면 된다.

아래에 스크립트는 내가 SSH에 접속했을 때 필요한 작업을 작성해 주면 된다.

배포 성공!

배포성공

사실 싸피에서 프로젝트를 경험할 때 도커와 젠킨스를 시도해 보며 수많은 에러와 실패를 해본 경험이 있기 때문에 CI, CD는 나에게 있어 엄청 어려운 작업처럼 느껴졌다. 하지만 Github Action과 관련된 오픈소스는 이러한 작업을 통해 쉽게 작업할 수 있었고, 이전에 Github Action을 활용하여 스토리북을 자동배포 한 경험이 도움이 된 것 같다.