✦ AizuDemy
Beranda › Tutorial › Deploy Project Vibe Coding ke Vercel & VPS: Dari Lokal ke Production

Deploy Project Vibe Coding ke Vercel & VPS: Dari Lokal ke Production

A
Aizu Dev
5 jam lalu · 7 views
#Tutorial
Deploy Project Vibe Coding ke Vercel & VPS: Dari Lokal ke Production

Persiapan Build: Dari Development ke Production

Aplikasi yang dibuat melalui metode vibe coding sering kali berjalan lancar tanpa kendala di server lokal (localhost). Namun, situasi berbalik ketika skrip masuk ke tahap kompilasi production. Tool berbasis AI seperti Cursor, Claude Code, v0, atau Bolt mengutak-atik kode dengan fokus pada kecepatan iterasi dev. Dampaknya, AI sering meninggalkan unused variables, paket dependensi yang belum terdaftar di package.json, serta error tipe TypeScript yang terabaikan karena dev server menjalankan transpilation tanpa pengecekan tipe ketat.

1. Validasi Tipe Data dan Linting Kode

Jangan langsung melakukan git push ke branch utama tanpa memverifikasi integritas kode. Jalankan pemeriksaan tipe data dan aturan linting secara manual. Langkah ini menyimulasikan proses validasi yang dilakukan oleh runner Vercel atau server VPS.

npm run lint
npx tsc --noEmit

Jika perintah tsc mengembalikan error terkait TypeScript pada kode hasil generasi AI, perbaiki tipe data interface atau sesuaikan opsi compilerOptions di file tsconfig.json (misalnya mengaktifkan skipLibCheck: true jika error berasal dari library pihak ketiga).

2. Isolasi Environment Variables dan Keamanan Kredensial

Model AI sering menuliskan string kredensial secara langsung (hardcoded) ke dalam file komponen atau API route saat membuat contoh kode. Praktik ini berisiko membocorkan kredensial rahasia ke repository publik.

Pisahkan seluruh konfigurasi sensitif ke dalam file variabel lingkungan. Buat template file .env.example sebagai panduan variabel yang wajib diisi pada lingkungan produksi:

DATABASE_URL="postgresql://user:password@localhost:5432/mydb?schema=public"
NEXTAUTH_SECRET="gunakan_string_acak_panjang_minimal_32_karakter"
NEXT_PUBLIC_API_URL="https://api.domainanda.com"
PAYMENT_GATEWAY_KEY="sk_live_xxxxxxx"

Pastikan file .env, .env.local, dan file environment sensitif lainnya sudah terdaftar di dalam file .gitignore:

.env
.env.local
.env.development.local
.env.production.local
node_modules/
.next/
dist/

3. Simulasi dan Uji Ulang Build Lokal

Lakukan kompilasi bundle aplikasi di komputer lokal sebelum menjalankan perintah deployment ke server live. Langkah ini mendeteksi kegagalan impor modul, kesalahan sintaksis, atau ketergantungan paket yang hilang.

npm run build
npm run start

Buka browser dan uji fungsi-fungsi utama seperti otentikasi, perutean halaman, serta pemanggilan API pada mode produksi lokal tersebut. Jika seluruh fungsi berjalan stabil, project siap diunggah ke platform hosting.

Deploy Frontend Cepat ke Vercel

Vercel merupakan platform cloud terdepan untuk menghosting aplikasi frontend modern berbasis framework seperti Next.js, React, Nuxt, SvelteKit, atau Astro. Arsitektur serverless dan jaringan Edge Network milik Vercel memberikan performa distribusi konten yang cepat.

1. Dorong Source Code ke Remote Repository

Pastikan seluruh perubahan kode terbaru telah di-commit dan diunggah ke platform manajemen kode berbasis Git seperti GitHub, GitLab, atau Bitbucket.

git add .
git commit -m "feat: siapkan konfigurasi dan penyesuaian produksi"
git push origin main

2. Hubungkan dan Import Project di Dashboard Vercel

  1. Login ke dashboard Vercel, lalu pilih tombol Add New > Project.
  2. Hubungkan akun Git Anda dan pilih repository project vibe coding yang ingin dideploy.
  3. Vercel akan mendeteksi framework secara otomatis. Jika project menggunakan struktur monorepo atau subfolder, sesuaikan opsi Root Directory pada bagian konfigurasi awal.

3. Konfigurasi Environment Variables dan Proses Deployment

