全6,000問の個人開発アプリを月額0円で維持する技術。Next.js(SSG) × S3 × CloudFrontの最強構成

はじめまして！文系SESエンジニアの st（@st_works）です。

先日公開した、AWSやAzureなどのIT資格問題集アプリ『CloudQuiz』について、ありがたいことにQiitaで多くのViewとストックをいただきました！読んでくださった皆様、本当にありがとうございます。

今回は、エンジニアの皆様から特に関心の高かった 「個人開発におけるインフラコスト問題」 について、全6,000問以上・340ページ超のWebアプリケーションを 「初期費用・月額維持費ほぼ0円」 かつ 「爆速表示」 で運用しているAWSアーキテクチャの裏側を公開します。

💸 個人開発の最大の敵は「ランニングコスト」

個人開発でWebサービスを作る際、一番のネックになるのが**サーバー代（インフラコスト）**です。
よくある「EC2 + RDS（MySQL等）」の構成にしてしまうと、アクセスがゼロでも月額数千円〜1万円が固定で飛んでいきます。これでは収益化する前に心が折れてしまいます。

そこで『CloudQuiz』では、以下の3つをインフラ要件として設定しました。

完全な従量課金制（アクセスがない時は0円）
AWSの Always Free（永久無料枠）を最大限活用
SPA並みの表示速度とSEOの両立

これを実現したのが Next.js (SSG) × AWS Serverless の構成です。

🏗️ 採用したアーキテクチャ

本アプリのインフラ構成図は以下のようになっています。

1. フロントエンド：Next.js の SSG (Static Site Generation)

CloudQuizは全6,000問以上の問題データをJSONとして保持しています。
これをリクエストのたびにDBにクエリを投げて描画（SSR）すると、DBの維持費と処理コストがかさみます。
そこで Next.js の SSG を採用し、npm run build 時（デプロイ時）に、全340ページ分の問題をすべて静的なHTMLとして生成 しています。

2. 配信：Amazon S3 + CloudFront (月額0円の立役者)

生成された静的HTMLやアセット（CSS/画像）は、すべて Amazon S3 に配置し、CloudFront (CDN) 経由で配信しています。

S3: ストレージ料金はGB単価で数円〜数十円。静的ファイルのみなので、実質月額数円〜0円レベル。
CloudFront: AWSの無料利用枠として 毎月 1TB のデータ転送が永久無料。個人開発レベルのアクセスなら、CloudFrontの転送料金がかかることはほぼありません。
さらにエッジロケーションからキャッシュが爆速で返されるため、ユーザーの体感速度は100ms〜300ms程度になります。

3. 動的機能：Cognito + DynamoDB のオンデマンド課金

「お気に入り（ブックマーク）」や「学習進捗」などの動的なユーザーデータはどうしているのか？
ここも固定費のかかるRDSは使わず、以下のサーバーレス構成をとっています。

認証: Amazon Cognito (MAU 50,000人まで永久無料)
データベース: Amazon DynamoDB (オンデマンドキャパシティモード / Pay-Per-Request)
- DynamoDB はリクエスト単位の課金であり、さらに25GB分のストレージと月間2億リクエストまでが永久無料枠に入っています。

🚀 CDK (Infrastructure as Code) での運用自動化

さらに、これらの構成を手作業（AWSマネジメントコンソールでポチポチ）で作ると、設定ミスや将来の拡張で地獄を見ます。
本プロジェクトでは AWS CDK (TypeScript) を用いて、インフラをすべてコード化（IaC）しています。

// infrastructure/lib/cloudquiz-stack.ts の一部抜粋
const bookmarksTable = new dynamodb.Table(this, 'CloudQuizBookmarksTable', {
  tableName: 'CloudQuizBookmarks',
  partitionKey: { name: 'userId', type: dynamodb.AttributeType.STRING },
  sortKey: { name: 'examId', type: dynamodb.AttributeType.STRING },
  billingMode: dynamodb.BillingMode.PAY_PER_REQUEST, // オンデマンド課金 (0円運用)
  removalPolicy: cdk.RemovalPolicy.RETAIN,
});

これにより、コマンド一つで環境の複製や修正が可能になっています。

🎯 まとめ

「Next.js (SSG) × S3 × CloudFront」および「フルサーバーレスバックエンド」を採用したことで、以下のROI（投資対効果）を実現できました。

維持費: 月額約0円（無料枠内）
パフォーマンス: 爆速（CDNキャッシュ）
運用負荷: ゼロ（NoOps）

個人開発で「コストが怖くてデプロイできない」と悩んでいる方の参考になれば幸いです！

もしよろしければ、実際の挙動や表示速度を CloudQuiz (クラウドクイズ) で体感してみてください。

最後まで読んでいただきありがとうございました！
（※役に立ったと思ったら「LGTM（いいね）」や「ストック」をしていただけると泣いて喜びます！）