今回の構成

フロントエンド（画面）→ Vercel（無料）
バックエンド（API）→ Render（無料）
データベース → Neon / PostgreSQL（無料）

それぞれの役割を簡単に説明すると、Vercelはユーザーが目にする画面を配信するサービス、Renderはアプリの裏側のロジック（API）を動かすサーバー、Neonはユーザー情報やチャット履歴などを保存するデータベースです。

Step 1：Neon でデータベースを作成する

まずはデータベースを用意します。Neon は PostgreSQL というデータベースをクラウド上で無料で使えるサービスです。

1-1. Neon にアクセス

neon.tech にアクセスし、「Get Started」をクリックします。

1-2. アカウント登録

GitHubアカウント、Googleアカウント、またはメールアドレスで登録できます。GitHubアカウントをお持ちであれば、そちらでの登録がスムーズです。

1-3. プロジェクトを作成

ログイン後、「New Project」をクリックして以下の設定でプロジェクトを作成します。

Project name → bizbot（任意の名前でOK）
Postgres version → 17（最新版）
Cloud Service Provider → AWS
Region → Singapore（日本に最も近い拠点）
Neon Auth → 無効（OFF）

1-4. 接続文字列をコピー

プロジェクト作成が完了すると「Congratulations!」の画面が表示され、接続文字列（Connection string）が表示されます。この文字列は後で Render の設定に使いますので、コピーして安全な場所に保存してください。

接続文字列は以下のような形式です：

postgresql://neondb_owner:xxxx@ep-xxx.ap-southeast-1.aws.neon.tech/neondb?sslmode=require

注意：この文字列にはパスワードが含まれています。外部に公開しないよう注意してください。

Step 2：Render にバックエンド（API）をデプロイする

次に、アプリケーションの裏側（API）を動かすサーバーとして Render を設定します。

2-1. Render にアクセス・サインアップ

render.com にアクセスし、「Get Started for Free」をクリックします。

サインアップ画面では「GitHub」を選んでログインします。GitHubアカウントと連携することで、コードの更新が自動的に反映されるようになります。

2-2. GitHub との連携許可

GitHub との連携画面が表示されます。ここでは「Only select repositories」を選び、デプロイしたいリポジトリ（例：biz-bot）だけを選択しましょう。全リポジトリへのアクセスを許可する必要はありません。

2-3. Render のアカウント設定

Render のアカウント情報を確認・設定します。表示される内容に従って進めてください。

2-4. Web Service を作成

ダッシュボードから「New」→「Web Service」を選択し、先ほど連携したGitHubリポジトリを選びます。以下の設定を入力してください。

Name → bizbot-api
Region → Singapore (Southeast Asia)
Root Directory → backend
Runtime → Python 3
Build Command → pip install -r requirements.txt
Start Command → uvicorn app.main:app –host 0.0.0.0 –port $PORT
Instance Type → Free

2-5. 環境変数を設定

「Environment Variables」のセクションで、以下の環境変数を追加します。環境変数とは、アプリに必要な秘密情報や設定値をコードの外で管理する仕組みです。

DATABASE_URL → Step 1 で取得した接続文字列（※下記の変換が必要）
OPENAI_API_KEY → OpenAI の API キー
SECRET_KEY → ランダムな文字列（下記で生成）
ENVIRONMENT → production
CORS_ORIGINS → https://あなたのアプリ.vercel.app（Step 3 で決まる）

DATABASE_URL の変換方法

Neon で取得した接続文字列をそのまま使うのではなく、以下の変換が必要です：

・postgresql:// → postgresql+asyncpg:// に変更
・?sslmode=require → ?ssl=require に変更
・&channel_binding=require がある場合は削除

変換前：
postgresql://neondb_owner:xxx@ep-xxx.ap-southeast-1.aws.neon.tech/neondb?sslmode=require

変換後（Render に設定する値）：
postgresql+asyncpg://neondb_owner:xxx@ep-xxx.ap-southeast-1.aws.neon.tech/neondb?ssl=require

SECRET_KEY の生成方法

SECRET_KEY はセキュリティに使う秘密鍵です。パソコンのターミナルで以下のコマンドを実行すると、安全なランダム文字列が生成されます：

python -c “import secrets; print(secrets.token_urlsafe(64))”

表示された文字列をそのままコピーして Render の環境変数に貼り付けてください。

2-6. デプロイ実行

すべての設定が完了したら「Deploy Web Service」をクリックします。デプロイには3〜5分ほどかかります。