Sebelum menekan tombol deployment, buka panel Environment Variables pada halaman pengaturan Vercel. Salin seluruh pasangan kunci dan nilai dari file .env.example milik Anda ke dalam kolom yang tersedia.

Klik tombol Deploy. Vercel akan mengunduh dependensi, mengompilasi aset statis, serta mengoptimalkan halaman serverless. Setelah proses selesai, sistem menyediakan domain acak berakhiran .vercel.app yang siap diakses.

4. Deployment Menggunakan Vercel CLI (Alternatif Terminal)

Bagi pengembang yang tidak menggunakan alur kerja berbasis push repository Git, deployment dapat dilakukan secara langsung melalui terminal menggunakan Vercel CLI:

npm i -g vercel
vercel login
vercel --prod

Deploy Fullstack / Backend ke VPS via CyberPanel

Aplikasi vibe coding yang memerlukan database relasional lokal (PostgreSQL/MySQL), proses latar belakang berkepanjangan, koneksi WebSocket persisten, atau layanan Node.js murni lebih ideal dijalankan di Virtual Private Server (VPS). Penggunaan VPS yang dilengkapi control panel CyberPanel mempermudah tata kelola domain, reverse proxy, serta penerbitan sertifikat SSL.

1. Persiapan Lingkungan Server VPS

Masuk ke server VPS melalui protokol SSH dengan akses root. Lakukan pembaruan sistem operasi dan pasang Node.js menggunakan Node Version Manager (NVM) untuk fleksibilitas versi rilis.

ssh root@ip_vps_anda
sudo apt update && sudo apt upgrade -y
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc
nvm install 20
nvm use 20
nvm alias default 20

2. Clone Repository dan Pengaturan Dependensi

Masuk ke direktori kerja server (misalnya /home/domainanda.com/public_html atau /var/www/), lalu lakukan kloning kode sumber project.

cd /var/www
git clone https://github.com/user/project-vibe.git
cd project-vibe
npm ci
cp .env.example .env

Edit file .env menggunakan text editor terminal seperti nano .env. Sesuaikan URL database, port aplikasi, serta kunci API sesuai dengan parameter server produksi.

3. Kompilasi dan Manajemen Proses Aplikasi dengan PM2

Agar aplikasi Node.js tetap berjalan di latar belakang dan dapat pulih secara otomatis saat terjadi crash atau restart server, gunakan Process Manager (PM2).

npm run build
npm install -g pm2
pm2 start npm --name "vibe-app" -- start
pm2 save
pm2 startup

Aplikasi kini berjalan secara internal di dalam server pada port tertentu, seperti http://127.0.0.1:3000.

4. Konfigurasi Reverse Proxy (Nginx & CyberPanel / OpenLiteSpeed)

Agar port aplikasi (misalnya port 3000) dapat diakses publik melalui domain standar pada port HTTP (80) dan HTTPS (443), Anda perlu mengonfigurasikan layanan Reverse Proxy.

Opsi A: Konfigurasi Nginx Murni
Jika VPS menggunakan Nginx sebagai web server utama, tambahkan blok konfigurasi berikut pada lokasi server file Anda (misalnya /etc/nginx/sites-available/domainanda.com):

