ブログはじめました

  • Memo

公開日: 2025/06/30 10:57

更新日: 2025/12/22 11:12

背景

端的に言えば、長文で自分の意見をツラツラと書き留めて考えをアウトプットする場が欲しかったのが一番の理由である。

技術的な側面で言えば、ZennやQiitaなどのプラットフォームを利用すれば良かったのだが、それ以外にもポエム的なことを綴りたい...!!と思って自分でブログを作ることにした。

（とりあえず最低限の機能に絞って作成したので、個人ブログとして改善しなければいけない箇所はそれなりにあるが...

技術はイケイケ。でも運用が続かなくて中身が薄いという個人ブログのあるある顛末にはなりたくないので、これからも定期的にアウトプットを続けられると信じて... 🙏

ブログの作成

ブログを作成する上での方針は、「自分が使いたい技術を使う」「低ランニングコスト」としている。

技術構成

大まかに以下の通り。

  • Web Server: Remix, Hono
  • Hosting: GCP (Cloud Run), Cloudflare (Workers)
  • Headless CMS: Newt

いずれも技術欲求を満たすべく、普段業務では利用する機会があまりなかったものを採用している。

ランニングコスト

まだアクセス数も多くないため、月々のランニングコストは200円以内に抑えられている。

Screenshot2024-07-15at13.25.23.png

Webサーバー自体はCloud Runにホスティングしているが、そこにカスタムドメインをGCPの機能に絞って紐付けさせようとすると

の2択を迫られる。後者がプレビュー段階ということもあり、一般的には前者でホスティングすることが一般的だと理解しているが、時間単位に応じた課金なので、如何せんランニングコストが必要とされる。

ネットワークの料金google.comネットワークの料金ネットワークの料金。

後者に関しては特別な料金は必要ないが、著しくレイテンシが増えることなどが懸念としてあったためこちらも選択肢としては外れた。（あとはSSL証明書のプロビジョニングが1日経過しても終わらない現象に遭遇した）

カスタムドメインを使用すると、一部のリージョンでApp Engineがアプリのユーザーに送信するレスポンスに、著しいレイテンシが発生することがあります。リージョンは以下の通りです。

カスタム ドメインのマッピング  |  App Engine standard environment  |  Google Cloud Documentationgoogle.comカスタム ドメインのマッピング  |  App Engine standard environment  |  Google Cloud Documentation

そこで、Cloud Runでホスティングした際に自動生成されるURLをCloudflare Workersでバイパスするようにして、オリジンを隠蔽することとした。いずれにせよCloudflareをフルプロキシで通してCDNキャッシュを効かせつつ安価に済ませたい気持ちがあったので、この形に落ち着いた。

「その構成で安価に済ましたいのであればCloudflare Pages使うなり、もっと静的にホスティングすればよくない？」という声も聞こえてくるが、Knativeをカスタマイズしたいという技術的好奇心もあってそこは譲れなかった（？）

CloudflareのフリープランでもPrivateリソグという用途であれば十二分に機能を提供してくれるので、ランニングコストが発生しているのは最終的にGCPのRunとArtifact Registryのみとなっている。

無料プランの概要cloudflare.com無料プランの概要無料プランでは、無料でのSSL証明書、CDN、DDoS攻撃対策、サイト保護など、必要な基本機能がすべて提供され、ウェブサイトを高速化します。今すぐチェック。

Caching

ここではCache-Controlをはじめとしたキャッシュ戦略についてまとめる。

Cache-Control

コンテンツの同期性がそこまで求められないと判断し、それなりにCache-Controlは強めに指定している（少しキッチンシンクってるが...

  • index.html: public, max-age=0, must-revalidate, s-maxage=3600 stale-while-revalidate=31536000
  • キャッシュバスティングしているサブリソース: public, max-age=31536000, immutable
  • それ以外のサブリソース: public, max-age=3600, stale-while-revalidate=31536000

