Cloudflare Pages使ってみた - ついでにAWS Amplifyもワカル -

2023/4/15 (SAT)
Cloudflare Meetup Nagano Kick Off!
https://cfm-cts.connpass.com/event/275197/

Transcript

1. Cloudflare Pages使ってみた
   - ついでにAWS Amplifyもワカル -
   2023/04/15(SAT)
   Cloudflare Meetup Nagano Kick Off!
   

   View Slide

2. 鈴⽊健⽃
   所属
   アイレット株式会社(東京オフィス)
   お仕事
   AWSの構築、運⽤保守 → 4⽉からプリセールス
   経歴
   • アイレット新卒⼊社
   Cloudflare歴
   • LTのために初めて触る
   • 参加したCloudflare Meetup
   • 札幌、福岡、⼤阪、仙台、名古屋
   @k_suzuki_pnx
   自己紹介
   

   View Slide

3. 過去のCloudflare Meetupの登壇内容
   

   View Slide

4. 福岡
   Cloudflare CDN + S3の静的Webホスティングをやってみた
   

   View Slide

5. ⼤阪
   Wrangler って何だ？
   -ちょっとよく分からないのでCloudflareのCLIツールを深掘りしてみる-
   

   View Slide

6. Cloudflare Pages使ってみた
   - ついでにAWS Amplifyもワカル -
   2023/04/15(SAT)
   Cloudflare Meetup Nagano Kick Off!
   

   View Slide

7. ずっと AWS しか触ってこなかった
   そんな私の Cloudflare Pages への理解
   各地の Cloudflare Meetup で
   何度か話題に上がる Cloudflare Pages
   

   View Slide

8. Cloudflare Pagesとは
   正直、何⾔ってるか分からない
   

   View Slide

9. Cloudflare Pages に関する説明と感想
   • 静的ウェブサイトホスティングができる
   → S3の静的ウェブサイトホスティング？
   • 要はAWSだとAmplifyに近いです
   → なるほど、Amplifyが分からん
   • Astro, Hono, Remix
   → 何語？
   

   View Slide

10. もう、訳が分からない
    

    View Slide

11. 今回のテーマ
    • Cloudflare Pages を触ってみる
    • Cloudflare Pages を通して
    AWS Amplify のウェブホスティングを解説する
    • Astro, Hono, Remix といった呪⽂は何かを解説
    

    View Slide

12. Cloudflare Pages を触ってみる
    

    View Slide

13. プロジェクトの作成
    プロジェクトの作成⽅法は3つ
    1. Gitプロバイダーに接続
    2. ダイレクト アップロード
    3. Wrangler CLI を使⽤
    Cloudflare Pages のデモファイルが
    ダウンロードできたので、
    今回はデモを使ってやってみる
    

    View Slide

14. プロジェクトの作成
    任意のプロジェクト名を付けて
    プロジェクトの作成
    

    View Slide

15. プロジェクトの作成
    先ほどダウンロードしたデモファイルをアップロード
    

    View Slide

16. プロジェクトの作成
    ✨ ✨ ✨ ✨ ✨ 成功しました ✨ ✨ ✨ ✨ ✨
    

    View Slide

17. S3の静的ウェブサイトホスティングと違ったところ
    アップロードはフォルダ単位
    → 試しにpngファイルだけ⼊れたフォルダをアップロードしても
    何も表⽰できなかった（404 エラー）
    

    View Slide

18. S3の静的Webサイトホスティングと違ったところ
    アクセスポリシーを有効化したら
    サイトアクセス時に認証が⼊る
    

    View Slide

19. Cloudflare Pages を通して
    AWS Amplify のウェブホスティングを解説
    

    View Slide

20. AWS Amplify とは
    フロントエンドのエンジニアがインフラを意識することなく
    簡単にアプリケーションを構築・デプロイすることができるサービス
    参考：https://aws.amazon.com/jp/amplify/
    

    View Slide

21. AWS Amplifyのウェブサイトホスティングの構成図
    ・CDNとしてCloudFront
    ・静的ファイルの格納場所としてS3
    Amplifyを使うことで、
    CloudFrontやS3といったサービスを
    意識する必要がなくなる
    

    View Slide

22. Cloudflare Pages と AWS Amplify（脳内イメージ）
    Cloudflare AWS
    

    View Slide

23. GitHub統合（脳内イメージ）
    Cloudflare AWS
    

    View Slide

24. 認証（脳内イメージ）
    Cloudflare AWS
    

    View Slide

25. Astro, Hono, Remix とは
    

    View Slide

26. 前提
    フロントエンドが分からない
    

    View Slide

27. Astro, Hono, Remix の共通点
    Webフレームワークである
    • Webサイトを構築するのによく利⽤する機能を
    「ライブラリ」と呼ばれるものにパッケージング化する
    • 「ライブラリ」を詰め合わせたものがWebフレームワーク
    Cloudflareのドキュメントに簡単なガイドが存在する
    • Astro, Hono, Remix以外のフレームワークのガイドも存在している
    • 2023年4⽉時点で30種類
    参考： https://developers.cloudflare.com/pages/framework-guides/
    

    View Slide

28. Astro, Hono, Remix のそれぞれの特徴
    Astro
    • コンテンツにフォーカスした⾼速なWebサイトを構築するための
    オールインワンWebフレームワーク
    • コンテンツが豊富なウェブサイトを構築するのに向いている
    Hono
    • ⽇本語の炎 (Hono) が由来
    • Edge⽤の⼩さくてシンプルな超⾼速Webフレームワーク
    • 元々Cloudflare Workers で Web アプリケーションを作成しようとしたところ、
    Cloudflare Workers でうまく動作するフレームワークがなかったため、
    Honoが⽣まれた
    Remix
    • Reactをベースとした新しいフルスタックなフレームワーク
    • SSR(サーバーサイドレンダリング)をサポート
    • JavaScriptのレンダリング(描画)をクライアント側ではなく、
    サーバ側で⾏ってからクライアントへ送信するためクライアントの負荷が減る
    • レンダリング済みのページをエッジから配信させることができるので
    Cloudflareとの相性がいい︖
    

    View Slide

29. まとめ
    

    View Slide

30. 新しい技術を学ぶときは
    • まず触ってみる
    • ⾃分の持っている知識と
    照らし合わせてみる
    • ググってみる
    

    View Slide

31. AWS Amplify についてもう少し知りたい方へ
    雲勉@オンライン【勉強会】AWS Amplifyで始めるアプリ開発
    https://www.youtube.com/watch?v=xGqQNnQQ1W0
    第91回 雲勉 サーバレスでブログサイト開設〜Amplify Studio〜
    https://www.youtube.com/watch?v=vfZ9jmthRu4
    Cloudflareのコンテンツはまだありません...
    僕が作ります︕
    許してください︕︕🙏
    

    View Slide