현대 웹 개발은 통합된 애플리케이션에서 다양한 사용 사례를 처리할 수 있는 유연성과 확장성을 요구합니다. 이와 관련하여 두 가지 아키텍처 패턴이 있습니다: 멀티 존(Multi-Zone)과 멀티 테넌트(Multi-Tenant)입니다. 이제 이들이 무엇인지, 두 패턴의 차이점, 그리고 각각을 어떻게 활용하는지를 비유를 들어 실제 예와 함께 설명하겠습니다.

멀티 존 아키텍처란?

Next.js의 멀티 존 아키텍처는 여러 개의 Next.js 애플리케이션을 하나의 웹사이트로 결합할 수 있게 해줍니다. 각 존은 독립적으로 개발되고 배포되는 별도의 애플리케이션이 될 수 있지만, 동일한 도메인 아래에서 제공됩니다.

각 상점이 독립적으로 소유되고 관리되는 쇼핑몰을 상상해 보세요. 모든 상점이 같은 위치와 입구를 공유하지만, 각 상점은 독립적으로 운영될 수 있습니다 — 서로 다른 제품, 직원 및 브랜딩을 갖추고 있습니다 — 하지만 쇼핑몰은 방문객들에게 통합된 경험을 제공합니다.

Next.js에서의 작동 방식:

각 상점(존)은 별도의 Next.js 애플리케이션입니다 (예: 마케팅 사이트, 블로그, 관리 패널).
모든 존은 example.com과 같은 하나의 도메인 아래에서 제공됩니다.

멀티 존을 언제 사용하는가

팀 독립성: 서로 다른 팀이 애플리케이션의 서로 다른 부분(예: 마케팅 사이트, 블로그, 관리 패널)을 관리합니다.
확장성: 각 구역은 독립적으로 확장할 수 있습니다.
다양한 요구사항: 각 애플리케이션은 고유한 구성 및 종속성을 가질 수 있습니다.

다중 구역 예시: 블로그 + 주요 웹사이트

목표: 마케팅 웹사이트 (example.com)와 블로그 (example.com/blog)를 결합합니다.

1단계: 두 개의 개별 애플리케이션 생성

주 애플리케이션: 마케팅 사이트 (/main)를 생성합니다.
블로그 애플리케이션: 블로그 (/blog)를 생성합니다.

2단계: 기본 경로 설정

블로그 애플리케이션에서 next.config.js에 basePath를 설정합니다:

// blog/next.config.js
module.exports = {
  basePath: '/blog',
};

Zone 결합을 위한 리라이트

주 애플리케이션에서 /blog 요청을 블로그 애플리케이션으로 리라이트합니다:

// main/next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/blog/:path*',
        destination: 'http://localhost:4000/blog/:path*',
      },
    ];
  },
};

애플리케이션 시작하기

서로 다른 포트에서 두 애플리케이션을 실행합니다 (예: 주 애플리케이션은 localhost:3000, 블로그 애플리케이션은 localhost:4000). 동일한 도메인 아래에서 리버스 프록시 또는 클라우드 제공자 설정을 사용하여 배포합니다.

비유:

마케팅 사이트를 쇼핑몰의 메인 홀로 생각하고, 블로그를 쇼핑몰 내의 전문 매장으로 생각해 보세요.
각각 다른 목적을 가지고 있지만, 방문객들은 매끄럽게 탐색할 수 있습니다.

멀티 테넌트 아키텍처란?

멀티 테넌트 아키텍처는 단일 Next.js 애플리케이션이 여러 클라이언트(테넌트)에 대해 격리된 데이터와 구성을 제공할 수 있게 합니다. 각 테넌트는 동일한 코드베이스를 공유하면서도 맞춤형 브랜딩, 콘텐츠 또는 데이터를 가질 수 있습니다.

이제 아파트 건물을 생각해 보십시오. 모든 테넌트는 동일한 건물 인프라(예: 엘리베이터, 주차장, 배관)를 공유하지만 각자의 고유한 공간을 가지고 있습니다. 각 테넌트는 자신의 아파트를 원하는 대로 꾸미거나 배치할 수 있지만, 건물 전체는 집주인이 관리합니다.

