Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Cloudflare Pages使ってみた- ついでにAWS Amplifyもワカル -
Search
Kento Suzuki
April 16, 2023
Technology
3
1.2k
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
Share
More Decks by Kento Suzuki
See All by Kento Suzuki
バッドプラクティスから学ぶハワイアン航空で行く re:Invent
kentosuzuki
0
260
上流工程に挑戦!「俺の考えた最強サーバレス構成」が一瞬で敗北した件
kentosuzuki
2
310
S3から始めるAWS 〜S3の簡単なユースケースの紹介〜
kentosuzuki
1
630
AWS のポリシー言語 “Cedar” で実現するアクセス制御
kentosuzuki
0
390
探せぇ!お薦めAWSセキュリティワークショップ!!〜 怒涛のワークショップ 48 連戦 〜
kentosuzuki
1
690
SIEM って何?〜 Amazon OpenSearch で始める SIEM 〜
kentosuzuki
0
890
Verified Accessから始めるゼロトラストセキュリティ
kentosuzuki
1
680
復活のAWS DeepComposer 〜 古代兵器から始める生成系AI 〜
kentosuzuki
0
360
新卒入社が考える『AWSではじめるクラウドセキュリティ』を読むタイミング
kentosuzuki
0
700
Other Decks in Technology
See All in Technology
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
160
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
2
200
Wasm元年
askua
0
140
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
220
PostgreSQL 18 cancel request key長の変更とRailsへの関連
yahonda
0
120
ハノーバーメッセ2025座談会.pdf
iotcomjpadmin
0
160
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
140
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1.8k
実践! AIエージェント導入記
1mono2prod
0
160
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
180
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
620
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
220
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
Rebuilding a faster, lazier Slack
samanthasiow
81
9.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building Applications with DynamoDB
mza
95
6.5k
Transcript
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のコンテンツはまだありません... 僕が作ります︕ 許してください︕︕🙏