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
910
Verified Accessから始めるゼロトラストセキュリティ
kentosuzuki
1
690
復活のAWS DeepComposer 〜 古代兵器から始める生成系AI 〜
kentosuzuki
0
370
新卒入社が考える『AWSではじめるクラウドセキュリティ』を読むタイミング
kentosuzuki
0
720
Other Decks in Technology
See All in Technology
Amazon SNSサブスクリプションの誤解除を防ぐ
y_sakata
3
200
DATA+AI SummitとSnowflake Summit: ユーザから見た共通点と相違点 / DATA+AI Summit and Snowflake Summit
nttcom
0
140
LLM拡張解体新書/llm-extension-deep-dive
oracle4engineer
PRO
27
7.6k
Frontier Airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
frontierairlineswithflyagent
0
100
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.7k
Step Functions First - サーバーレスアーキテクチャの新しいパラダイム
taikis
1
220
ClaudeCode_vs_GeminiCLI_Terraformで比較してみた
tkikuchi
1
3.9k
複数のGemini CLIが同時開発する狂気 - Jujutsuが実現するAIエージェント協調の新世界
gunta
7
1.5k
ObsidianをLLM時代のナレッジベースに! クリッピング→Markdown→CLI連携の実践
srvhat09
7
8k
ソフトウェアQAがハードウェアの人になったの
mineo_matsuya
3
240
Digitization部 紹介資料
sansan33
PRO
1
4.6k
"Découvrir le Liberland"
rlifchitz
0
130
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Faster Mobile Websites
deanohume
308
31k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Unsuck your backbone
ammeep
671
58k
4 Signs Your Business is Dying
shpigford
184
22k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
The Invisible Side of Design
smashingmag
301
51k
Bash Introduction
62gerente
613
210k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
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のコンテンツはまだありません... 僕が作ります︕ 許してください︕︕🙏