自分のブログを作る

AIである程度プロダクト作れるようになったし、自分のサイトぐらい作るか！と思って着手しました。

そこでつまづいたこと、思ったことを発信できればと思います。

いくつかプロダクトの方向性は考えていて、主に

• ブログを書ける
• 自分の旅行の軌跡を書ける
• 2Dゲーム作り支援ツール

を作ろうかなぁと思っています。

とはいえ2026-7-30現在、ある程度の機能はできているので最初の方の記事は振り返りになるかなぁ。

今の所は収益化するつもりはないし、他の人が使えるようにするつもりもないです。

ブログのアーキテクチャ

まず第一に発信基盤は作りたいなということで、ブログから着手を行う。 とりあえず、adminページは欲しい(ログイン必須)、レイテンシは今は特に追い求めていない、とりあえずRustは使いたいということで、フロントはClouflareにデプロイして安くすませつつ、GCPのcloud runにrustのbackendを上げるということに決定。

FinOps的にはCloudflareに全てまとめた方が良い、かつrustはwasm化すればcloudflareにデプロイできる、というのは一旦おいておきます (cockroachDB使いたかったというのもあるんや......)

• 将来的にはcockroachDBとかも廃止してcloudflareに寄せても良いかもねー

ということでインフラの技術スタックは下記の通り

• フロントエンド
  • Cloudflare workers, R2, Register, Access: ドメイン取得、認証、frontとBFFのデプロイ先、ブログのhtmlや画像のアップロード先
• バックエンド
  • Cloud run: rustで書いたbackend のデプロイ先
• CI/CD
  • Github actions: front, backendのテスト、lint, build, deploy
  • Google Artifact registry : backend image　置き場
• Database
  • cockroachDB

こうしてみると歪だなぁ。GCPは微妙に金がかかるからCloudflareに移すべきだなぁ。 今の所GCPは月30円くらい、Cloudflareは0円。 cockroachDBはpostgres互換なので、cloudflare単体の場合のDBが少し貧弱なので使っている。そして外部DBを使いたい場合にcloudflare側からだとちょっと面倒なのでGCP経由でアクセスしようと思ったんだっけ。

まぁ、GCPの請求はartifact registryなので頑張れば削減できる。

アーキテクチャ図。(このブログがmermaidに対応していないとレンダリングされていないと思います)

flowchart LR
  User[user]

  subgraph Client
    Browser[React]
  end

  subgraph Cloudflare
    Front[Frontend / Workers]
    Worker[BFF / Workers]
    Storage[R2]
  end

  subgraph GCP
    API[Rust / Cloud Run]
  end
  
  subgraph cockroachDB
    Blog[Blog]
  end

  User -->|HTTPS| Front
  Front --> Browser
  Browser -->|API Request| Worker
  Worker -->|HTTP| API
  Worker --> Storage
  API --> Blog

どこを頑張りたいか

• rustでmarkdown parserを書いてwasm化してオレオレeditorを作る(今はts側でレンダリング)
• システム疎結合
  • 今の課題として、ブログ表示までのフローがいけていない。cockroachDBの情報は何かあった時の正本 (これはまぁ思想的には正しいと思っている)。なのでCRUDはありつつも、基本的なコンテンツ表示に用いる必要はない。今はcontent_keyをDBから引っ張ってそれを用いてR2から取得して...ということをしており、読み込みがちょっと遅い。