バイブコーディング実践編 — 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_URLANTHROPIC_API_KEY などを設定します。

これらの Secrets は、Git リポジトリには入れないようにしましょう。

デプロイ後の確認

デプロイが完了したら、以下の点を確認しましょう。

  • アプリケーションが正常に起動しているか: Web サイトにアクセスし、エラーが表示されないか確認します。
  • 主要な機能が動作するか: Minimal Happy Path で確認した機能が、本番環境でも問題なく動作するかテストします。
  • 環境変数が正しく読み込まれているか: 特に AI の API キーなどが正しく設定され、機能しているか確認します。
  • ログが出力されているか: エラー発生時にデバッグできるよう、ログが適切に出力されていることを確認します。

Post-mortem (事後検証)

「Post-mortem (事後検証)」は、プロジェクトの完了後や大きな問題が発生した後に、その過程を振り返り、成功要因や改善点を洗い出すための活動です。 誰かを責めるのではなく、「何が起こったか」「なぜ起こったか」「どうすれば防げたか」「次は何をするか」に焦点を当てます。

Capston プロジェクトでは、以下の観点から振り返りを行いましょう。

  • 良かった点: AI の活用方法、開発プロセス、チーム連携 (個人開発でも自分との連携)。
  • 課題点: 発生した問題、解決に時間がかかったこと、改善が必要な点。
  • 学び: 次のプロジェクトに活かせる教訓。
  • アクションアイテム: 今後具体的に取り組むべきこと。

この振り返りをドキュメントとして残すことで、将来のプロジェクトの質を高める貴重な資産となります。

まとめ

Capston プロジェクトの最終段階として、Next.js と FastAPI で開発したアプリケーションを VercelRender などのサービスにデプロイし、一般に公開するプロセスを経験しましょう。 Secrets の安全な管理と、デプロイ後の動作確認も忘れずに行ってください。 そして、プロジェクト全体を Post-mortem で振り返り、得られた学びを今後の開発に活かすことが、あなたの成長につながります。

参考リンク


Capstone — デプロイと振り返り | バイブコーディング実践編 - AI研修