Next.js에서의 작동 방식

단일 Next.js 애플리케이션(건물)이 여러 테넌트(클라이언트 또는 사용자)를 제공합니다.
각 테넌트는 고유한 브랜딩, 콘텐츠 또는 설정을 가지지만, 코드베이스와 인프라는 공유됩니다.

멀티 테넌트를 사용할 때

전자상거래 플랫폼: 고유한 상점을 가진 여러 공급업체를 지원합니다.
SaaS 애플리케이션: 다양한 클라이언트를 위한 맞춤형 경험을 제공합니다.
비용 효율성: 모든 클라이언트에 대해 인프라를 중복하지 않도록 합니다.

실제 사례: 전자상거래 플랫폼

상황:
전자상거래 비즈니스는 각기 다른 상점이 필요한 여러 공급업체에게 서비스를 제공합니다. 예를 들어 vendor1.example.com 및 vendor2.example.com와 같은 형태입니다.

공유 인프라:

비즈니스는 제품 목록, 결제 및 사용자 계정과 같은 공유 기능이 있는 단일 애플리케이션을 유지 관리합니다.

2. 각 공급업체에 대한 맞춤 브랜딩:

공급업체 1은 초록색 테마를 가지고 있으며 전자 제품을 판매합니다.
공급업체 2는 빨간색 테마를 사용하며 의류에 중점을 둡니다.

목표: 고유한 상점을 가진 여러 공급업체에게 서비스 제공 (vendor1.example.com, vendor2.example.com).

1단계: 동적 라우팅

테넌트별 페이지를 로드하기 위해 동적 경로를 사용하세요:

app/[tenant]/page.js:

app/
  [tenant]/
    page.js // 2단계: 테넌트 식별
export default function TenantHome({ params }) {
  const { tenant } = params;

  return <h1>{tenant}의 상점에 오신 것을 환영합니다!</h1>;
}

3단계: 서브도메인 미들웨어

서브도메인을 해당 테넌트 경로로 라우팅하세요:

// middleware.js
import { NextResponse } from 'next/server';

export function middleware(req) {
  const subdomain = req.headers.host.split('.')[0];
  const url = req.nextUrl.clone();
  url.pathname = `/${subdomain}${url.pathname}`;
  return NextResponse.rewrite(url);
}

다중 영역 vs 다중 테넌트 비교
다중 영역

다중 테넌트 및 다중 존 사용 가이드

다중 존

목적: 여러 애플리케이션을 하나의 도메인 아래 통합합니다.
구조: 독립적으로 배포되는 여러 애플리케이션입니다.
사용 사례: 블로그 + 메인 사이트, 마이크로서비스입니다.
확장성: 각 애플리케이션에 대한 독립적인 확장성을 제공합니다.
개발: 팀 간의 분산 개발이 이루어집니다.

다중 테넌트

목적: 하나의 애플리케이션에서 여러 클라이언트를 제공합니다.
구조: 동적 구성을 갖춘 단일 애플리케이션입니다.
사용 사례: 전자 상거래, SaaS 플랫폼입니다.
확장성: 테넌트 간의 공유 확장성을 갖습니다.
개발: 테넌트별 로직을 갖춘 중앙 집중식 개발이 이루어집니다.

다중 존 vs 다중 테넌트 사용 시기

다중 존은 명확한 경계가 있는 다양한 애플리케이션을 관리하는 조직에 적합합니다 (예: 관리 패널과 사용자 대상 사이트).
다중 테넌트는 여러 클라이언트를 제공해야 하는 비즈니스에 적합합니다 (예: SaaS 기업, 마켓플레이스) 자원을 공유하면서.

결론

Multi-Zone 아키텍처와 Multi-Tenant 아키텍처는 Next.js에서 확장 가능하고 유지 관리가 용이한 웹 애플리케이션을 구축하기 위한 강력한 도구입니다. 귀하의 사용 사례에 맞는 올바른 패턴을 선택함으로써 효율적인 개발, 간소화된 배포 및 뛰어난 사용자 경험을 보장할 수 있습니다.

Tags:

Next.js에서의 멀티 존과 멀티 테넌트: 실용 가이드