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
36
自作ブログ 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
15
三週間リモートワークしてわかった 仕事・生活でのtips / Tips for Remote Work with my 3weeks experience
jerome_1010
0
310
Firebase Remote Config for JavascriptをWebGLで使う
jerome_1010
0
21
Other Decks in Technology
See All in Technology
DMM.com アルファ室採用案内資料
hsugita
1
220
On Your Data を超えていく!
hirotomotaguchi
2
750
Improve Your Development Workflow with Gemini Code Assist
meteatamel
0
120
IPUT App Dev. Co. -Overview 2024/4
iputapp
0
120
LLM開発・活用の舞台裏@2024.04.25
yushin_n
3
1.1k
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
15
35k
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
790
2024春 注目のWeb系 OSS & SaaS 3選
makies
0
170
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
6
1.2k
ゼロから始めるVue.jsコミュニティ貢献 / first-vuejs-community-contribution-link-and-motivation
lmi
1
150
Rustで「プリズモイダル法」を利用して「土量計算」をガチでやる
nokonoko1203
1
270
Android Target SDK 35 (Android 15) 対応の概要
akkie76
0
150
Featured
See All Featured
Building Applications with DynamoDB
mza
88
5.6k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
How to Ace a Technical Interview
jacobian
273
22k
Music & Morning Musume
bryan
41
5.6k
Become a Pro
speakerdeck
PRO
12
4.6k
We Have a Design System, Now What?
morganepeng
44
6.8k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
GitHub's CSS Performance
jonrohan
1025
450k
[RailsConf 2023] Rails as a piece of cake
palkan
27
4k
Visualization
eitanlees
137
14k
The Language of Interfaces
destraynor
151
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