Penyebaran Vercel

front-end party paling suka —— edge compute second-level deploy

Penyebaran Vercel OpenClaw, front-end player main field

Kalo lo developer frontend, Vercel pasti gak asing — perusahaan di belakang Next.js, git push langsung auto-deploy, rasanya smooth banget.

tapi jelas dulu: Vercel cocok deploy OpenClaw Web UI dan API Gateway, nggak cocok buat deploy complete Agent backend. Function serverless ada execution time limit, AI task jalanin lama bakal timeout. Lightweight frontend + API forwarding scenario, Vercel adalah pilihan paling santai.

Vercel bisa apa, tidak bisa apa

⚠️ Serverless Functions Vercel default timeout 10 detik (Pro versi 60 detik), tidak cocok jalankan tugas AI inference lama. Jika perlu jalankan full OpenClaw Agent, pilih paket VPS (AWS EC2, GCP dll).

Scenario yang cocok Vercel:

Deploy OpenClaw Web control panel
jadi API Gateway, forward request ke backend server
Deploy doc site, monitoring dashboard, dan static/lightweight app lainnya

Vercel vs VPS tradisional

Vercel (Serverless)

git push deploy otomatis, tidak perlu urus server
global edge network, akses speed cepat
free tier cukup buat personal project
tidak support long-running task
Cocok buat frontend + lightweight API

traditional VPS (EC2/GCP etc)

Quiet no noise
No execution time limit
Perlu maintain server sendiri
fix IP, cocok back-end long connection
Cocok buat complete Agent deploy

empat step deploy

Fork repositori

Open DSM → Package Center → Search "Container Manager" (DSM 7) atau "Docker" (DSM 6), install dan start. Setelah install, desktop ada icon baru.

Koneksiin Vercel

ke vercel.com Use GitHub account login → Import Project → Choose forked repo → Vercel auto-detect project type.

Config environment variable

Di Vercel Settings → Environment Variables tambahin config yang diperlukan, misalnya API Key, database connection string, dll. Jangan tulis secret di code.

Deploy dan online

Click Deploy, tunggu beberapa puluh detik. Vercel kasih lo satu xxx.vercel.app domain kamu langsung bisa diakses. Tiap kali git push, otomatis trigger redeploy.

konfigurasi vercel.json

Buat file di project root vercel.json, config routing dan build parameter:

vercel.json

{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/next"
    }
  ],
  "routes": [
    {
      "src": "/api/(.*)",
      "dest": "/api/$1"
    },
    {
      "src": "/(.*)",
      "dest": "/$1"
    }
  ],
  "env": {
    "NODE_ENV": "production"
  }
}

Penyebaran Vercel CLI

Kalo prefer command line, bisa juga pake Vercel CLI buat deploy lokal:

Flow penyebaran Vercel CLI

# Pasang Vercel CLI

Environment variable config

Di Vercel Dashboard → Settings → Environment Variables tambahin:

Environment variable yang perlu config

# Wajib diisi

⚠️ Environment variable API Key sensitif data jangan commit ke Git, cuma config di Vercel Dashboard.

Kredit gratis Vercel

💡 Paket Hobby (gratis) Vercel cukup untuk project pribadi: 100GB bandwidth per bulan, 100,000 kali invoke Serverless per hari, auto HTTPS, custom domain. Selama traffic tidak terlalu besar, basically tidak perlu bayar.

pembatasan free plan:

Timeout serverless function 10 detik (Pro versi 60 detik)
tidak support team collab (perlu Pro)
Build time setiap bulan 6000 menit
single deploy package limit 250MB

Artikel tutorial ini berguna buat kamu?