第9部：実践プロジェクト Step 36 / 36

デプロイ・運用開始

アプリケーションを本番環境にデプロイし、運用を開始します。

デプロイ先

Frontend: Vercel

  • ✓ Next.jsに最適化されたホスティング
  • ✓ グローバルエッジネットワークで高速配信
  • ✓ 自動HTTPS・SSL証明書
  • ✓ GitHubと連携して自動デプロイ

Backend: Railway

  • ✓ FastAPI + MySQL + Redisを一括管理
  • ✓ GitHub連携で簡単デプロイ
  • ✓ データベース・キャッシュをワンクリック追加
  • ✓ 環境変数の安全な管理

Step 1: 本番設定ファイルの準備

Claude Codeへの指示

TaskFlowの本番デプロイ用設定ファイルを生成してください。

【必要なファイル】
- vercel.json（フロントエンド設定）
- Procfile（Railway用）
- railway.toml（Railway設定）
- .env.production（バックエンド・フロントエンド）

本番環境に適したセキュリティ設定を含めてください。

vercel.json（フロントエンド）

{
  // Vercel設定ファイル
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "https://your-backend.railway.app/api/:path*"
    }
  ],
  "env": {
    "NEXT_PUBLIC_API_URL": "@api_url"
  },
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Frame-Options", "value": "DENY" },
        { "key": "X-Content-Type-Options", "value": "nosniff" }
      ]
    }
  ]
}

Procfile（バックエンド）

web: uvicorn app.main:app --host 0.0.0.0 --port $PORT

railway.toml（バックエンド）

[build]
builder = "nixpacks"

[deploy]
startCommand = "alembic upgrade head && uvicorn app.main:app --host 0.0.0.0 --port $PORT"
healthcheckPath = "/health"
healthcheckTimeout = 300
restartPolicyType = "on_failure"
restartPolicyMaxRetries = 3

backend/.env.production（バックエンド環境変数テンプレート）

# データベース接続（RailwayのMySQL接続URLを使用）
DATABASE_URL=mysql+asyncmy://user:password@host:port/dbname

# JWT認証用シークレットキー（必ずランダムな文字列に変更）
SECRET_KEY=your-production-secret-key-change-this

# CORS設定（Vercelのドメインを指定）
CORS_ORIGINS=https://your-app.vercel.app

# Redis接続URL（RailwayのRedis接続URLを使用）
REDIS_URL=redis://default:password@host:port

# 環境設定
ENVIRONMENT=production
DEBUG=false

frontend/.env.production（フロントエンド環境変数テンプレート）

# バックエンドAPIのURL（RailwayのデプロイURLを指定）
NEXT_PUBLIC_API_URL=https://your-backend.railway.app

Step 2: Vercelへのフロントエンドデプロイ

Claude Codeへの指示

Vercelへのデプロイ手順を案内してください。
frontendディレクトリをVercelにデプロイします。
GitHubリポジトリ連携で自動デプロイを設定してください。

1. GitHubにコードをプッシュ

# リポジトリにすべての変更をプッシュ
git add .
git commit -m "prepare for production deployment"
git push origin main

2. Vercelでプロジェクトをインポート

Vercelダッシュボード（vercel.com）にログインし、「Add New Project」からGitHubリポジトリをインポートします。

  • ✓ Root Directoryを frontend に設定
  • ✓ Framework PresetがNext.jsになっていることを確認

3. 環境変数を設定

Vercelの「Settings > Environment Variables」で以下を設定します。

# RailwayバックエンドのURLを指定
NEXT_PUBLIC_API_URL = https://your-backend.railway.app

4. デプロイ実行

CLIでデプロイする場合は以下のコマンドを実行します。

# Vercel CLIをインストール
npm i -g vercel

# frontendディレクトリでデプロイ
cd frontend
vercel --prod

✓ 確認ポイント

VercelのURLにアクセスし、ページが正常に表示されることを確認してください。ビルドログにエラーがないことも確認しましょう。

Step 3: Railwayへのバックエンドデプロイ

Claude Codeへの指示

Railwayへのバックエンドデプロイ手順を案内してください。
FastAPI + MySQL + Redisの構成です。
環境変数の設定とデータベースマイグレーションを含めてください。

