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

2025/11/12 Cloudflare Workers Tech Talk in Fukuoka #1

Transcript

1. Cloudflareで認証付き リモートMCPサーバーを つくりました 🍜 Cloudflare Workers Tech Talk in Fukuoka #1
2. ひめ 姫野 佑介 / Yusuke Himeno 株式会社マネーフォワード カードプロダクト開発部 フロントエンドエンジニア リーダー 福岡在住。Web技術全般が好き。 X: @_hyme_ GitHub: nyawach
3. さて、突然ですが、
4. ラーメンは好きですか？
5. わたしは大好きです
6. レビューを貯めてきました 食べログやRetty、noteでの記事投稿などでのレビューが溜まってきた
7. とあるSlackチャンネルにて
8. どうせなら ・ 使ったことない技術を使いたい ・ リモートMCPサーバーにして設定が楽になるようにしたい ・ ただ、アクセス制御をかけたい ・ 変なレビューコメントがでたら怒られそう
9. どうせなら ・ 使ったことない技術を使いたい ・ リモートMCPサーバーにして設定が楽になるようにしたい ・ ただ、アクセス制御をかけたい ・ 変なレビューコメントがでたら怒られそう Cloudflare ですべて叶いそう！
10. デモ動画
11. 技術スタック Cloudflare ・ Workers - 実行環境 ・ D1 - データベース ・ Access - アクセス制限 アプリケーション ・ @modelcontextprotocol/sdk ・ Hono / Hono MCP ・ Drizzle ・ TypeScript
12. Cloudflare D1 ・ note、食べログ、Rettyから頑張って引っ張ってくる ・ Cloudflare D1へ頑張って保存
13. Cloudflare Access Zero Trust セキュリティで、インフラストラクチャ、セルフホスト型、SaaS アプリ ケーションにアクセスできるユーザーを管理（ダッシュボードの説明そのまま） タイプが色々あるが、今回はSaaSタイプを選択
14. Cloudflare Access ログイン方法 OIDC対応のIdPを設定可能 今回はデフォルトで提供されている Onetime PINを利用
15. Cloudflare Access ポリシー設定 以下のようにルールを設定 ・ セレクター: Email ・ 値: 特定のメールアドレス数件
16. 認証クライアントの実装 Exampleがある remote-mcp-cf-access - cloudflare/ai
17. アプリケーション実装 ・ 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);
18. アプリケーション実装 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", });
19. 動作確認 Cursor設定 Remote MCPに対応してないため、 mcp-remote コマンドで実行 { "servers": { "ramen-mcp": { "command": "npx", "args": [ "-y", "mcp-remote", "<URL>" ] } } }
20. 動作確認 承認画面が表示される
21. 動作確認 メールアドレスを入力 とどいたメールからOTPを入力
22. 🎉
23. まとめ ✅ アクセス制限付きのリモートMCPサーバーをCloudflareプロダクト群で 　つくれた ✅ サンプルも豊富なので気軽につくれる環境がある
24. Thank you! 🍜