Cloudflare Workersたちのいるところ

Cloudflare Meet-up Online!! ~日本全国ユーザー大集合LT~でお話しした内容となります。
https://cfm-cts.connpass.com/event/286362/

Transcript

1. Cloudflare Meet-up Online!! ~日本全国ユーザー大集合LT~ Cloudflare Workersたちのいるところ 2023/07/26 watany
2. About me Watanabe Yohei (Twitter: _@watany) From 東京（大体さいたま） NTT テクノクロス株式会社 Role: Architect, Instructor, CCoE 普段は AWS な人 Japan AWS Top Engineer (2023) Cloudflare との関係：これから
3. 何を話す AWS 育ちが理解する、エッジコンピューティングのいるところ Lambda@Edge、Cloudflare Workers どうして動く場所が気になるか 注)けっこう Lambda@Edge の話が多い
4. 経緯 Hono の Lambda@Edge 向け Adaptor を書いてい る Hono: ご存じ Cool な Web フレームワーク Cloudflare Workers/Pages でガンガン動く Adaptor という仕組みで他の Runtime/Cloud で動く
5. ＼ Hono v3.3.0 で Release(Experimental) ／ https://github.com/honojs/hono/releases/tag/v3.3.0
6. 簡単解説 Amazon CloudFront AWS の CDN サービス Lambda@Edge CloudFront の request/response で動く FaaS Cloudflare Workers みたい？
7. 動かしてみる チュートリアル があります(~2023/7/21) https://hono.dev/getting-started/lambda-edge
8. 例：ヘッダーを加える処理 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;
9. 今のを参考に 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);
10. 動かない ＼(^o^)／ｵﾜﾀ
11. Why? AWS 公式のサンプル Lambda@Edge ≒ CloudFront のイベ ントフックで動く AWS Lambda AWS Lambda は受け取った Event で同期/非同期実行 前述通り Callback で Event を返 すお作法があった Cloudflare Workers 版ってこんな動き していただろうか そもそもどこで、どう動くサー ビスなんだ？
12. Cloudflare Workers たちのいるところ(タイトル回収)
13. 大正義　 ChatGPT に聞く Q. chatgpt GPT は 2021.9 時点。古い のでは？ A. 公式プラグインがあるぞ 足りない部分は手を動かしたぞ
14. Cloudflare Workers のいるところ ドメインとびっくりするくらいシームレスに紐づく Cloudflare に登録したドメイン or Cloudflare が払い出してくれるドメイン
15. Lambda@Edge のいるところ 作成した CloudFront(CDN)に対してのリクエスト/レスポンス CloudFront オリジンに対してのリクエスト/レスポンス
16. まとめ - 個人の感想 「Cloudflare workers って大体 Lambda@Edge みたいなもんかな」と思ってた私が今 回気づいたこと Cloudflare は CDN・ドメインを前提とした世界観 空気のように CDN ネットワークがある世界観で透過的に動く 素人目にはシームレスすぎて存在を感じない。美学を感じる AWS は IaaS・責任共有モデル を前提とした世界観 ユーザ管理リソースが「ここで動く」を明瞭化 サーバこそ見えないが、ユーザの「ここで動かす」という意思が必要 たぶんこれが事業者の思想の違い……！
17. おまけ 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);