特に、stale-while-revalidateは多用している。というのも、コストの観点からCloud Runの最小インスタンス数を0にしているため、そこからコールドスタートする場合どうしてもFTTBが遅くなってしまう。

そこで、CDNにはキャッシュを長めに持ってもらいつつ、非同期で再検証を行うことでユーザー体験を損なわないように意識した。

Stale-While-Revalidateの挙動について

結論から言えばCloudflare WorkerとKVを利用して、非同期で再検証を行うStale-While-Revalidateの挙動を自前で実装している。

当初はCloudflare CDNキャッシュを使用していたが、キャッシュサーバーが保持しているキャッシュがStaleになった場合に、全てのリクエストを非同期で検証しておきつつ、Staleを迅速に返すという挙動ができないようであった。

Cloudflare Cache と stale-while-revalidate - Qiitaqiita.comCloudflare Cache と stale-while-revalidate - QiitaUpdate 2025/04 私のフリープランのゾーンに Async SWR が来た模様です。 2024/04のCloudflareブログ やること Cloudflare の Cache がオリジンからの stale-while-revalidate にどう反応するか...

そこでCloudflare WorkerとKVを利用して、意図する挙動を再現している状態である。

といいつつ、いくつか課題が残っている状態だ。たとえば、Request CollapsingをはじめとしたCDNで求められる挙動に関しては実装できていないため、Stale時にリクエストを多重で飛ばせばその分オリジンにリクエストが飛んでしまう点は既知の課題として存在している状態である。

追記:

Coming soon: asynchronous revalidation with stale-while-revalidate

Browser Rendering API GA, rolling out Cloudflare Snippets, SWR, and bringing Workers for Platforms to all userscloudflare.comBrowser Rendering API GA, rolling out Cloudflare Snippets, SWR, and bringing Workers for Platforms to all usersBrowser Rendering API is now available to all paid Workers customers with improved session management

どうやらそれがCloudflare CDNでサポートされるらしいので、GAになったら移す予定だ。

Headless CMS

マークダウンの執筆にはNewtを採用した。国内で有名どころで言えばmicroCMSなどが挙げられるが、個人的に応援しているサービスでもあるNewtを採用した。

コンテンツ管理の新しいスタンダード | ヘッドレスCMS「Newt」newt.soコンテンツ管理の新しいスタンダード | ヘッドレスCMS「Newt」Newtは、APIベースでコンテンツ管理を行うことができるヘッドレスCMSです。最新のウェブ環境に対応したCMSでコンテンツとチームのパフォーマンスを最大化します。

今のところ使い心地はかなり良く、こちらも併せて無料で運用ができている。

OGP

OG ImageはCloudflare Workersとsatoriを利用して動的に画像を生成している。

download.png

ここで発生した問題として、Workersの無料プランは

10 milliseconds of CPU time per invocation

という制限があり、たまに画像の生成が失敗する。

Pricing · Cloudflare Workers docscloudflare.comPricing · Cloudflare Workers docsWorkers plans and pricing information.

こちらは課金すれば下記のように緩和されるので、本質的な改善としては課金するべきだが、R2に生成した画像をキャッシュとして利用することでエラーとなる箇所を狭めている。

30 million CPU milliseconds included per month +$0.02 per additional million CPU milliseconds

Max of 30 seconds of CPU time per invocation Max of 15 minutes of CPU time per Cron Trigger or Queue Consumer invocation

R2に関してはエグレス料金が0というメリットや使い勝手も良く、個人的には気に入っているサービスの1つになった。

Overview · Cloudflare R2 docscloudflare.comOverview · Cloudflare R2 docsCloudflare R2 is a cost-effective, scalable object storage solution for cloud-native apps, web content, and data lakes without egress fees.

TODOs

将来的には

  • 見出し
  • タグ別検索
  • パフォーマンス改善
    • 画像

なども機能追加していきたい。