AWS Amplify と Cloudflare Pages 比べてみれば Cloudflare Meetup Sapporo Vol. 1 2023/07/18 tacck (Kihara, Takuya) Cloudflare Meetup Sapporo Vol. 1 #CloudflareUG_cts 1

Cloudflare Meetup Sapporo Vol. 1 #CloudflareUG_cts 2 木原 卓也 Kihara, Takuya / @tacck 生活協同組合コープさっぽろ デジタル推進本部システム部 Amplify Japan User Group 運営メンバー ゆるWeb勉強会@札幌 主催 AWS Community Builder Since Q2 2021 / Category: Front-end Web and Mobile 好きなフィギュアスケートの技 スプレッド・イーグル

AWS Amplify と Cloudflare を 比べたい - 亀田さんからのお題 - 前回(Cloudflare Meetup Sapporo Kick Off! 2023/03/15)のハンズオンで Cloudflare Workers / Pages を触って、 AWS Amplify と重なる部分も感じた。 - フロントエンドのデプロイ先という観点で Cloudflare Pages を中心として、 それぞれの機能、似たところ、違うところ、比べてみた。 Cloudflare Meetup Sapporo Vol. 1 #CloudflareUG_cts 3

AWS Amplify ざっくり - 基本は (m)BaaS / (Mobile) Backend as a Service - 具体的には、バックエンド機能をサーバレスで準備可能、 バックエンド機能にクライアント(Webフロントエンド・スマホアプリ)から 開発言語でアクセス可能。 - (m)BaaSとしての基本的な機能は下記: - ホスティング (いわゆるWebサーバの静的コンテンツ配信) - ファンクション - 認証 - データベース - ストレージ Cloudflare Meetup Sapporo Vol. 1 #CloudflareUG_cts 4

Cloudflare Pages ざっくり - Cloudflare のWebホスティングサービス。 - Pages Functions により、バックエンド機能が統合されている。 - フロントエンドとバックエンドを同一リポジトリで開発できるので、 フロントエンド寄りの人たちには良い環境。 - 主眼は静的コンテンツのホスティングなので、バックエンド機能は Functions 経由で他のサービス(KVやR2など)にアクセスすることになる。 Cloudflare Meetup Sapporo Vol. 1 #CloudflareUG_cts 5

比較しての特徴 / AWS Amplify Cloudflare Meetup Sapporo Vol. 1 #CloudflareUG_cts 6 クライアントから 直接Middlewareへ アクセス可能

比較しての特徴 / Cloudflare Pages Cloudflare Meetup Sapporo Vol. 1 #CloudflareUG_cts 7 Pages (Frontend) と Functions (Backend) を 同じプロジェクト(ソース)で管理

AWS Amplify のこれ、 Cloudflare Pages でできる? - CI/CD はできる? - できます。GitHub / GitLab とリポジトリ連携が可能。 - ブランチごとやPRでのプレビューはできる? - できます。こちらもCI/CDで自動デプロイされる。 - アクセス制御(Basic認証)を手軽にやりたい - Basic認証は(メニューからは)できません(Amplifyは可能)。 Zero Trust と連携したメールアドレスベースの OTP(One Time Password)認証は一瞬で設定可能。 Cloudflare Meetup Sapporo Vol. 1 #CloudflareUG_cts 8

AWS Amplify の強み - (m)BaaS として利用 - クライアントからMiddlewareを直接利用可能 - フロントエンドの機能 - UIコンポーネントにより、簡単にMiddleware機能を利用可能。 - Webフロントエンドの場合、Figmaと連携してのコンポーネント開発も可能。 - AWSリソースを利用可能 - Geo (Amazon Location Service) や PubSub (AWS IoT Core) などを 利用するライブラリが提供されている。 - AWS CDKと統合して開発も可能。 Cloudflare Meetup Sapporo Vol. 1 #CloudflareUG_cts 9

Cloudflare Pages の強み - デプロイが早い。 - Pages / Pages Functions により、フロントエンドとバックエンドを 一体のコードツリーの中で開発可能。 - Webフロントエンドの技術スタックの延長でバックエンドを書かなきゃいけない 場合、とても良い体験。(Developer Experience が高い) - Cloudflare の持つ エッジ・ネットワークに関する機能との連携。 - Zero Trust など、総合的な仕組みの中にすんなり入るように見える。 - メール関連の機能が良い。 - AWS Amplify に無い。 Email Workers は使い所多そう。 Cloudflare Meetup Sapporo Vol. 1 #CloudflareUG_cts 10

少し触ってみての感想 - リアルタイム通知があるようなシステム(チャットなど)を作りたい場合 - AWS Amplify の方が道具が揃っている - AppSync の Subscriptions や IoT Core を使える。 - Cloudflare は WebSocket を割と生で書けるのは良い - が、サーバ:クライアントがペアで払い出す形になるので、 マルチクライアント向けは Durable Object (課金すれば実質無料) など使う必要あり。 Cloudflare Meetup Sapporo Vol. 1 #CloudflareUG_cts 11

Cloudflare Meetup Sapporo Vol. 1 #CloudflareUG_cts 12

Cloudflare Pages で実際作ってみた - KV で無理やりそれっぽく作ったので、多用厳禁。 Cloudflare Meetup Sapporo Vol. 1 #CloudflareUG_cts 13

まとめ - Cloudflare Pages は、 Cloudflare という仕組みの中の機能の一つ。 - AWS Amplify は、 AWS の中の機能の組み合わせ + 拡張。 - フロントエンド開発(コンテンツのホスティング)観点でいえば、 どちらも選択できる。 - フロントエンド開発者がバックエンドも(嫌々ながら)開発するなら、 Cloudflare の方が選択肢は広くなる。 - AWS Amplify だと Next.js (ほぼ)一択。 - 軽量・静的コンテンツが多いなら、 Cloudflare Pages の方がデプロイなど楽そう。 - Figma との連携を強力に進めるなら、 AWS Amplify の方が手軽にできる。 Cloudflare Meetup Sapporo Vol. 1 #CloudflareUG_cts 14

まとめ 要はバランスおじさん「要はバランス」 Cloudflare Meetup Sapporo Vol. 1 #CloudflareUG_cts 15

END Cloudflare Meetup Sapporo Vol. 1 #CloudflareUG_cts 16