NextJS + Nginx 조합으로 하위경로(SubPath) 사용해서 2개 프로젝트 배포하기

"www.example.com"  이란 도메인을 가진 서버를 가지고 있다고 가정을 합시다.

만약 "www.example.com"  에는 메인 웹 프로젝트를 배포하고,

"www.example.com/log"  라는 도메인에는 로그 확인용 서브 웹 프로젝트를 별도로 배포하고 싶다면

아래 방식을 사용하시면 됩니다.

 

환경

• NextJS
  • 매인 웹 프로젝트 - 포트 번호 : 3000
  • 서브 웹 프로젝트 - 포트 번호 : 3001
• Nginx
• Ubuntu(20.04)

 

원리

• NextJS : Proxy라는 것을 사용하여 하위경로로 온 요청을 해당 프로젝트로 연결해줍니다.
• Nginx : UpStream을 통해 해당 경로로 온 요청을 원하는 포트로 연결해줍니다.

 

설정

nginx

파일 경로 및 이름 : /etc/nginx/sites-available/default

server {
 listen 80;
 listen [::]:80;

 root /websites/www; # 각자 서버의 상황에 맞게 설정
 index index.php index.html index.htm;
 server_name www.example.com;

 location / {
        proxy_pass http://localhost:3000; # 메인 웹 프로젝트가 3000번 포트로 배포되어있는 상황
        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;
 }
 location /log {
        proxy_pass http://log;
        proxy_set_header X-Real_IP $remote_addr;
 }
}
upstream log{
 server 127.0.0.1:3001; # 서브 웹 프로젝트가 3001번 포트로 배포되어있는 상황
}

 

일반적으로 nginx를 설치할 경우, /etc/nginx/sites-available 폴더에 default.conf 파일이 존재합니다.

해당 파일에서 설정을 위 코드처럼 적용을 해주시면 됩니다.

 

location / {} 블록은 3000번 포트로 배포된 메인 웹 프로젝트를 80번 기본 포트로 연결하도록 설정하는 블록입니다.

location /log {} 블록은 /log로 들어온 요청을 proxy 처리하여 3001번 포트로 연결하도록 설정하는 블록입니다.

 

만약 default를 수정하지 않고 새로 파일을 만드셔서 적용하신다면

sudo ln -s /etc/nginx/sites-available/[새로 만든 파일명] /etc/nginx/sites-enabled/[새로 만든 파일명]

 

이렇게 심볼릭 링크를 설정해주셔야 합니다. 그리고 설정이 default와 겹친부분은 없는지 확인하셔야 합니다.

설정을 저장 후 nginx를 다시 시작해주셔야 합니다.

 

다시 시작하는 방법은 많지만 저는 아래 명령어를 사용합니다.

sudo systemctl restart nginx

 

 

NextJS(메인 웹 프로젝트)

파일 경로 및 이름 : /next.config.js

/** @type {import('next').NextConfig} */

const nextConfig = {
  output: "standalone",
  reactStrictMode: false,
  async rewrites() {
    return [
      {
        source: "/log/:path*", // /log로 시작하는 요청은 아래 destination으로 보냄
        destination: "http://127.0.0.1:3001/log/:path*",
      },
    ];
  },
};

module.exports = nextConfig;

 

이렇게 설정하면 앞에 /log가 붙은 요청은 메인 웹 프로젝트에서 처리하는것이 아니라,

전부 3001번 포트로 전송한다는 의미입니다.

 

NextJS(서브 웹 프로젝트)

파일 경로 및 이름 : /next.config.js

const nextConfig = {
  output: "standalone",
  reactStrictMode: true,
  basePath: "/log",
  async rewrites() {
    return [
    
      {
        source: '/:path*',
        destination: "http://127.0.0.1:3001/:path*",
        basePath: false,
      },
    ];
  },
};
module.exports = nextConfig;

 

basePath를 nginx에서 upstream으로 설정한 경로와 동일하게 설정해줍니다.

이제 서브 웹 프로젝트에서는 요청하는 경로에 앞에 /log가 있으면 본인이 처리한다는 의미입니다.

basePath에 대한 자세한 설명은 공식링크 를 통해 확인하실 수 있습니다.

 

단 rewrites에서 "www.example.com/log"로 오는 요청을  "www.example.com:3001/path"로 처리하는 이유는,

서브 웹 사이트 내부 로직에서 페이지 이동 혹은 이미지 위치 등에서는 /log가 없는 링크로 작동하기 때문입니다.