バイブコーディング実践編 — Claude Code を中心に AIで安全に作る力 / Capstone — 小規模Webアプリ完走
Capstone — デプロイと振り返り
読了目安 6 分
学習のねらい
開発したアプリケーションは、実際にユーザーが使える状態になって初めて価値を発揮します。 このレッスンでは、Capston プロジェクトで開発した小規模 Web アプリケーションを本番環境にデプロイ (配置) し、一般に公開するまでの一連の流れを学びます。 また、プロジェクト全体を通しての「学び」を整理し、今後の開発に活かすための「Post-mortem (事後検証)」を行うスキルを身につけましょう。
デプロイ先の選定
小規模な Web アプリケーションのデプロイ先としては、以下のようなサービスが手軽に利用できます。
- Vercel: Next.js アプリケーションのデプロイに特化しており、GitHub と連携して自動デプロイが可能です。フロントエンド向け。
- Render: Web サービス、データベース、静的サイトなど、様々なアプリケーションをデプロイできるクラウドプラットフォームです。FastAPI のようなバックエンドにも適しています。
- Heroku: 多くの言語やフレームワークに対応した PaaS (Platform as a Service) です。無料枠もありますが、近年は制限が厳しくなっています。
Capston プロジェクトでは、フロントエンドを Vercel、バックエンドを Render にデプロイする構成が一般的です。
Secrets の移送 (環境変数の安全な管理)
デプロイ環境では、API キーやデータベースの認証情報などの「Secrets (機密情報)」を安全に管理することが非常に重要です。
これらは .env ファイルに直接記述するのではなく、各デプロイサービスが提供する環境変数管理機能 (例: Vercel の Environment Variables, Render の Environment Variables) を利用して設定します。
- Vercel: プロジェクト設定の「Environment Variables」で
NEXT_PUBLIC_API_URL(フロントエンドがバックエンドを呼び出す URL) などを設定します。 - Render: サービス設定の「Environment」で
DATABASE_URLやANTHROPIC_API_KEYなどを設定します。
これらの Secrets は、Git リポジトリには入れないようにしましょう。
デプロイ後の確認
デプロイが完了したら、以下の点を確認しましょう。
- アプリケーションが正常に起動しているか: Web サイトにアクセスし、エラーが表示されないか確認します。
- 主要な機能が動作するか: Minimal Happy Path で確認した機能が、本番環境でも問題なく動作するかテストします。
- 環境変数が正しく読み込まれているか: 特に AI の API キーなどが正しく設定され、機能しているか確認します。
- ログが出力されているか: エラー発生時にデバッグできるよう、ログが適切に出力されていることを確認します。
Post-mortem (事後検証)
「Post-mortem (事後検証)」は、プロジェクトの完了後や大きな問題が発生した後に、その過程を振り返り、成功要因や改善点を洗い出すための活動です。 誰かを責めるのではなく、「何が起こったか」「なぜ起こったか」「どうすれば防げたか」「次は何をするか」に焦点を当てます。
Capston プロジェクトでは、以下の観点から振り返りを行いましょう。
- 良かった点: AI の活用方法、開発プロセス、チーム連携 (個人開発でも自分との連携)。
- 課題点: 発生した問題、解決に時間がかかったこと、改善が必要な点。
- 学び: 次のプロジェクトに活かせる教訓。
- アクションアイテム: 今後具体的に取り組むべきこと。
この振り返りをドキュメントとして残すことで、将来のプロジェクトの質を高める貴重な資産となります。
まとめ
Capston プロジェクトの最終段階として、Next.js と FastAPI で開発したアプリケーションを Vercel や Render などのサービスにデプロイし、一般に公開するプロセスを経験しましょう。
Secrets の安全な管理と、デプロイ後の動作確認も忘れずに行ってください。
そして、プロジェクト全体を Post-mortem で振り返り、得られた学びを今後の開発に活かすことが、あなたの成長につながります。