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

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

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

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

Kento Suzuki

April 16, 2023
Tweet

More Decks by Kento Suzuki

Other Decks in Technology

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