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
1k
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
上流工程に挑戦!「俺の考えた最強サーバレス構成」が一瞬で敗北した件
kentosuzuki
2
280
S3から始めるAWS 〜S3の簡単なユースケースの紹介〜
kentosuzuki
1
540
AWS のポリシー言語 “Cedar” で実現するアクセス制御
kentosuzuki
0
320
探せぇ!お薦めAWSセキュリティワークショップ!!〜 怒涛のワークショップ 48 連戦 〜
kentosuzuki
1
650
SIEM って何?〜 Amazon OpenSearch で始める SIEM 〜
kentosuzuki
0
800
Verified Accessから始めるゼロトラストセキュリティ
kentosuzuki
1
620
復活のAWS DeepComposer 〜 古代兵器から始める生成系AI 〜
kentosuzuki
0
320
新卒入社が考える『AWSではじめるクラウドセキュリティ』を読むタイミング
kentosuzuki
0
640
べ、べつにアンタのことなんて好きなんかじゃないんだからね!ねぇS3、アンタ聞いてんの!?
kentosuzuki
0
610
Other Decks in Technology
See All in Technology
サーバーレスアーキテクチャと生成AIの融合 / Serverless Meets Generative AI
_kensh
12
2.8k
20250208_OpenAIDeepResearchがやばいという話
doradora09
PRO
0
160
The 5 Obstacles to High-Performing Teams
mdalmijn
0
250
AIエージェントについてまとめてみた
pharma_x_tech
20
13k
例外処理を理解して、設計段階からエラーを「見つけやすく」「起こりにくく」する
kajitack
14
4.6k
Nekko Cloud、 これまでとこれから ~学生サークルが作る、 小さなクラウド
logica0419
2
150
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
520
現場で役立つAPIデザイン
nagix
13
3.6k
ろう・難聴者のコミュニケーションを円滑化する取り組み
chiemi627
0
130
データ基盤の成長を加速させる:アイスタイルにおける挑戦と教訓
tsuda7
3
610
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
910
AIをプロダクトに実装するならAPIで分離しよう 〜タクシーアプリ『GO』のアーキテクチャ実例紹介〜
74th
2
140
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
98
5.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Bash Introduction
62gerente
610
210k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Fireside Chat
paigeccino
34
3.2k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Practical Orchestrator
shlominoach
186
10k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
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のコンテンツはまだありません... 僕が作ります︕ 許してください︕︕🙏