Vercel デプロイメント
フロント好きの最愛 —— エッジコンピュート秒級部デプロイ
Vercel で OpenClaw をデプロイ、フロントエンド選手の得意な場所
フロントエンド開発者なら Vercel はお馴染み —— Next.js 背景企業で、git push で自動デプロイ、体験スムーズ。
はっきり言おう：Vercel は OpenClaw 部デプロイに適切 Web UI と API Gateway、完全な Agent バックエンドの実行に向かない。Serverless 関数は実行時間制限があり、長時間稼働の AI タスクはタイムアウト。軽量フロントエンド + API 転送シナリオ、Vercel が最も手間がない選択。
Vercel は何ができるか、何ができないか
Vercel に適した場面：
- OpenClaw の Web コントロールパネルをデプロイ
- API Gateway 役。リクエスト後端サーバー転送
- ドキュメントサイト、監視ダッシュボードなどのスタティック/ライトアプリをデプロイ
Vercel vs 伝統的な VPS
- git push で自動デプロイ、サーバー管理不要
- グローバルエッジネットワーク。アクセス速度速い
- 無料額度個人プロジェクト十分
- 長時間実行タスク非対応
- フロントエンド + ライト API に向いている
- 完全制御、好きなもの実行
- 実行時間制限なし
- サーバーを自分でメンテナンスする必要あり
- 固定 IP。後端長接続向き
- 完全 Agent デプロイに向いている
4 ステップで部デプロイ
リポジトリをフォーク
OpenClaw の GitHub リポジトリ開く、自分のアカウントに Fork。カスタマイズ需要あれば、ローカル変更後 push 可能。
Vercel に接続
へ vercel.com GitHub アカウントで ログイン → Import Project → Fork リポジトリ選択 → Vercel は自動プロジェクト型検出。
環境変数を設定
Vercel の Settings → Environment Variables で API Key、DB 接続文字列など必要な設定を追加。秘密鍵をコードに書き込むな。
デプロイアップライン
Deploy クリック、数十秒待つ。Vercel は xxx.vercel.app のドメイン、すぐにアクセス可能。その後、git push するたびに自動的に再デプロイ。
vercel.json 設定
プロジェクトルートディレクトリで作成 vercel.json、ルーティングとビルドパラメータを設定：
{
"version": 2,
"builds": [
{
"src": "package.json",
"use": "@vercel/next"
}
],
"routes": [
{
"src": "/api/(.*)",
"dest": "/api/$1"
},
{
"src": "/(.*)",
"dest": "/$1"
}
],
"env": {
"NODE_ENV": "production"
}
}Vercel CLI デプロイメント
コマンドライン派なら、Vercel CLI ローカルデプロイも可能：
# Vercel CLI をインストール環境変数設定
Vercel Dashboard の Settings → Environment Variables で追加：
# 必須Vercel 無料額度
無料プランの制限：
- Serverless 関数タイムアウト 10 秒（Pro バージョン 60 秒）
- チームコラボレーション非対応（Pro 要）
- ビルド時間月 6000 分
- 単一部デプロイパッケージサイズ上限 250MB