追記
作者のcatnose99さんがより詳細を解説してくださいました
/追記
ポエム特化のZenn2との噂の「しずかなインターネット」を使いはじめたので、ユーザーとしてどんな技術が使われているのかを確認していく。
おもむろにbuiltwith.comにかけてみる。
ここで分かる情報はブラウザのDevTools眺めてても得られるのであまり収穫はない。
- 前段にCloudflareのCDNサーバーがいて
- Next.jsで生成されたレスポンスを返している
ことがわかる。
この時点ではキャッシュのみCloudflareなのか、Pages/WorkersでNext.jsのSSRごと動かしているのかは判断できない。
認証
Set-Cookie: __Secure-next-auth.session-token=が含まれているのでNextAuth.jsを使っているのが分かる。
Emailでサインアップするとhttps://sizu.me/enter/callback/firebase-action?apiKey=...というリンクを送ってくるのでFirebase Authenticationでユーザーが管理されているのも分かる。
ストレージ(R2)
画像をアップロードすると r2.sizu.meというホストのURLが割り当てられ、Cloudflare R2が利用されているのが分かる。
フロントエンドサーバー(Cloudflare)
/api/..以下がCloudflareを指すので完全に静的なexportサイトではないことが分かる。
ただ/dashboard以下のページは__NEXT_DATA__.nextExport=trueになっているのでSSGな部分とCSRな部分が混在している。
共通UIが静的でログインユーザーの情報は/api/..から取得しているのだと思う。
コンテンツキャッシュ(Cloudflare)
投稿の詳細ページは本文を含む完全なHTMLを返してきて__NEXT_DATA__.gssp=trueになるのでSSRなことが分かる。
ブラウザのナビゲーションで同じページを開くと/api/trpc/postDetail.getからコンテンツは取得される。
同じページをナビゲーションで2回開くとAPIにアクセスは発生しないのでクライアントサイドのキャッシュもあることが分かる。
バックエンドサーバー(Google Cloud)
ここから先はアプリケーションを調べても分からないし、人海戦術で作者のcatnoseさんの発言内容をチェックする(そもそも聞いたら教えてくれると思う *1 )
以下のポストはしずかなインターネット開発中のものと思われる
個人的に推していきたい構成はこれだな
— catnose (@catnose99) 2023年3月29日
・Next.js on Cloud Run
・Cloudflare
・PlanetScale
・Upstash (Redis)
・Cloud Tasks
・Cloud Scheduler
アクセスがなければ¥0、スケールしても段階的に料金が上がっていくから安心。
これによるとCloudflare Pages/WorkersでDB接続まではしていなさそうで、コアサーバーはCloud Runの方にありそう。
その場合、バックグラウンドジョブなどの実行もCloud Runベースになるだろう。
DBやRedisはそのままPlanetScaleとUpstashなのかもしれないが、定かではない。
APIサーバー(tRPC)
設定 https://sizu.me/dashboard/settingsから更新すると/api/trpc/user.updateに対してPOSTリクエストが送信される。
命名からしてtRPCが使われていそう。
API Routesの下でBFFとなるエンドポイントがあって、trpcサーバーのモジュールを通して、Cloud Runにあるバックエンドのサーバーと通信している?
追記
BFF→Cloud Runの二段階アーキテクチャではなしに、trpcサーバーからDBに接続する層もCloud Runで動作しているらしい。
フルスタックNext.jsアプリをCloudRunにデプロイしてます。
— catnose (@catnose99) 2023年11月23日
CloudRunの東京リージョンにカスタムドメインを紐づけるとレイテンシが発生する問題の対応として、Cloudflare Workersを前段に置いてますhttps://t.co/EMw1Yg4ijj
まとめ
プレゼンテーション層とデータ層を処理するフルスタックなNext.jsアプリケーションがCloud Runで動いていて、Cloud Runの制約上発生するレイテンシをなくすためにその前段にCloudflare Workersでプロキシしているというアーキテクチャだということが分かった。
初期ZennがVercelとApp EngineのRails APIで構築されていたのを更にフルJavaScript版に進めた感じがしますね。
