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
620
AWS のポリシー言語 “Cedar” で実現するアクセス制御
kentosuzuki
0
390
探せぇ!お薦めAWSセキュリティワークショップ!!〜 怒涛のワークショップ 48 連戦 〜
kentosuzuki
1
690
SIEM って何?〜 Amazon OpenSearch で始める SIEM 〜
kentosuzuki
0
880
Verified Accessから始めるゼロトラストセキュリティ
kentosuzuki
1
670
復活のAWS DeepComposer 〜 古代兵器から始める生成系AI 〜
kentosuzuki
0
350
新卒入社が考える『AWSではじめるクラウドセキュリティ』を読むタイミング
kentosuzuki
0
700
Other Decks in Technology
See All in Technology
Model Mondays S2E01: Advanced Reasoning
nitya
0
410
Autonomous Database サービス・アップデート (FY25)
oracle4engineer
PRO
2
780
工具人的一生: 開發很多 AI 工具讓我 慵懶過一生
line_developers_tw
PRO
0
240
ゆるSRE #11 LT
okaru
1
640
IIWレポートからみるID業界で話題のMCP
fujie
0
530
「伝える」を加速させるCursor術
naomix
0
640
ObsidianをMCP連携させてみる
ttnyt8701
2
130
QAはソフトウェアエンジニアリングを学んで実践するのが大事なの
ymty
1
440
vLLM meetup Tokyo
jpishikawa
1
240
Amazon Q Developer for GitHubとAmplify Hosting でサクッとデジタル名刺を作ってみた
kmiya84377
0
3.5k
DenoとJSRで実現する最速MCPサーバー開発記 / Building MCP Servers at Lightning Speed with Deno and JSR
yamanoku
1
120
Rubyで作る論理回路シミュレータの設計の話 - Kashiwa.rb #12
kozy4324
1
320
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
The Cost Of JavaScript in 2023
addyosmani
50
8.4k
A better future with KSS
kneath
239
17k
What's in a price? How to price your products and services
michaelherold
245
12k
Agile that works and the tools we love
rasmusluckow
329
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
910
Being A Developer After 40
akosma
90
590k
RailsConf 2023
tenderlove
30
1.1k
How to Ace a Technical Interview
jacobian
276
23k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
We Have a Design System, Now What?
morganepeng
52
7.6k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
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のコンテンツはまだありません... 僕が作ります︕ 許してください︕︕🙏