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
自作ブログ with Cloudflare Pages
Search
Jerome_1010
June 15, 2022
Technology
0
64
自作ブログ with Cloudflare Pages
Cloudflare Pagesを使ってみた話
Jerome_1010
June 15, 2022
Tweet
Share
More Decks by Jerome_1010
See All by Jerome_1010
Age-Friendly Web UI
jerome_1010
0
19
三週間リモートワークしてわかった 仕事・生活でのtips / Tips for Remote Work with my 3weeks experience
jerome_1010
0
380
Firebase Remote Config for JavascriptをWebGLで使う
jerome_1010
0
39
Other Decks in Technology
See All in Technology
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
120
VISITS_AIIoTビジネス共創ラボ登壇資料.pdf
iotcomjpadmin
0
160
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
2
200
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
220
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
4
640
BigQuery Remote FunctionでLooker Studioをインタラクティブ化
cuebic9bic
3
260
VCpp Link and Library - C++ breaktime 2025 Summer
harukasao
0
240
Agentic Workflowという選択肢を考える
tkikuchi1002
1
480
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
390
Azure AI Foundryでマルチエージェントワークフロー
seosoft
0
180
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
29
10k
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
170
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
4 Signs Your Business is Dying
shpigford
184
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Typedesign – Prime Four
hannesfritz
42
2.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
A Tale of Four Properties
chriscoyier
160
23k
Transcript
自作ブログ with Cloudflare Pages 2022/06/15 LT会
• 料理とゲームとドット絵が好き ◦ VALORANTにハマってます! ◦ ゲーム制作は最近サボり気味... • 最近の悩み: ◦ 歯軋りが強すぎて奥歯にヒビ
🦷 自己紹介 @Jerome_1010
そもそもなんで作ったのか
手札を増やしたかった
いろいろ触ったのでざっくり紹介
構成図 push publish build & deploy Cloudflare Pages GraphCMS CDN
fetch contents users
構成図 push publish build & deploy Cloudflare Pages GraphCMS CDN
fetch contents users
ブログ本体: Next.jsでSSG • 普通のSSGでOK • 本当はNuxt v3を使いたかったがSSGがまだExperimental • ReactやNext.jsを触ってみたかったのでヨシ!
テスト: vitest • viteを使ったテストフレームワーク • とにかく高速 ◦ watchの開発体験が良い • jestとほとんど同じ書き味で書ける
• ほぼ設定なし ◦ 元々viteで動かしているわけではないため viteの設定だけ追加が必要 ◦ ts-jestとか@types/jest、jest.config.jsとサヨナラ • In-source testingが書ける
CMS: GraphCMS • GraphQLでアクセスできるヘッドレスCMS • 個人〜小規模な利用なら無料の範囲で使える ◦ 3ユーザーまで無料で利用可 ◦ 100万回/月のAPIコールと
月間100GBのトラフィックまで無料
• build, deploy, hosting全部コレ ◦ インフラをほぼ気にしないで OK • CDNでホストされるので高速 •
analytics画面も提供してくれる build, deploy & hosting: Cloudflare Pages
使い方 1/3 1. githubリポジトリと連携
使い方 2/3 2. ビルドコマンドとディレクトリを指定
• 後はbranchをpushするだけ • mainにmergeやpush -> 本番デプロイ • その他のbranchをpush -> preview用ページがデプロイされる
◦ preview用のurlが作られる ◦ urlは <hash>.<project-name>.pages.dev で生成される ◦ <branch名>.<project-name>.pages.dev でもアクセスできる(エイリアスが貼られる ) • Cloudflare Accessによるアクセス制限も可能 ◦ preview画面はチームのみ閲覧可能にしたり 使い方
tips • 🚨カスタムドメインを使う場合はCloudflare DNSに寄せる必要がある ◦ サブドメインならCNAMEの登録のみでOK • 環境変数にtokenを含めればプライベートパッケージの読み込みも可能 • 🚨環境変数が平文で保存される
◦ secretを保存する枠は無い (workerにはある) • 🚨デフォのnodeバージョンが古い ◦ 環境変数でNODE_VERSIONとして指定してねとある ◦ が、.node-versionを読み込んでくれるのでそちらで指定した方が良さそう
• 無料ではビルドパイプラインは1つまで • 無料では500ビルド/月まで • ホストするサイト数、リクエスト数、帯域幅に一切制限なし(!!) • DNSの利用も無料 [参考] https://www.cloudflare.com/ja-jp/plans/#overview
https://www.cloudflare.com/ja-jp/plans/developer-platform/#overview 料金
感想 • SSGで済む場合Cloudflare Pagesは良い選択肢かも • 個人ブログなら正直CMSを使う必要はない ◦ マークダウンで記事書いて pushすれば良い •
CMSを導入する必要がある場合GraphCMSは良さそうだった • vitestの速さ、設定の簡単さは開発効率を上げられそう
今後やりたいこと • GraphCMSのスキーマからTSの型を生成する • UIライブラリなどの導入 • Cloudflare Workersを使ったSSRの導入
• Cloudflare PagesやVercelとの比較 https://zenn.dev/catnose99/scraps/6780379210136f • vitestとjestの速さ比較 https://zenn.dev/jay_es/articles/2021-12-22-vitest-comparison 参考資料
ありがとうございました!
構成図 push publish build & deploy Cloudflare Pages GraphCMS CDN
fetch contents users