Nginx / PM2 / Vue/Nuxt - Load Banlancing (로드밸런싱)

Nginx 에서 PM2 패키지 모듈을 이용하여 Vue/Nuxt App 인스턴스를 로드밸런싱 처리 하는 것에 대하여 포스팅 합니다.

이 방식은 어떻게든 처리하여 테스트를 보겠다는 목적이 있으나, 수정되어야 하거나 

다른 효율적이고 세련된 방법이 있으면 답글/공유 부탁드립니다. ^^ 

( 제가 많이 부족합니다. ^^;; )

테스트 환경은 MacOS X(Mojave) 입니다. 

먼저 이 작업을 진행하는 과정에서 구글링을 통하여 다음 포스팅들로 구조 이해하고 정리하였습니다.

• How to load Balancing NodeJs apps using Nginx?
• Docker, NodeJS, Nginx! 너로 정했다!

일단 내가 원하는 다음과 같았습니다.

프로젝트 빌드 후 운영모드 (Production) 로 각각의 포트로 인스턴스를 생성하여 

Nginx 80 포트로 이 인스턴스들을 로드 밸런싱

하는 것 이었습니다.

그래서 먼저 이 구성을 테스트 해보기에 다음과 같은 환경 구성이 필요합니다.

• Nginx : https://nginx.org
• Node.js : https://nodejs.org
• Nuxt.js : https://nuxtjs.org/
• PM2 : http://pm2.keymetrics.io/

위 내용들을 구성하기에 이전에 포스팅한 내용을 참고하셔도 됩니다. "Node.js 를 우분투 환경설정으로 이동"

먼저 위 환경들이 모두 준비되었다는 전제로 먼저 Nginx 부터 설정해 줍니다.

upstream node {
        least_conn;
        server localhost:3000;
        server localhost:3001;
        server localhost:3002;
}

server {
    listen 80;
    server_name local.example.com; #디렉토리 경로

    location / {
      proxy_pass http://node;
      proxy_set_header X-NginX-Proxy            true;
      proxy_set_header Host                     $host;
      proxy_set_header X-Real-IP                $remote_addr;
      proxy_set_header X-Forwarded-For          $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto        $scheme;
      proxy_set_header X-Client-Verify          SUCCESS;
      #proxy_set_header X-Client-DN              $ssl_client_s_dn;
      #proxy_set_header X-SSL-Subject            $ssl_client_s_dn;
      #proxy_set_header X-SSL-Issuer             $ssl_client_i_dn;
      proxy_read_timeout 1800;
      proxy_connect_timeout 1800;
      proxy_redirect off;
    }

    log_not_found off;
}

위와 같이 작성하여 nginx/( site-***, servers ) conf 파일들이 있는 경로에 example.conf 파일을 생성합니다. (파일명 무관)

이제 nginx 를 재시작 하면 해당 경로의 80포트로 접속되는 것을 확인할 수 있을 것 입니다.

 

그리고 Nuxt App 에 있는 

package.json 파일을 수정합니다.

  "scripts": {
    "debug": "node --inspect node_modules/.bin/nuxt && nuxt --inspect",
    "dev-debug": "node --inspect node_modules/.bin/nuxt",
    "st-dev": "DEBUG=nuxt:*,app:* nuxt",
    "dev": "nodemon --watch api --exec \"nuxt\"",
    "build": "nuxt build",
    "start-ins1": "PORT=3000 nuxt start",
    "start-ins2": "PORT=3001 nuxt start",
    "start-ins3": "PORT=3002 nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  }

위에 빨간색으로 강조되어있는 부분이 중요하니까 강조를 했겠죠? ㅎㅎㅎ

이 처럼 운영 환경에 포트를 부여하여 인스턴스를 시작하는 것 입니다.

저는 위 부분을 3 번이나 실행시켜야 함에 불편하여, 배쉬스크립트 파일로 작성하였습니다.

echo "Find Service Directory"
cd ~/{ workSpace/Source }

echo "Now :" && pwd

echo "Project Building..."
npm run build

echo "Project Open.."

echo "START INSTANCE 1..."
pm2 start npm --name "example.service1" -- run start-ins1

echo "START INSTANCE 2..."
pm2 start npm --name "example.service2" -- run start-ins2

echo "START INSTANCE 3..."
pm2 start npm --name "example.service3" -- run start-ins3

그리고 배쉬스크립트 파일을 실행시키면 우르르 빌드하고 다음처럼 인스턴스를 활성화 시킵니다.

활성화된 인스턴스를 확인하기 위하여 pm2 list 를 이용하여 확인합니다.

'

이제 브라우저에 80 포트를 띄우고 localhost 포트를 300, 3001, 3002 로도 접속을 해봅니다.

그리고 인스턴스를 하니씩 중지시켜가면서 80 포트에서도 구동이 안되는지 학인.