完了すると、RenderのURLが発行されます（例：https://bizbot-api-xxxx.onrender.com）。このURLは次のステップで使いますのでメモしておいてください。

確認方法：ブラウザで https://あなたのURL/api/health にアクセスして {“status”:”ok”} と表示されれば成功です。

なお、無料プランでは「Your free instance will spin down with inactivity」というメッセージが表示されますが、これは正常です。15分間アクセスがないとサーバーがスリープ状態になり、次のアクセス時に起動に30〜50秒ほどかかるという無料枠の仕様です。

Step 3：Vercel にフロントエンド（画面）をデプロイする

最後に、ユーザーが実際に操作する画面部分を Vercel にデプロイします。

3-1. Vercel にアクセス・サインアップ

vercel.com にアクセスし、GitHubアカウントでサインアップします。

3-2. プロジェクトを作成

「Add New」→「Project」を選択し、GitHub のリポジトリ（biz-bot）をインポートします。

以下の設定を行います：

Project Name → bizbot（任意）
Framework Preset → Next.js（自動検出）
Root Directory → frontend（「Edit」ボタンを押して変更）

重要：Root Directory は必ず frontend に変更してください。デフォルトのままだとプロジェクト全体をビルドしようとしてエラーになります。

3-3. 環境変数を設定

「Environment Variables」に以下を追加します：

BACKEND_URL → https://あなたのRenderのURL（例：https://bizbot-api-xxxx.onrender.com）

3-4. デプロイ実行

「Deploy」をクリックすると、1〜2分でデプロイが完了します。完了後、Vercel のURL（例：https://bizbot-xxx.vercel.app）が発行されます。

Step 4：CORS 設定を更新する

最後の仕上げです。Vercel のURLが決まったので、Render の環境変数を更新して、フロントエンドからのアクセスを許可します。

  1. Render のダッシュボード（dashboard.render.com）を開く
  2. bizbot-api サービスの「Environment」タブを開く
  3. CORS_ORIGINS の値を、Vercel で発行された実際のURLに更新（例：https://bizbot-xxx.vercel.app）
  4. 「Save Changes」をクリック → 自動で再デプロイが始まります

【※ CORS設定更新画面のスクリーンショット】

Step 5：動作確認

すべての設定が完了しました。Vercel のURLにアクセスして、以下を確認してみましょう：

  1. ログイン画面が表示されること
  2. アカウント登録ができること
  3. ダッシュボードに入れること
  4. ボットの作成ができること

これで、AIチャットボットがインターネット上で公開されました。

無料枠について

Neon → 512MB / プロジェクト10個まで（5分間アクセスがないとDBがスリープ、復帰1〜2秒）
Render → 750時間/月（15分間アクセスがないとスリープ、復帰30〜50秒）
Vercel → 100GB帯域/月（常時起動、スリープなし）

個人開発やデモ利用であれば、この無料枠で十分に運用できます。

トラブルシューティング

Render のデプロイが終わらない

デプロイが長時間「Deploying」のままの場合は、古いデプロイが詰まっている可能性があります。「Cancel deploy」でキャンセルした後、「Manual Deploy」→「Deploy latest commit」で最新のコードを再デプロイしてみてください。

API Error: 500 が表示される

Render のログ（「Logs」タブ）でエラーの詳細を確認してください。よくある原因は以下の通りです：

・環境変数の設定ミス：DATABASE_URL の形式が正しいか確認（postgresql+asyncpg:// で始まっているか）
・OPENAI_API_KEY が未設定：環境変数に正しく追加されているか確認

ルートURL にアクセスすると {“detail”:”Not Found”} と表示される

これは正常です。APIサーバーのルート（/）にはページが設定されていないため、このメッセージが返ります。サーバーは正常に動作しています。

まとめ

今回は Neon（データベース）+ Render（バックエンド）+ Vercel（フロントエンド）という構成で、AIチャットボットを完全無料でデプロイしました。

この構成のメリットは：

・月額費用が0円で運用できる
・GitHubにコードをpushするだけで自動デプロイされる
・各サービスが独立しているので、将来的な移行や拡張が容易

まずはこの無料構成で公開し、アクセスが増えてきたら有料プランやVPSへの移行を検討するのが効率的です。

Vercel のセットアップ

最後に Render の CORS_ORIGINS を実際の Vercel URL に更新 する必要があります。 Step 6: CORS_ORIGINS の更新

← 開発録・ブログ一覧に戻る