How we run Vercel's CDN in front of Discourse

Vercel's CDN can front any application, not just those deployed natively on the platform, and it's simple to set up. This allows you to add firewall protection, DDoS mitigation, and observability to platforms like Discourse or WordPress without migrating them completely.

The Vercel Community is an example of this architecture. It is a Discourse application hosted elsewhere, but we proxy it ourselves via Vercel's CDN, which both protects the app and gives us access to useful features in Vercel's website stack:

• Web Analytics gives us anonymized, cookie-free demographic and referrer data, so we can see where users are coming from and what they're looking for.

• Firewall gives us DDoS protection and has automatically prevented several attacks in the last year.

• Bot Management lets us block malicious scrapers while allowing trusted crawlers to index the forum and allow community posts to show up in ChatGPT searches.

Some parts of the community platform, like Vercel Community live sessions, run directly on Vercel with Next.js. We use Vercel Microfrontends to mount a Next.js app on the same domain as the Discourse app, for three reasons:

• To create new pages that would be impractical to implement as CMS plugins.

• To overwrite existing Discourse pages that we can't fully customize.

• To keep users authenticated through Sign in with Vercel

When the new pages are ready to launch, we add the path to our microfrontends configuration and users are rerouted seamlessly on the next deploy.

Link to headingVercel as a CDN

To set up Vercel as a CDN proxy like this, you need two domains:

1. Inner host: The origin server where the site is actually hosted. This might look like your-site.discourse.com

2. Outer host: The Vercel project domain that users interact with, such as community.vercel.com

Ensure that all links on the site and its canonical URLs use the outer domain.

Once those are in place, create a new project on Vercel that deploys to the outer host. You can then use vercel.ts (formerly vercel.json) to rewrite traffic to the inner domain.

1
import { type VercelConfig, routes, deploymentEnv } from '@vercel/config/v1'
2

3
export const config: VercelConfig = {
4
  rewrites: [
5
    routes.rewrite('/(.*)', deploymentEnv('INNER_HOST'), {
6
      requestHeaders: {
7
        'x-proxy-secret': deploymentEnv('PROXY_HEADER')
8
      }
9
    }),
10
  ],
11
}

Link to headingRunning multiple apps on a single domain with microfrontends

To extend the community forum beyond the limits of Discourse, we configured with the outer host domain using a vertical microfrontend approach.

Vercel's microfrontends allow you to mount different Vercel projects to different route paths. We added a microfrontends.json file that directs traffic for specific routes to separate Vercel projects.

Additional pages can be added incrementally, route by route. We also added the .well-known/workflow route to use Workflow Development Kit for event creation and video processing.

1
{
2
  "$schema": "https://openapi.vercel.sh/microfrontends.json",
3
  "applications": {
4
    "community-proxy": {
5
      "development": {
6
        "fallback": "community.vercel.com"
7
      }
8
    },
9
    "community-nextjs": {
10
      "routing": [
11
        {
12
          "paths": [
13
            "/.well-known/workflow/:path*",
14
            "/live/:path*"
15
          ]
16
        }
17
      ]
18
    }
19
  }
20
}

While you could accomplish some of this by using negative matching in the proxy regex to avoid proxying certain routes, splitting the projects provides better isolation. This approach allows for independent environment variables and organization permissions, locking down the project that talks to the third-party host.

Link to headingA modern CDN without a massive migration

At this point, you have Vercel's CDN standing between your users and your origin server. All traffic flows through Vercel's global network, giving you enterprise-grade security without touching your existing application.

You get even more flexibility when you combine this with microfrontends. You now have a path to modernize your application incrementally. Instead of a "big bang" refactor, you can create a Next.js application and turn on specific routes one by one, while your core application continues to run on Discourse, WordPress, or whatever platform it is built on.

This architecture unlocks a pragmatic path forward: secure your existing investment with Vercel's CDN today, then layer modern features on top tomorrow, all without the risk of a full platform migration.

Learn more by reading the Vercel microfrontends documentation or see it in action at community.vercel.com/live.