2023/4/15 (SAT) Cloudflare Meetup Nagano Kick Off! https://cfm-cts.connpass.com/event/275197/
Cloudflare Pages使ってみた- ついでにAWS Amplifyもワカル -2023/04/15(SAT)Cloudflare Meetup Nagano Kick Off!
View Slide
鈴⽊健⽃所属アイレット株式会社(東京オフィス)お仕事AWSの構築、運⽤保守 → 4⽉からプリセールス経歴• アイレット新卒⼊社Cloudflare歴• LTのために初めて触る• 参加したCloudflare Meetup• 札幌、福岡、⼤阪、仙台、名古屋@k_suzuki_pnx自己紹介
過去のCloudflare Meetupの登壇内容
福岡Cloudflare CDN + S3の静的Webホスティングをやってみた
⼤阪Wrangler って何だ?-ちょっとよく分からないのでCloudflareのCLIツールを深掘りしてみる-
ずっと 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・静的ファイルの格納場所としてS3Amplifyを使うことで、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=vfZ9jmthRu4Cloudflareのコンテンツはまだありません...僕が作ります︕許してください︕︕🙏