1. Railwayでプロジェクトを作成

Railwayダッシュボード（railway.app）にログインし、「New Project」から「Deploy from GitHub repo」を選択してリポジトリを接続します。

2. MySQLサービスを追加

プロジェクト内で「+ New」から「Database > MySQL」を選択して追加します。

  • ✓ 自動的にDATABASE_URL環境変数が生成されます
  • ✓ 接続情報はVariablesタブで確認できます

3. Redisサービスを追加

同様に「+ New」から「Database > Redis」を選択して追加します。

  • ✓ 自動的にREDIS_URL環境変数が生成されます
  • ✓ WebSocket通知やキャッシュに使用します

4. 環境変数を設定

バックエンドサービスの「Variables」タブで以下を設定します。

# RailwayのMySQL接続URL（自動生成された値を参照）
DATABASE_URL=${{MySQL.DATABASE_URL}}

# JWT認証用シークレットキー
SECRET_KEY=<ランダムな文字列を生成して設定>

# CORS設定（Vercelのデプロイドメインを指定）
CORS_ORIGINS=https://your-app.vercel.app

# Redis接続URL（自動生成された値を参照）
REDIS_URL=${{Redis.REDIS_URL}}

# 環境設定
ENVIRONMENT=production

5. デプロイ実行

環境変数を設定後、Railwayが自動的にビルド・デプロイを実行します。railway.tomlのstartCommandにより、マイグレーション実行後にサーバーが起動します。

✓ 確認ポイント

RailwayのデプロイURLに /docs を付けてアクセスし、Swagger UIが表示されることを確認してください。

Step 4: デプロイ後の動作確認

フロントエンドの確認

  • ☑ VercelのURLにアクセスしてトップページが表示される
  • ☑ ログインページ・登録ページが正しく表示される
  • ☑ スマートフォン表示（レスポンシブ）が崩れていない
  • ☑ ブラウザのコンソールにエラーが出ていない

バックエンドの確認

  • ☑ /docs でSwagger UIが表示される
  • ☑ /health エンドポイントが正常応答を返す
  • ☑ CORSが正しく動作している（フロントエンドからAPIを呼べる）
  • ☑ データベース接続が正常に動作している

認証フローの確認

  • ☑ 新規ユーザー登録ができる
  • ☑ ログインしてトークンが取得できる
  • ☑ 認証が必要なページにアクセスできる
  • ☑ 未認証時にログインページへリダイレクトされる

機能テスト

  • ☑ プロジェクトを新規作成できる
  • ☑ タスクを作成・編集・削除できる
  • ☑ タスクのドラッグ&ドロップでステータスを変更できる
  • ☑ 2つのブラウザタブでリアルタイム同期が動作する

セキュリティ確認

  • ☑ HTTPSで通信されている（URLが https:// で始まる）
  • ☑ 環境変数がフロントエンドに露出していない
  • ☑ CORSが本番ドメインのみに制限されている
  • ☑ APIレスポンスに不要な内部情報が含まれていない

完成！

おめでとうございます！

AI駆動開発 上級編を完了しました。

TaskFlowプロジェクトを通じて、要件定義からデプロイまで、
全工程をAIと協力して進める方法を学びました。

習得したスキル

  • ✓ AIを活用した要件定義・設計手法
  • ✓ Next.js + FastAPIのフルスタック開発
  • ✓ データベース設計とマイグレーション
  • ✓ 認証・認可の実装
  • ✓ WebSocketによるリアルタイム通信
  • ✓ テスト戦略とCI/CDパイプライン構築
  • ✓ 本番環境へのデプロイと運用

次のステップ

機能追加

通知機能、高度なフィルター、全文検索、ファイル添付など、実務で求められる機能を追加して発展させましょう。

パフォーマンス最適化

Lighthouse分析、画像最適化、APIレスポンスのキャッシュ戦略、データベースクエリの最適化に取り組みましょう。

スケーリング対応

ユーザー数の増加に備えて、負荷分散、データベースレプリケーション、CDN活用などを検討しましょう。

他のプロジェクトで実践

学んだAI駆動開発のワークフローを、ECサイト、SNS、SaaSなど別のプロジェクトで実践してスキルを定着させましょう。

テスト・CI/CD トップページへ