自作ブログ with Cloudflare Pages

Cloudflare Pagesを使ってみた話

Transcript

1. 自作ブログ with
 Cloudflare Pages
 2022/06/15 LT会
2. • 料理とゲームとドット絵が好き ◦ VALORANTにハマってます！ ◦ ゲーム制作は最近サボり気味... • 最近の悩み： ◦ 歯軋りが強すぎて奥歯にヒビ 🦷 自己紹介 @Jerome_1010
3. そもそもなんで作ったのか
4. 手札を増やしたかった
5. いろいろ触ったのでざっくり紹介
6. 構成図 push publish build & deploy Cloudflare Pages GraphCMS CDN fetch contents users
7. 構成図 push publish build & deploy Cloudflare Pages GraphCMS CDN fetch contents users
8. ブログ本体: Next.jsでSSG • 普通のSSGでOK • 本当はNuxt v3を使いたかったがSSGがまだExperimental • ReactやNext.jsを触ってみたかったのでヨシ！
9. テスト: vitest • viteを使ったテストフレームワーク • 󰢏とにかく高速 ◦ watchの開発体験が良い • 󰢏jestとほとんど同じ書き味で書ける • 󰢏ほぼ設定なし ◦ 元々viteで動かしているわけではないため viteの設定だけ追加が必要 ◦ ts-jestとか@types/jest、jest.config.jsとサヨナラ • 󰢏In-source testingが書ける
10. CMS: GraphCMS • 󰢏GraphQLでアクセスできるヘッドレスCMS • 󰢏個人〜小規模な利用なら無料の範囲で使える ◦ 3ユーザーまで無料で利用可 ◦ 100万回/月のAPIコールと 月間100GBのトラフィックまで無料
11. • 󰢏build, deploy, hosting全部コレ ◦ インフラをほぼ気にしないで OK • 󰢏CDNでホストされるので高速 • 󰢏analytics画面も提供してくれる build, deploy & hosting: Cloudflare Pages
12. 使い方 1/3 1. githubリポジトリと連携
13. 使い方 2/3 2. ビルドコマンドとディレクトリを指定
14. • 後はbranchをpushするだけ • mainにmergeやpush -> 本番デプロイ • その他のbranchをpush -> preview用ページがデプロイされる ◦ preview用のurlが作られる ◦ urlは <hash>.<project-name>.pages.dev で生成される ◦ <branch名>.<project-name>.pages.dev でもアクセスできる(エイリアスが貼られる ) • Cloudflare Accessによるアクセス制限も可能 ◦ preview画面はチームのみ閲覧可能にしたり 使い方
15. tips • 🚨カスタムドメインを使う場合はCloudflare DNSに寄せる必要がある ◦ 󰢏サブドメインならCNAMEの登録のみでOK • 󰢏環境変数にtokenを含めればプライベートパッケージの読み込みも可能 • 🚨環境変数が平文で保存される ◦ secretを保存する枠は無い (workerにはある) • 🚨デフォのnodeバージョンが古い ◦ 環境変数でNODE_VERSIONとして指定してねとある ◦ が、.node-versionを読み込んでくれるのでそちらで指定した方が良さそう
16. • 󰢏無料ではビルドパイプラインは1つまで • 󰢏無料では500ビルド/月まで • 󰢏ホストするサイト数、リクエスト数、帯域幅に一切制限なし(!!) • 󰢏DNSの利用も無料 [参考] https://www.cloudflare.com/ja-jp/plans/#overview https://www.cloudflare.com/ja-jp/plans/developer-platform/#overview 料金
17. 感想 • SSGで済む場合Cloudflare Pagesは良い選択肢かも • 個人ブログなら正直CMSを使う必要はない ◦ マークダウンで記事書いて pushすれば良い • CMSを導入する必要がある場合GraphCMSは良さそうだった • vitestの速さ、設定の簡単さは開発効率を上げられそう
18. 今後やりたいこと • GraphCMSのスキーマからTSの型を生成する • UIライブラリなどの導入 • Cloudflare Workersを使ったSSRの導入
19. • Cloudflare PagesやVercelとの比較 https://zenn.dev/catnose99/scraps/6780379210136f • vitestとjestの速さ比較 https://zenn.dev/jay_es/articles/2021-12-22-vitest-comparison 参考資料
20. ありがとうございました！
21. 構成図 push publish build & deploy Cloudflare Pages GraphCMS CDN fetch contents users