Cloudflare Meet-up Online!! ~日本全国ユーザー大集合LT~ Cloudflare Workersたちのいるところ 2023/07/26 watany

About me Watanabe Yohei (Twitter: _@watany) From 東京（大体さいたま） NTT テクノクロス株式会社 Role: Architect, Instructor, CCoE 普段は AWS な人 Japan AWS Top Engineer (2023) Cloudflare との関係：これから

何を話す AWS 育ちが理解する、エッジコンピューティングのいるところ Lambda@Edge、Cloudflare Workers どうして動く場所が気になるか 注)けっこう Lambda@Edge の話が多い

経緯 Hono の Lambda@Edge 向け Adaptor を書いてい る Hono: ご存じ Cool な Web フレームワーク Cloudflare Workers/Pages でガンガン動く Adaptor という仕組みで他の Runtime/Cloud で動く

＼ Hono v3.3.0 で Release(Experimental) ／ https://github.com/honojs/hono/releases/tag/v3.3.0

簡単解説 Amazon CloudFront AWS の CDN サービス Lambda@Edge CloudFront の request/response で動く FaaS Cloudflare Workers みたい？

動かしてみる チュートリアル があります(~2023/7/21) https://hono.dev/getting-started/lambda-edge

例：ヘッダーを加える処理 Hono(Cloudflare Workers)・・・動いた 試した日記： https://zenn.dev/watany/scraps/ea7d7ef7f33712 import { Hono } from "hono"; const app = new Hono(); app.all("*", async (c) => { const res = await fetch(c.req.raw); const newResponse = new Response(res.body, res); newResponse.headers.set("X-Custom", "Foo"); return newResponse; }); export default app;

今のを参考に Lambda@Edge でも import { Hono } from "hono"; + import { handle } from "hono/lambda-edge"; const app = new Hono(); app.all("*", async (c) => { const res = await fetch(c.req.raw); const newResponse = new Response(res.body, res); newResponse.headers.set("X-Custom", "Foo"); return newResponse; }); - export default app; + export const handler = handle(app);

動かない ＼(^o^)／ｵﾜﾀ

Why? AWS 公式のサンプル Lambda@Edge ≒ CloudFront のイベ ントフックで動く AWS Lambda AWS Lambda は受け取った Event で同期/非同期実行 前述通り Callback で Event を返 すお作法があった Cloudflare Workers 版ってこんな動き していただろうか そもそもどこで、どう動くサー ビスなんだ？

Cloudflare Workers たちのいるところ(タイトル回収)

大正義　 ChatGPT に聞く Q. chatgpt GPT は 2021.9 時点。古い のでは？ A. 公式プラグインがあるぞ 足りない部分は手を動かしたぞ

Cloudflare Workers のいるところ ドメインとびっくりするくらいシームレスに紐づく Cloudflare に登録したドメイン or Cloudflare が払い出してくれるドメイン

Lambda@Edge のいるところ 作成した CloudFront(CDN)に対してのリクエスト/レスポンス CloudFront オリジンに対してのリクエスト/レスポンス

まとめ - 個人の感想 「Cloudflare workers って大体 Lambda@Edge みたいなもんかな」と思ってた私が今 回気づいたこと Cloudflare は CDN・ドメインを前提とした世界観 空気のように CDN ネットワークがある世界観で透過的に動く 素人目にはシームレスすぎて存在を感じない。美学を感じる AWS は IaaS・責任共有モデル を前提とした世界観 ユーザ管理リソースが「ここで動く」を明瞭化 サーバこそ見えないが、ユーザの「ここで動かす」という意思が必要 たぶんこれが事業者の思想の違い……！

おまけ v3.3.4 くらいで、こう書けます(予定) import { Hono } from "hono"; import type { Callback, CloudFrontResponse } from "hono/lambda-edge"; import { handle } from "hono/lambda-edge"; type Bindings = { callback: Callback; response: CloudFrontResponse; }; const app = new Hono<{ Bindings: Bindings }>(); app.all("*", async (c) => { c.env.response.headers["X-Custom".toLowerCase()] = [ { key: "X-Custom", value: "Foo", }, ]; await next(); c.env.callback(null, c.env.response); }); export const handler = handle(app);