Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう

AijiUejima
March 24, 2023

ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう

2023/03/24 エイチーム×レバレジーズ フロントエンド勉強会 の発表資料です

https://ateam.connpass.com/event/276968/

AijiUejima

March 24, 2023
Tweet

More Decks by AijiUejima

Other Decks in Technology

Transcript

  1. © 2023 Ateam Inc. 自己紹介 Who am I ? Name:

    Aiji Uejima Twitter: aiji42_dev Github: aiji42 株式会社エイチームライフデザイン技術開発室所属 リードエンジニア 直近はサービス開発からは離れていますが、少し前までRemixでのサービス開発を進めていました。 最近興味があるのはこの発表の通りエッジランタイム。 毎日プライベートでGithubに草生やしながら頑張ってます! 2
  2. © 2023 Ateam Inc. おしながき 1. エッジランタイム/エッジコンピューティングとはなにか 2. エッジコンピューティングはなぜ流行っているのか? 3.

    エッジコンピューティングで具体的に何ができるのか? 4. エッジランタイムで開発する上での留意点 3
  3. © 2023 Ateam Inc. エッジランタイム/エッジコンピューティングとは? 各CDNベンダーのエッジコンピューティング 6 ベンダー 名称 エンジン/言語

    Cloudflare Cloudflare Workers Javescript/V8 Fastly Fastly Compute@Edge Wasm/Wasmtime (Javascriptも動く) Vercel Vercel Edge Function Javascript/V8 (内部はCF Workers) Akamai Akamai EdgeWorkers Javascript/V8 他にも多数...
  4. © 2023 Ateam Inc. エッジランタイム/エッジコンピューティングとは? なぜV8/Javascript構成が採用されるのか 8 2. 独立性 エッジランタイムではV8

    isolateという機構が取られる。 独自のメモリ空間を持ち分離されるため、複数ユーザ・アプリケーションが同一物理リソース上にあっても、 セキュリティや安定性が担保される。また、isolateの作成と破棄が早いことが魅力的 https://developers.cloudflare.com/workers/learning/how-workers-works/
  5. © 2023 Ateam Inc. エッジランタイム/エッジコンピューティングとは? Cloudflare がゼロコールドスタートを謳う仕組み 9 ハンドシェイク中にV8 isolateにWorkerコードをローディングすることによって、実質起動速度0msを実現している。

    (他のベンダーでも同じ仕組みが取られているかもしれません) 逆にハンドシェイク中の5msの間にコードをロードしないといけないので、厳し目のバンドルサイズの制限が敷かれている(後述) 従来のCF Workers 及び古典的なサーバレスコンピューティング 現在のCF Workers (TLSのネゴシエーション中に立ち上げる) https://blog.cloudflare.com/eliminating-cold-starts-with-cloudflare-workers/
  6. © 2023 Ateam Inc. なぜ流行っているのか Core Web Vitals との関連性 11

    https://akshayranganath.github.io/Understanding-And-Using-Core-Web-Vitals/
  7. © 2023 Ateam Inc. なぜ流行っているのか Core Web Vitals との関連性 12

    LCP/FIDの時間を短縮させるためにTTFBに着目すると、オリジンの応答速度・オリジンとの距離が注目される。 CDNでの静的ファイル配信はもちろんのこと、リアルタイム処理も含めると、オーバーヘッドが少ないエッジランタイムは 魅力的。 https://www.keycdn.com/support/what-is-ttfb
  8. © 2023 Ateam Inc. なぜ流行っているのか キャッシュハンドリングの柔軟性と敷居の低下 Next.jsのISRに代表されるように、キャッシュの破棄までを含 めた設計が重要視されるようになった。 かつてはFastlyのVernish(VCL)がその領域を代表していたが、 アプリケーションエンジニアやフロントエンドエンジニアに

    はハードルが高かった。 Cloudflare Workersの登場により、Javascriptでアプリケーショ ン感覚で構築できるようになり一気にハードルが下がった。 14 https://www.facebook.com/FastlyEdgeCloudJapan/videos/ using-vcl-on-our-devhub/611247286543080/
  9. © 2023 Ateam Inc. 22 エッジの主なユースケース エイチームでの例 Vercelのpreview deployとNext.jsのmiddlewareを使用したABテストのルーティング Next.js

    middleware: Vercelにデプロイするとエッジに展開され、Next.jsのサーバ到達前に処理を差し込むことができる original に着弾したユーザ challenger に着弾したユーザ 🍪 🍪 main branch (original) challenger branch challenger (example.challenger.vercel.dev) preview deploy production deploy original (example.com) middleware rewrite to challenger スクリプトやデータは ダイレクトにリクエスト https://github.com/aiji42/next-with-split
  10. © 2023 Ateam Inc. 23 エッジの主なユースケース レンダリング (Edge as Origin)

    エッジでコンテンツをレンダリングして返却する。 オリジンへの物理的な距離を短縮できるため、高速にリアルタイムなコンテンツを返却できる。 D1やKVなどの周辺サービスを利用すれば、SSRでTTFB100msを切るようなコンテンツデリバリも可能。 🚫 D1
  11. © 2023 Ateam Inc. 24 エッジの主なユースケース 3rd party scriptの実行 (Cloudflare

    Zaraz) GoogleTabManagerやGoogleAnalyticsなどのアド系・分析計のスクリプトを、 ユーザのクライアントではなくエッジで動作させることで、 クライアント側のパフォーマンス改善やプライバシーリスクに対処できる。 zaraz用のスクリプトが 自動挿入される 3rd party script がエッジで実行される 🚫 代わりにzaraz event がプッシュされる クライアントでの 3rd party scriptのロードが不要に ベンダーに情報 が送信される
  12. © 2023 Ateam Inc. 何から始める? Next.js/Vercelを使っているのであれば... - middlewareを使ってみる Advanced Features:

    Middleware | Next.js リダイレクト・リライトを設定してみたり、 Cookieを読み取ってアクセス制御をアプリケーション到達前にやってみるなど オリジンを変えてしまえば、外部にプロキシすることもできる 29
  13. © 2023 Ateam Inc. 何から始める? Next.js/Vercelを使っているのであれば... - ページスクリプトのランタイムを切り替えてみる React 18:

    Switchable Runtime | Next.js API RoutesもPagesも export const config で簡単にランタイムの切り替えができる デプロイしてみてブラウザのコンソールを見るとTTFBが大きく異なることがわかるはず (VercelのNode runtimeはLambdaなので、物理的な距離による遅延+コールドスタートの遅延もある) 30 pagesDirの場合 appDirの場合
  14. © 2023 Ateam Inc. 何から始める? 他のフレームワークを使うなら... エッジに対応しているフレームワークなら、簡単にエッジランタイムでの開発/デプロイができる - Deploy a

    Remix site · Cloudflare Pages docs - Remix on the Edge – Vercel - Deploy a Svelte site · Cloudflare Pages docs - SvelteKit at the Edge – Vercel ベンダーはCloudflareかVercelが(個人的には)おすすめ Cloudflare はドキュメントや事例が多い、Vercelは設定が簡単 32
  15. © 2023 Ateam Inc. 何から始める? エッジランタイムでAPIエンドポイントを作ってみる Hono x Cloudflare Workersがおすすめ

    https://hono.dev/ Typescriptでのルーターの書き味と、デプロイコマンドを叩いてから公開されるまでの速度に感動するはず ある程度書けるようになったら KVやD1などのデータストアも使ってみるとよい 33 https://hono.dev/
  16. © 2023 Ateam Inc. 留意しなければいけないこと Node APIは動かない エッジランタイム初心者はみなこのハードルにぶつかる - fs

    などのNode依存なAPIは使用できない 使用できるのはWeb標準API (DOMの操作を除くブラウザで使用できるAPI) - 故に現状使用できないnpmライブラリが多くあるので、代替ライブラリ探しの旅がつきもの 例) JWTを処理するためのNPMライブラリ jsonwebtoken (観測している限りで一番DL数が多い)は NodeAPI依存のためエッジランタイムでは動かない => 代替は jose 探すときにおすすめなのは、package.json の exports を見てみること。 37
  17. © 2023 Ateam Inc. 留意しなければいけないこと Node専用のAPIは動かない - Cloudflare Workersを使うのであれば、--node-compat を使ってみる

    Configure wrangler.toml - Workers ビルド時にpolyfillが入り、Bufferなどはウェブ標準なものに置き換えられる ※ あくまで、一部のウェブ標準なAPIでpolyfill可能なもののみ。fsなどは置き換えられない。 - あとはライブラリのIssueにリクエストを登録してみましょう 39
  18. © 2023 Ateam Inc. 留意しなければいけないこと Node専用のAPIは動かない と、書いたそばから、ビルドタイムではなくランタイムにpolyfillを入れたとの発表があった(2023/03/23) 設定ファイル(wrangler.toml)に compatibility_flags =

    [ "nodejs_compat" ] を追加すると互換モードで動かすことができる 対応APIは順次追加されていく予定 40 https://blog.cloudflare.com/workers-node-js-asynclocalstorage/
  19. © 2023 Ateam Inc. 留意しなければいけないこと 外部へのTCP接続はできない - Postgres/MysqlなどのDBや、Redisなどとは直接は接続できない 例えば Prisma

    のネイティブ接続のモードではDBアクセスはできない - Cloudflareであれば、KV や D1、Duable Objects などの使用をおすすめします 41
  20. © 2023 Ateam Inc. 留意しなければいけないこと 外部へのTCP接続はできない - あるいはfetchを利用しているライブラリ・HTTPリクエストで返却できるリソースを選択しましょう 例) Supabase

    + @supabae/supabase-js: 内部的にはPostgREST という REST を利用してデータリクエストができる Planetscale + @planetscale/database: Supabase同様 REST APIに変換される Prisma Data Ploxy: Prisma Cloudが提供するプロキシサーバが間に入ることで HTTP リクエストに変換される ※ エッジがマルチロケーションなのに対して、基本的にはDBはシングルロケーションであることが多い そうなると、着弾するエッジによってはラウンドトリップが無視できなくなる可能性があることに注意 42 5ms Tokyo Tokyo 100ms Oregon