AWS Amplify と Cloudflare Pages 比べてみれば / #CloudflareUG_cts #AWSAmplifyJP

AWS Amplify と Cloudflare Pages の機能や特徴の比較をしてみました。

Cloudflare Meetup Sapporo Vol. 1
https://cfm-cts.connpass.com/event/284239/

Transcript

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

   View Slide

2. 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
   好きなフィギュアスケートの技
   スプレッド・イーグル
   

   View Slide

3. 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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. 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
   

   View Slide

9. 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
   

   View Slide

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

    View Slide

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

    View Slide

12. Cloudflare Meetup Sapporo Vol. 1
    #CloudflareUG_cts
    12
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. END
    Cloudflare Meetup Sapporo Vol. 1
    #CloudflareUG_cts
    16
    

    View Slide