발생한 이슈

Nuxt 프로젝트를 배포하면서 빌드 과정 중 배포 파일이 수정되면서 실제 서비스에서 일부 변경된 페이지가 프리징되는 현상이 발생하게 되었다.

npm run build 커맨드를 통해 배포 시, 프로젝트 크기에 따라 30초에서 1분~2분까지 빌드 시간이 소요되는데

그 시간동안 라이브 서비스가 중단되는 것은 큰 문제였다.

이로 인해 라이브 서비스를 무중단으로 배포할 수 있는 방법을 찾아내는 것이 필요하게 되었다.

이슈 발생 환경

아직 마이그레이션을 진행하지 못한 Nuxt2인 레거시 프로젝트와

최신 신규 프로젝트인 Nuxt3 프로젝트 둘다 빌드 시 해당 이슈가 발생하였다.

빌드한 프로젝트는 EC2를 통해 PM2 라이브러리를 통해 배포 되고 있었으며,

배포 후 pm2 reload 를 통해서 PM2 에 등록된 Node 프로세스를 재실행 시켜주고 있었다.

문제 원인 분석

기존 서비스들이 모두 라이브 서비스 디렉토리에서 직접 빌드되는 것이 가장 직접적인 원인으로 보여진다.

Nuxt는 빌드 시, 기존 .nuxt / .output 디렉터리에 있는 파일들을 삭제하고 새롭게 생성한다.

해당 과정에서 일시적으로 파일들은 없어지거나 불완전한 상태가 되는데,

그 도중에 서버가 요청을 처리하기 위해 없어진 파일들을 찾으면 오류가 발생하는 것이다.

같은 파일을 빌드하더라도, 빌드 과정에서 새로운 해시값을 가진 파일이 생성되어

서버 메모리에 캐시된 이전 경로 정보와 새롭게 생성된 파일 경로는 일치하지 않을 수 있기 때문에

배포 시 문제가 발생하는 것이다.

해결 방법

일반적으로는 Jenkins나 GitHub Actions 등을 통한 CI/CD 파이프라인을 보편적으로 사용한다.

그러나 나는 서버가 보안으로 인해 폐쇄망으로 구성된 상황이였고, 이에 접근하기 위해서는 별도의 DaaS 환경에 접속해서 ssh 로만 접속이 가능하도록 제한된 상태였다. 또한, GitHub Actions를 통한 배포 방식도 고려해 볼 수 있었으나, 별도의 Runner 서버를 구축하기에 비용이 문제가 되어 최대한 이러한 방법은 지양해야만 했다.

이 때문에 내가 고민 끝에 해결한 방법은 Blue-Green Deployment 방식이다.
여기서 Blue는 현재 운영 중인 안정된 버전의 서비스이고, Green은 새롭게 배포되는 버전의 서비스를 의미한다.

여기서는 Blue를 '메인', Green을 '운영'이라고 지칭하여 설명하도록 한다.

메인 폴더에서 Nuxt 프로젝트를 빌드한다. (npm run build)
메인에서 PM2를 재실행한다.
운영 폴더로 메인 폴더에서 배포에 필요한 파일들만 복사한다.
운영 폴더에서 PM2를 실행한다.
메인 & 운영 폴더의 정상 배포 여부를 판단한다.
메인의 PM2를 중단한다.

우선, 철저하게 메인 프로세스와 운영 프로세스를 분리한다.

메인 폴더에서 git pull 이나 npm install 등의 서비스 파일들이 변경되더라도

배포된 운영 프로세스에는 영향이 끼치지 않도록 하기 위해서다.

이 때문에 열려야할 Nuxt 프로젝트의 Port는 2개가 되며,

여기서는 NGINX를 사용했기 때문에, NGINX 에 다음과 같이 Port 를 2개 열어서

두 포트가 모두 열려있는 경우 라운드로빈 방식으로 각 포트에 요청이 할당되도록 구성한다.

upstream service {
    server 127.0.0.1:3000;
    server 127.0.0.1:13000;

문제 해결

해시태그