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
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
390
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
410
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
220
解析の定理証明実践@Lean 4
dec9ue
0
170
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
620
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
29
10k
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
220
Postman AI エージェントビルダー最新情報
nagix
0
110
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
700
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
stefafafan
0
120
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
3
860
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
330
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7k
For a Future-Friendly Web
brad_frost
179
9.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
Designing Experiences People Love
moore
142
24k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Adopting Sorbet at Scale
ufuk
77
9.4k
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