Cloudflareで認証付きリモートMCPサーバーをつくりました

Cloudflareで認証付きリモートMCPサーバーをつくりました 🍜 Cloudflare Workers Tech Talk in Fukuoka
#1

ひめ姫野佑介 / Yusuke Himeno 株式会社マネーフォワードカードプロダクト開発部フロントエンドエンジニアリーダー
福岡在住。Web技術全般が好き。 X: @_hyme_ GitHub: nyawach

さて、突然ですが、

ラーメンは好きですか？

わたしは大好きです

レビューを貯めてきました食べログやRetty、noteでの記事投稿などでのレビューが溜まってきた

とあるSlackチャンネルにて

どうせなら・使ったことない技術を使いたい・リモートMCPサーバーにして設定が楽になるようにしたい・ただ、アクセス制御をかけたい・変なレビューコメントがでたら怒られそう

どうせなら・使ったことない技術を使いたい・リモートMCPサーバーにして設定が楽になるようにしたい・ただ、アクセス制御をかけたい・変なレビューコメントがでたら怒られそう Cloudflare
ですべて叶いそう！

デモ動画

技術スタック Cloudflare ・ Workers - 実行環境・ D1 - データベース
・ Access - アクセス制限アプリケーション・ @modelcontextprotocol/sdk ・ Hono / Hono MCP ・ Drizzle ・ TypeScript

Cloudflare D1 ・ note、食べログ、Rettyから頑張って引っ張ってくる・ Cloudflare D1へ頑張って保存

Cloudflare Access Zero Trust セキュリティで、インフラストラクチャ、セルフホスト型、SaaS アプリケーションにアクセスできるユーザーを管理（ダッシュボードの説明そのまま）タイプが色々あるが、今回はSaaSタイプを選択

Cloudflare Access ログイン方法 OIDC対応のIdPを設定可能今回はデフォルトで提供されている Onetime PINを利用

Cloudflare Access ポリシー設定以下のようにルールを設定・セレクター: Email ・値: 特定のメールアドレス数件

認証クライアントの実装 Exampleがある remote-mcp-cf-access - cloudflare/ai

アプリケーション実装・ McpServer 初期化・ API（店舗検索）を登録・ HonoとHono MCPで Streamable
HTTP配信 import { StreamableHTTPTransport } from "@hono/mcp"; const app = new Hono(); app.all("/mcp", async (c) => { const transport = new StreamableHTTPTransport(); await mcpServer.connect(transport); return transport.handleRequest(c); }); import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"; import { Hono } from "hono"; import { schema, handler, } from "./api/search-restaurants"; const mcpServer = new McpServer({ name: "Ramen Review Search MCP Server", version: "1.0.0", }); mcpServer.tool("search_restaurant", schema, handler);

アプリケーション実装 OAuthProvider でラップしたものを default export https://github.com/cloudflare/workers-oauth-provider // ... import {
OAuthProvider } from "@cloudflare/workers-oauth-provider" export default new OAuthProvider({ apiHandlers: { "/mcp": { fetch: app.fetch as ExportedHandlerFetchHandler<unknown, unknown>, }, }, defaultHandler: { fetch: handleAccessRequest as ExportedHandlerFetchHandler<unknown, unknown>, }, authorizeEndpoint: "/authorize", clientRegistrationEndpoint: "/register", tokenEndpoint: "/token", });

動作確認 Cursor設定 Remote MCPに対応してないため、 mcp-remote コマンドで実行 { "servers": { "ramen-mcp":
{ "command": "npx", "args": [ "-y", "mcp-remote", "<URL>" ] } } }

動作確認承認画面が表示される

動作確認メールアドレスを入力とどいたメールからOTPを入力

まとめ ✅ アクセス制限付きのリモートMCPサーバーをCloudflareプロダクト群で　つくれた ✅ サンプルも豊富なので気軽につくれる環境がある

Thank you! 🍜

Cloudflareで認証付きリモートMCPサーバーをつくりました

Cloudflareで認証付きリモートMCPサーバーをつくりました

nyawach

More Decks by nyawach

Featured

Transcript