server {
    listen 80;
    server_name domainanda.com www.domainanda.com;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Opsi B: Konfigurasi via CyberPanel (OpenLiteSpeed)
Jika menggunakan CyberPanel, masuk ke CyberPanel Dashboard > Websites > List Websites > Manage > Rewrite Rules. Tambahkan aturan proxy berikut untuk meneruskan seluruh traffic ke port aplikasi Node.js Anda:

REWRITERULE ^(.*)$ http://127.0.0.1:3000/$1 [P]

Konfigurasi Domain dan SSL (HTTPS)

Penerapan enkripsi HTTPS wajib dipenuhi untuk menjamin keamanan komunikasi data antara klien dan server, sekaligus memenuhi persyaratan API modern browser.

1. Pengaturan DNS Record

Masuk ke penyedia layanan DNS domain Anda (Cloudflare, Namecheap, atau Registrar lokal), lalu buat catatan DNS berikut:

  • A Record: Isi kolom Host/Name dengan @ dan arahkan IP Address ke alamat IP VPS Anda (untuk arsitektur backend/VPS).
  • CNAME Record: Isi kolom Host/Name dengan www dan arahkan ke alamat CNAME Vercel cname.vercel-dns.com (jika menggunakan frontend Vercel).

2. Penerbitan Sertifikat SSL Gratis

Pada VPS Nginx tanpa panel administrasi, terbitkan sertifikat SSL gratis dari Let's Encrypt menggunakan Certbot:

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d domainanda.com -d www.domainanda.com

Jika menggunakan CyberPanel, penerbitan SSL dapat dilakukan melalui antarmuka grafik. Buka menu SSL > Issue SSL > pilih nama domain yang terdaftar > klik Issue SSL. Sistem akan mengunduh dan memasang sertifikat secara otomatis.

Verification Checklist & Health Check Production

Sebelum membagikan tautan aplikasi vibe coding kepada pengguna publik atau calon klien, lakukan pengujian menyeluruh menggunakan daftar periksa (checklist) berikut:

  • [ ] Log Kompilasi Bersih: Tidak ada error fatal atau warning kritis yang menghambat pembentukan aset saat proses build.
  • [ ] Environment Variables Terpasang: Seluruh kredensial database, kunci rahasia token JWT, dan URL API eksternal telah dikonfigurasi di server target.
  • [ ] Enkripsi SSL/HTTPS Aktif: Indikator gembok muncul di bilah alamat browser tanpa peringatan Mixed Content.
  • [ ] Pengaturan CORS Sesuai: Layanan backend di VPS mengizinkan permintaan HTTP dari domain frontend Vercel.
  • [ ] Auto-Restart PM2 Berfungsi: Aplikasi otomatis menyala kembali jika terjadi kebocoran memori atau reboot server.
  • [ ] Migrasi Database Selesai: Struktur skema tabel terbaru sudah diaplikasikan ke database produksi (misalnya perintah npx prisma db push atau npx drizzle-kit push).
  • [ ] Log Rotation Aktif: File log PM2 atau Nginx dipangkas berkala agar tidak memenuhi ruang penyimpanan disk VPS.

Debugging Masalah Umum di Lingkungan Production

1. Error CORS (Cross-Origin Resource Sharing)

Masalah ini terjadi ketika domain frontend di Vercel (misalnya https://app-anda.vercel.app) mencoba mengambil data dari API backend di VPS (misalnya https://api.domainanda.com), tetapi backend tidak mengirimkan header otorisasi yang sesuai. Tambahkan middleware CORS pada aplikasi Node.js/Express Anda:

import cors from 'cors';

const allowedOrigins = ['https://app-anda.vercel.app', 'https://domainanda.com'];

app.use(cors({
  origin: function (origin, callback) {
    if (!origin || allowedOrigins.indexOf(origin) !== -1) {
      callback(null, true);
    } else {
      callback(new Error('Blocked by CORS policy'));
    }
  },
  credentials: true
}));

2. Error 502 Bad Gateway

Pesan 502 Bad Gateway menandakan bahwa web server utama (Nginx atau OpenLiteSpeed) gagal berkomunikasi dengan aplikasi Node.js yang berjalan di port lokal (misalnya port 3000). Langkah penyelesaiannya:

  1. Cek status proses aplikasi menggunakan PM2: pm2 status
  2. Periksa rincian log kesalahan: pm2 logs vibe-app --lines 50
  3. Pastikan port yang dipanggil pada konfigurasi proxy_pass di Nginx sesuai dengan port yang digunakan oleh skrip Node.js.
  4. Pastikan tidak ada konflik variabel PORT pada file .env produksi.

3. Error Database Connection Refused / Timeout

Kegagalan koneksi database di server produksi sering kali disebabkan oleh aturan port firewall (UFW) yang memblokir akses atau parameter String Koneksi yang salah. Jika database berada di VPS yang sama dengan backend, gunakan host 127.0.0.1 atau localhost. Jika menggunakan layanan Managed Database cloud (seperti Supabase atau Neon), pastikan URL koneksi menggunakan mode connection pooling (port 6543) untuk mencegah kehabisan batas koneksi serverless.

Langkah Selanjutnya

Aplikasi hasil vibe coding Anda kini telah berhasil dideploy secara profesional dengan arsitektur modern, domain khusus, serta enkripsi SSL yang aman. Tahap deployment yang terencana dengan baik meminimalkan risiko downtime saat terjadi lonjakan traffic.

Pada Bagian 9 dari rangkaian panduan ini, kita akan membahas topik Monitoring, Logging, dan Error Tracking Aplikasi Production. Anda akan mempelajari cara mengintegrasikan tool pelacakan error seperti Sentry, mengelola log server secara real-time, serta mengatur alarm pengingat saat aplikasi mengalami gangguan.

📖 Artikel Terkait