Discourse 앞단에 Vercel CDN을 배치해 운영하는 방법

Vercel의 CDN은 플랫폼에 직접 배포된 애플리케이션뿐 아니라 어떤 애플리케이션이든 앞단에 배치할 수 있으며, 설정도 간단합니다. 이를 통해 Discourse나 WordPress 같은 플랫폼을 완전히 마이그레이션하지 않고도 방화벽 보호, DDoS 방어, 관측성(Observability)을 추가할 수 있습니다.

Vercel 커뮤니티가 바로 이 아키텍처를 적용한 사례입니다. 외부에서 호스팅되는 Discourse 애플리케이션을 Vercel CDN을 통해 직접 프록시하는 구조로, 앱을 보호하는 동시에 Vercel 웹사이트 스택의 다양한 기능을 활용할 수 있습니다.

Web Analytics를 통해 익명화된 쿠키 없는 인구통계 및 유입 경로 데이터를 확인할 수 있어, 사용자가 어디에서 유입되고 무엇을 찾고 있는지 파악할 수 있습니다.
Firewall은 DDoS 방어 기능을 제공하며, 지난 1년간 여러 차례 공격을 자동으로 차단했습니다.
Bot Management를 활용하면 악성 스크래퍼는 차단하면서, 신뢰할 수 있는 크롤러는 포럼을 색인하도록 허용해 커뮤니티 게시물이 ChatGPT 검색 결과에 노출되도록 할 수 있습니다.

커뮤니티 플랫폼의 일부 기능, 예를 들어 Vercel 커뮤니티 라이브 세션은 Next.js 기반으로 Vercel에서 직접 운영됩니다. 동일 도메인에서 Discourse 앱과 Next.js 앱을 함께 서빙하기 위해 Vercel 마이크로 프론트엔드를 사용하며, 그 이유는 세 가지입니다.

CMS 플러그인으로 구현하기 어려운 새로운 페이지를 만들기 위해
기존 Discourse 페이지 중 충분히 커스터마이징할 수 없는 페이지를 대체하기 위해
Sign in with Vercel을 통해 사용자의 인증 상태를 유지하기 위해

새 페이지가 출시 준비되면, 마이크로 프론트엔드 설정에 해당 경로를 추가하기만 하면 다음 배포 시 사용자가 자연스럽게 새 페이지로 연결됩니다.

CDN으로서의 Vercel

Vercel을 CDN 프록시로 설정하려면 두 개의 도메인이 필요합니다.

내부 호스트(Inner host): 사이트가 실제로 호스팅되는 오리진 서버입니다. 예를 들어 your-site.discourse.com 형태입니다.
외부 호스트(Outer host): 사용자가 실제로 접속하는 Vercel 프로젝트 도메인으로, community.vercel.com 같은 형태입니다.

사이트의 모든 링크와 canonical URL이 외부 도메인을 사용하도록 설정해야 합니다.

두 도메인이 준비되면, 외부 호스트로 배포되는 새 프로젝트를 Vercel에 생성합니다. 그런 다음 vercel.ts(기존 vercel.json)을 사용해 트래픽을 내부 도메인으로 리라이트하면 됩니다.

마이크로 프론트엔드로 단일 도메인에서 여러 앱 운영하기

Discourse의 한계를 넘어 커뮤니티 포럼을 확장하기 위해, 외부 호스트 도메인에 수직적 마이크로 프론트엔드 방식을 적용했습니다.

Vercel의 마이크로 프론트엔드를 사용하면 서로 다른 Vercel 프로젝트를 각각의 라우트 경로에 마운트할 수 있습니다. microfrontends.json 파일을 추가해 특정 라우트의 트래픽을 별도의 Vercel 프로젝트로 분기시켰습니다.

새로운 페이지는 라우트 단위로 점진적으로 추가할 수 있습니다. 이벤트 생성과 비디오 처리를 위해 Workflow Development Kit을 활용하는 .well-known/workflow 라우트도 추가했습니다.

프록시 정규식에서 특정 라우트를 제외하는 네거티브 매칭으로도 비슷한 결과를 얻을 수는 있지만, 프로젝트를 분리하면 격리성이 훨씬 높아집니다. 환경 변수와 조직 권한을 독립적으로 관리할 수 있어, 서드파티 호스트와 통신하는 프로젝트의 접근 권한을 엄격하게 제한할 수 있습니다.

대규모 마이그레이션 없이 최신 CDN 도입하기

여기까지 설정하면 사용자와 오리진 서버 사이에 Vercel CDN이 위치하게 됩니다. 모든 트래픽이 Vercel 글로벌 네트워크를 통해 흐르므로, 기존 애플리케이션을 손대지 않고도 엔터프라이즈급 보안을 확보할 수 있습니다.

마이크로 프론트엔드와 결합하면 유연성은 더욱 높아집니다. 기존 애플리케이션을 Discourse, WordPress 등 원래 플랫폼에서 계속 운영하면서, "빅뱅" 리팩터링 대신 Next.js 애플리케이션을 만들어 라우트별로 하나씩 전환해 나가는 점진적 현대화 경로가 열립니다.

이 아키텍처는 실용적인 전진 경로를 제시합니다. 오늘은 Vercel CDN으로 기존 자산을 보호하고, 내일은 그 위에 최신 기능을 얹어 나가면 됩니다. 전면적인 플랫폼 마이그레이션의 위험 부담 없이 말입니다.

더 자세한 내용은 Vercel 마이크로 프론트엔드 문서를 참고하거나, community.vercel.com/live에서 실제 동작하는 모습을 확인해 보세요.