デプロイ実践
作ったアプリを世界に公開！無料で始められるデプロイサービスを使って、本番環境を構築します。
デプロイ先の選択肢
| サービス | フロントエンド | バックエンド | データベース | 無料枠 |
|---|---|---|---|---|
| Vercel | ◎ | △（Serverless） | × | あり |
| Railway | ○ | ◎ | ◎ | $5/月 |
| Render | ○ | ◎ | ◎ | あり |
| Fly.io | ○ | ◎ | ○ | あり |
おすすめ構成：フロントエンドはVercel、バックエンド+DBはRailwayまたはRender
Vercel（フロントエンド）
デプロイ手順
-
1
GitHubにプッシュ
git push origin main -
2
Vercelにログイン
vercel.com でGitHubアカウントで登録
-
3
Import Project
GitHubリポジトリを選択
-
4
環境変数を設定
NEXT_PUBLIC_API_URL=https://your-backend.railway.app -
5
Deploy!
自動でビルド・デプロイされる
Railway（バックエンド + DB）
1. MySQLをデプロイ
- 1. New Project → Deploy MySQL
- 2. Variables タブで接続情報を確認
- 3. DATABASE_URL をコピー
2. FastAPIをデプロイ
- 1. New → GitHub Repo
- 2. バックエンドのリポジトリを選択
- 3. 環境変数を設定：
DATABASE_URL=mysql://...（MySQLからコピー） SECRET_KEY=your-production-secret-key CORS_ORIGINS=https://your-app.vercel.app
Dockerfile（Railway用）
FROM python:3.11-slim WORKDIR /app COPY requirements.txt . RUN pip install --no-cache-dir -r requirements.txt COPY . . # マイグレーション実行 RUN alembic upgrade head EXPOSE 8000 CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]
デプロイ前チェックリスト
- 環境変数は正しく設定されているか
- SECRET_KEYは本番用に変更したか
- CORSの設定は正しいか
- DEBUG=falseになっているか
- マイグレーションは実行されるか
- .envファイルはGit除外されているか
よくあるトラブル
ビルドエラー
ログを確認。依存関係の不足、TypeScriptエラーが多い
CORS エラー
バックエンドのCORS_ORIGINSにフロントのURLを追加
DB接続エラー
DATABASE_URLが正しいか、DBが起動しているか確認
500エラー
ログを確認。環境変数の不足、マイグレーション未実行が多い
まとめ
- ✓ フロントエンドはVercel、バックエンドはRailway/Render
- ✓ 環境変数は各プラットフォームで設定
- ✓ Git pushで自動デプロイ
- ✓ エラーはログを確認して対処