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
300
上流工程に挑戦!「俺の考えた最強サーバレス構成」が一瞬で敗北した件
kentosuzuki
2
310
S3から始めるAWS 〜S3の簡単なユースケースの紹介〜
kentosuzuki
1
640
AWS のポリシー言語 “Cedar” で実現するアクセス制御
kentosuzuki
0
400
探せぇ!お薦めAWSセキュリティワークショップ!!〜 怒涛のワークショップ 48 連戦 〜
kentosuzuki
1
700
SIEM って何?〜 Amazon OpenSearch で始める SIEM 〜
kentosuzuki
0
900
Verified Accessから始めるゼロトラストセキュリティ
kentosuzuki
1
690
復活のAWS DeepComposer 〜 古代兵器から始める生成系AI 〜
kentosuzuki
0
360
新卒入社が考える『AWSではじめるクラウドセキュリティ』を読むタイミング
kentosuzuki
0
710
Other Decks in Technology
See All in Technology
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
SREのためのeBPF活用ステップアップガイド
egmc
1
310
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.2k
Claude Code に プロジェクト管理やらせたみた
unson
7
4.7k
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
2
510
インフラ寄りSREの生存戦略
sansantech
PRO
8
2.8k
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
210
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
210
オフィスビルを監視しよう:フィジカル×デジタルにまたがるSLI/SLO設計と運用の難しさ / Monitoring Office Buildings: The Challenge of Physical-Digital SLI/SLO Design & Operation
bitkey
1
140
TableauLangchainとは何か?
cielo1985
1
120
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
180
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
14
6.6k
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Facilitating Awesome Meetings
lara
54
6.4k
4 Signs Your Business is Dying
shpigford
184
22k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
What's in a price? How to price your products and services
michaelherold
246
12k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Language of Interfaces
destraynor
158
25k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
How to Ace a Technical Interview
jacobian
278
23k
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のコンテンツはまだありません... 僕が作ります︕ 許してください︕︕🙏