はじめに

皆様こんにちわ^^ この度新しい技術情報共有プラットフォームを作りましたので、技術スタックを紹介します^^
このプラットフォームの特徴は 企業 -> 筆者にお金が流れる ことです！莫大な利益を上げてる企業がお世話になってるはずの技術記事の筆者の方に利益を還元していないのが凄く違和感っだので、作ってみました^^ よければ覗いてみてください！

お金の流れ方

サービスページ

技術選定の方針

ユーザーの方が少数な時はなるべくランニングコストを抑えられる構成を目指しました^^ また運用がめんどくさいのも嫌なので、なるべくマネージドサービスを使う構成も目指しました！

アーキテクチャの全体像

フロントエンド

開発言語

Typescript を使用しています。

フレームワーク

Next.js を使用しています。
少し React の経験があった・楽に SSR・SSG したかったので Next.js にしました〜
開発してて思ったんですが、画像周りの機能凄いですね😳 画像の最適化 ( リサイズ・フォーマット変更・圧縮 ) を自動でしてくれたり、public 配下の画像のコンテンツハッシュの生成とそれに伴うキャッシュ制御ヘッダーの付与までやってくれて、感動しました😳
ただ、画像の最適化の方は Cloud Run だと動かないぽいので、現状は使用してません。サービスが小さい内は画像の最適化は必須ではないと思ったので、ディグらずに最適化機能をオミットしちゃいました^^;

スタイリング

chakra ui を使用しています。
css なにもわからないマンの僕にとって、凄く使いやすかったです！

マークダウンプロセッサー

unified を使用しています。
unified は凄く大雑把に言うと、テキスト -> 抽象構文木 -> テキストへの変換をする為のインターフェースを提供してくれるライブラリです。プラグインを追加することで、markdown -> 抽象構文木 -> html という変換が可能になります！ちなみに、Prettier や Gatsby でも利用されています！

以下の機能はプラグインを書く事で対応しています^^

埋め込みの表示 ( e.g. リンクカード, youtube )
画像のリサイズ
コードブロックにファイル名を表示
独自記法

CDN

Cloudflare CDN 利用しています。
Cloudflare CDN は SWR がサポートされてないという制限はありますが、無料で利用できる CDN です！
有り難く使わせてもらってます^^ 現状はトップページと画像をキャッシュしております〜

CI/CD

Github Actions を使用しています。

バックエンド

開発言語

Typescript を使用しています。
フロントと型や定数の共有を楽にしたかったので、Typescript を選びました^^

フレームワーク

Nest.js を使用しています。
DI コンテナを使いたかったので、Nest.js にしました〜
ちなみに、GarphQL を話す API サーバーとなってます！

ORM

Prisma を使用しています。
Prisma は GraphQL と相性の良さを特徴の 1 つに持つ ORM です。デフォルトで、Dataloader 機能・カーソルベースページネーションをサポートしてくれてます。Overridon では GraphQL を採用しているので、Prisma を選択しました〜

認証

Firebase Auth を使用しています。
Firebase Auth は無料で MAU 制限なく使用できる IDaaS です！僕はセキュリティーの知識に関しては全然明るくないので、ありがたく使用させてもらってます^^

セッション管理

express-sessions を使用しています。
最初は Firebase Auth にセッション管理まで託していたのですが、初期化が遅すぎて UX が終わってたので、セッション管理だけ自前でやるようにしました〜

データベース

Cloud SQL を使用しています。
最初は Planetscale を使用していたのですが、Hobby plan 廃止に伴い東京リージョンが $47/月~ になるという事で、Cloud SQL に乗り換えました😭
他に検討した DB として、Neon・CockroachDB Serverless・Supabase Postgres があります。前 2 つについては、東京リージョンがない関係で、レスポンスタイムが遅すぎてやめました。Supabase については、無料プランを試した感じ、CloudSQL より 3~5 倍くらい遅く許容範囲を超えていたので、使用しませんでした！

オブジェクトストレージ

Cloudflare R2 を使用しています。
Cloudflare R2 はエグレス料金がかからないオブジェクトストレージです。バージョニング機能も特にありませんが、料金の観点で R2 を使用しています^^

決済

Stripe を使用しています。
ドキュメントも充実していますし、サポートの方も丁寧な回答をしてくれたので、凄く開発体験が良かったです！

メール送信

Resend を使用しています。
最初は SendGrid を使用していたのですが、開発中にメールが届かなくなる事が起こって、それに僕も怒って Resend に乗り換えました〜！SendGrid でメールが届かなくなる問題は新しいアカウントを作る事で対応できたのですが、新しいアカウントを作るのがめんどくさすぎて、また届かなくなったタイミングで、以前から気になっていた Resend に乗り換えました^^

バッチ

Cloud Scheduler・Cloud Run jobs を使用しています。

シークレットの管理

Secret Manager を使用しています。

CDN

Cloudflare を利用しています。

CI/CD

Github Actions を使用しています。

おわりに

最後まで読んでくれてありがとうございます！
このプラットフォームがうまくいくかは 企業が入ってきてくれるか に全てかかっていると、僕は思っています^^ なので、あなたの企業で導入してくれるように声をかけて頂けると、嬉しいです^^
あとよかったら、記事も投稿してみて下さい^^