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

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

過去のCloudflare Meetupの登壇内容

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

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

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

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

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

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

もう、訳が分からない

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

Cloudflare Pages を触ってみる

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

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

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

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

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

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

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

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

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

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

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

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

Astro, Hono, Remix とは

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

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

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

まとめ

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

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