全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（いいね）」や「ストック」をしていただけると泣いて喜びます！）