VercelのCDNをDiscourseの前面で実行する方法
Vercelが自社のCDNをDiscourseフォーラムのフロントエンドにプロキシとして適用し、セキュリティ機能やマイクロフロントエンド技術を活用して大規模な移行なしに既存プラットフォームを拡張・保護する実装例を紹介している。
キーポイント
CDNプロキシによるセキュリティと可観測性の強化
VercelのCDNを既存アプリのフロントエンドに配置し、ファイアウォール、DDoS対策、Web Analytics、Bot Managementを活用して保護と分析を実現する。
内外ドメイン構成とリダイレクト設定の実装
内部ホスト（Origin）と外部ホスト（Vercelプロジェクトドメイン）を分離し、vercel.tsでリライト設定することでユーザー体験を維持しつつバックエンドを保護する。
マイクロフロントエンドを活用した機能拡張
Next.jsアプリを同一ドメインにマウントし、CMSプラグインでは実現困難なページ追加や認証の一元化をシームレスに実装する。
プロジェクト分離による運用の柔軟性とセキュリティロックダウン
ルーティングごとに独立したVercelプロジェクトを割り当てることで、環境変数や権限管理を分離し、サードパーティホストへのアクセスを安全に制御する。
既存アプリへの影響ゼロでセキュリティ強化
VercelのCDNを既存アプリケーションの手前に配置するだけで、グローバルネットワーク経由のトラフィックによりエンタープライズグレードのセキュリティを適用できる。
マイクロフロントエンドによる段階的近代化
Next.jsアプリケーションを作成し、既存のDiscourseやWordPressなどのコアアプリを維持しながら、特定のルートを一つずつ有効化することで「大規模な書き換え」なしに段階的にモダナイズできる。
低リスクな移行戦略の実現
既存の投資をCDNで保護しつつ、モダンな機能を重ねていく実践的な道筋を提供し、完全なプラットフォーム移行のリスクを回避する。
影響分析・編集コメントを表示
影響分析
既存のWebアプリケーションをCDNでプロキシ化し、マイクロフロントエンドで機能を補完するこのアーキテクチャは、大規模なリファクタリングを回避しつつセキュリティと拡張性を両立させる実用的なパターンを提供する。AI検索へのインデックス対応や高度なボット管理を容易にすることで、現代のWeb開発における「移行コスト対効果」の新しい基準を示している。
編集コメント
大規模なリファクタリングを避けつつセキュリティと拡張性を両立させる実用的なアーキテクチャパターンであり、既存Webサービスのクラウド移行において参考となる事例である。
VercelのCDNは、プラットフォーム上にネイティブでデプロイされたアプリケーションだけでなく、あらゆるアプリケーションの前面に配置でき、設定も簡単です。これにより、DiscourseやWordPressといったプラットフォームを完全に移行することなく、ファイアウォール保護、DDoS対策、および可観測性を追加できます。
Vercel Communityはこのアーキテクチャの一例です。これは外部でホストされているDiscourseアプリケーションですが、VercelのCDNを介して自らプロキシしており、アプリを保護すると同時に、Vercelのウェブサイトスタックが提供する有用な機能を利用できるようにしています：
Web Analyticsは、匿名化されたクッキーフリーの人口統計データとリファラーデータを提供するため、ユーザーがどこから来て、何を探しているのかを把握できます。
FirewallはDDoS対策を提供し、昨年いくつかの攻撃を自動的に防ぎました。
Bot Managementにより、悪意のあるスクレイパーをブロックしつつ、信頼できるクローラーにはフォーラムのインデックスを許可し、コミュニティ投稿がChatGPTの検索結果に表示されるようにしています。
Vercel Communityライブセッションなど、コミュニティプラットフォームの一部はNext.jsで直接Vercel上で実行されています。Vercel Microfrontendsを使用して、Next.jsアプリをDiscourseアプリと同じドメインにマウントしています。その理由は3つあります：
CMSプラグインとして実装するのが現実的ではない新しいページを作成するため。
完全にカスタマイズできない既存のDiscourseページを上書きするため。
Sign in with Vercelを通じてユーザーの認証状態を維持するため。
新しいページの公開準備が整ったら、マイクロフロントエンドの設定にパスを追加し、次のデプロイ時にユーザーがシームレスにリダイレクトされるようにします。
CDNとしてのVercel
このようにVercelをCDNプロキシとして設定するには、2つのドメインが必要です：
内部ホスト：サイトが実際にホストされているオリジンサーバー。your-site.discourse.comのような形式です。
外部ホスト：ユーザーが接するVercelプロジェクトのドメイン。community.vercel.comなどです。
サイト上のすべてのリンクとその正規URL（canonical URLs）が外部ドメインを使用していることを確認してください。
これらを準備したら、外部ホストにデプロイする新しいプロジェクトをVercel上に作成します。その後、vercel.ts（旧vercel.json）を使用して、トラフィックを内部ドメインに書き換え（リライト）できます。
マイクロフロントエンドを使用した単一ドメインでの複数アプリの実行
コミュニティフォーラムをDiscourseの制限を超えて拡張するため、垂直的マイクロフロントエンドアプローチを用いて外部ホストドメインで設定しました。
Vercelのマイクロフロントエンドでは、異なるVercelプロジェクトを異なるルートパスにマウントできます。特定のルートへのトラフィックを個別のVercelプロジェクトに誘導するmicrofrontends.jsonファイルを追加しました。
追加のページは、ルートごとに段階的に追加できます。また、.well-known/workflowルートを追加し、Workflow Development Kitをイベント作成と動画処理に使用しています。
プロキシの正規表現（regex）で否定マッチングを使用して特定のルートをプロキシしないようにすることで、この一部を実現することも可能ですが、プロジェクトを分離することで、より優れた独立性が得られます。このアプローチにより、独立した環境変数（environment variables）と組織の権限設定が可能になり、サードパーティホストと通信するプロジェクトをロックダウンできます。
大規模な移行を伴わないモダンなCDN
この時点で、ユーザーとオリジンサーバーの間にVercelのCDNが配置されています。すべてのトラフィックはVercelのグローバルネットワークを通過するため、既存のアプリケーションに手を加えることなく、エンタープライズグレードのセキュリティを実現します。
これをマイクロフロントエンドと組み合わせることで、さらに柔軟性が高まります。これで、アプリケーションを段階的に近代化する道筋ができました。「ビッグバン」式のリファクタリングではなく、Next.jsアプリケーションを作成し、特定のルートを1つずつ有効にしながら、コアアプリケーションはDiscourse、WordPress、またはその構築基盤となっているプラットフォーム上で実行し続けることができます。
このアーキテクチャは、実用的な前進の道を開きます。まず今日、VercelのCDNで既存の資産を保護し、明日、その上にモダンな機能を重ねていく。すべて、プラットフォーム全体の移行に伴うリスクを負うことなく行えます。
詳細については、Vercelマイクロフロントエンドのドキュメントをご覧になるか、community.vercel.com/liveで実際の動作を確認してください。
Read more
原文を表示
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.
Vercel as a CDN
To set up Vercel as a CDN proxy like this, you need two domains:
Inner host: The origin server where the site is actually hosted. This might look like your-site.discourse.com
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.
Running 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.
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.
A 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.
Read more
関連記事
今日のまとめ
AI日報で今日の重要ニュースをまとめ読み