🍆

ほぼ0円でWebサービスを公開するための構成例(ドメイン代含む)

2024/01/22に公開

https://qiita.com/swiftman/items/06184864b799a0987784

上記記事にインスパイアされて、僕なりのほぼ0円(課金されてもせいぜい1円前後)構成を共有したいと思い、本記事を書くことにしました。

Next.js + Supabase で開発されたWebサービスを想定しています。
下記サイトは実際にこの構成で開発・デプロイしています。(誰も使ってくれない...><)

https://donzuba.jp/

開発構成

  • フロントエンド: Cloud Run(GCP)
  • バックエンド + データベース: Supabase
  • 画像ストレージ: Cloud Storage(GCP)
  • 動的OGP画像生成: Netlify

どれでも商用利用可能なデプロイ先です。
Vercelの無料プランは商用利用(アフィ広告を含む)する場合には使えません。利用規約的に有料プランを使うことになるので避けています。

Cloud Run(Next.jsデプロイ先)

Cloud Runは従量課金制の有料ではありますが、1年間 90日間有効なお試しクレジットが与えられるため、ローンチ時には無料で始められます。

SSRなどのバックエンド処理は極力利用せずにクライアントサイドでリクエストするようにすると尚良し!(Donzubaでは、バックエンド処理しているのは認証のコールバックやユーザー退会処理程度です。それ以外はほとんどがクライアントからリクエストしています。ChromeのNetworkタブなどから確認いただけるかと思います。)

Supabase(バックエンド + RDB)

Supabaseはエグレスコスト(データ転送量)に応じて課金される可能性がありますが、それなりに使われないと有料化しないので心配する必要はありません。注意点として、画像などの大きなデータはSupabase Storageを使わずにGCPのCloud Storageに格納するようにしましょう。

Cloud Storage(画像格納)

画像などの大きなデータを格納します。
保存データ量や転送量に応じて課金されますが、ローンチ時のアクセスの少なさであれば、かかっても数円程度で済むことでしょう。

Netlify(動的OGP生成)

新規のNext.jsをデプロイしています。
Cloud Runで動的OGP生成しないのはバックエンド処理時にかかるコストを逃がすためです。余計な計算コストは無料のデプロイ先を使わせてもらいましょう!

例えば、 https://donzuba.jp/topics/5746036e-59d6-4a91-be15-74828c13a95e の動的OGP画像はNetlifyにデプロイされたNext.jsの https://services.donzuba.jp/api/topics/ogp/5746036e-59d6-4a91-be15-74828c13a95e から配信されています。(DB参照はどちらもSupabaseを向いています。)

ドメイン代(実質0円)

ドメイン代も実質無料で済ませることができます。
A8などのアフィリエイトサイトからセルフバックで Xserverドメインなどの広告からドメインを申し込むと100%還元されていたります。結構忘れがちですが、積極的にセルフバックを活用しましょう!

▼こんな感じのやつ

Webサービスをほぼ0円で公開できる最高な時代になってます!

ぜひ有り難く0円で公開させてもらいましょう!
ユーザーが付いてからお金を払えばいいなんて有難すぎ!!

Discussion