Cara Deploy Website ke Vercel dalam 15 Menit

Deploy website ke Vercel adalah salah satu cara praktis untuk memublikasikan website tanpa harus mengelola server, mengatur Nginx secara manual, atau memasang sertifikat SSL sendiri. Dengan menghubungkan repository GitHub, GitLab, atau Bitbucket ke Vercel, proses build dan deployment dapat berjalan otomatis setiap kali kode diperbarui. Hasilnya, developer bisa fokus mengembangkan aplikasi, sementara infrastruktur deployment ditangani oleh platform.

Panduan ini membahas cara deploy Vercel dari nol sampai website dapat diakses menggunakan domain sendiri. Pembahasan mencakup website HTML statis, aplikasi React dengan Vite, Next.js, konfigurasi build, environment variables, custom domain, preview deployment, hingga solusi untuk error yang sering muncul saat deployment.

Jika Anda baru pertama kali menggunakan Vercel, ikuti tutorial secara berurutan. Jika sudah memiliki proyek yang siap dipublikasikan, Anda bisa langsung menuju bagian yang membahas framework, konfigurasi domain, atau troubleshooting.

Apa Itu Vercel?

Vercel adalah platform cloud untuk membangun, melakukan deployment, dan menjalankan website serta aplikasi web. Platform ini mendukung berbagai framework modern, termasuk Next.js, React, Vite, Astro, dan sejumlah framework lainnya. Vercel juga menyediakan integrasi Git, HTTPS otomatis, jaringan distribusi konten, serta preview deployment untuk membantu proses pengembangan dan review kode.

Salah satu keunggulan Vercel adalah integrasi antara repository dan deployment. Developer tidak harus mengunggah file website secara manual setiap kali melakukan perubahan. Setelah repository terhubung, Vercel dapat mengambil kode terbaru, menjalankan proses build, lalu menerbitkan hasilnya ke URL deployment.

Vercel sangat erat dengan Next.js karena platform ini dikembangkan oleh perusahaan yang juga membuat framework tersebut. Namun, pengguna tidak harus menggunakan Next.js untuk memanfaatkan Vercel. Website HTML biasa maupun proyek front-end dengan framework lain juga dapat di-deploy di platform ini.

Bagaimana Cara Kerja Deployment Vercel?

Sebelum mulai melakukan deployment, penting untuk memahami alur dasarnya. Vercel menggunakan kode dari repository atau sumber deployment lain, menjalankan konfigurasi build yang sesuai, lalu menyediakan hasil deployment melalui URL yang dapat diakses publik.

Developer mengubah kode website
              |
              v
      Git commit dan push
              |
              v
    Repository GitHub/GitLab
              |
              v
       Vercel mengambil kode
              |
              v
     Install dependencies
              |
              v
       Build aplikasi
              |
              v
     Deployment berhasil?
          /         \
        Tidak        Ya
          |           |
          v           v
    Periksa log    URL aktif
       error           |
                       v
             Domain dan HTTPS
  

Alur tersebut menunjukkan bahwa deployment bukan sekadar mengunggah file. Untuk proyek yang menggunakan framework, Vercel juga perlu menjalankan proses build agar source code diubah menjadi output yang siap disajikan. Pada website HTML statis yang tidak membutuhkan proses build, langkah tersebut dapat dilewati.

Dokumentasi resmi mengenai mekanisme ini dapat dibaca pada panduan deployment Git Vercel dan dokumentasi build Vercel.

Apa Saja yang Perlu Disiapkan Sebelum Deploy Vercel?

Siapkan beberapa hal berikut sebelum memulai agar proses deployment berjalan lebih lancar.

Jika source code belum tersimpan di repository, Anda dapat memulai dengan membuat repository baru di GitHub. Setelah itu, commit dan push kode website ke repository tersebut. Untuk proyek yang sudah memiliki repository, pastikan branch yang berisi kode terbaru sudah dikirim ke remote.

Langkah 1: Membuat Akun Vercel

1. Buka website resmi Vercel.
2. Pilih opsi pendaftaran atau login yang tersedia.
3. Hubungkan akun Git provider jika Anda berencana menggunakan deployment otomatis melalui repository.
4. Berikan izin akses yang diperlukan agar Vercel dapat membaca repository yang akan digunakan.
5. Setelah masuk ke dashboard, Anda dapat membuat proyek baru.

Anda tidak perlu menyiapkan VPS atau menginstal web server di komputer lokal untuk mengikuti tutorial ini. Browser dan repository yang berisi source code sudah cukup untuk memulai deployment melalui dashboard.

Langkah 2: Memastikan Website Siap di-Deploy

Sebelum menghubungkan repository ke Vercel, periksa struktur folder proyek. Kesalahan dalam menentukan direktori proyek merupakan salah satu penyebab deployment tidak menemukan file yang diperlukan.

Contoh struktur website HTML statis

website-saya/
├── index.html
├── about.html
├── css/
│   └── style.css
├── js/
│   └── script.js
└── images/
    └── logo.png

Pada contoh tersebut, file index.html berada di root proyek. Jika website hanya terdiri dari HTML, CSS, JavaScript, dan aset statis, Anda tidak harus menjalankan perintah build.

Contoh struktur aplikasi React dengan Vite

website-react/
├── package.json
├── package-lock.json
├── index.html
├── src/
│   ├── App.jsx
│   └── main.jsx
├── public/
└── vite.config.js

Berbeda dengan website HTML biasa, aplikasi Vite umumnya perlu menjalankan proses build untuk menghasilkan direktori dist. Direktori tersebut berisi file hasil build yang nantinya disajikan kepada pengunjung.

Contoh struktur aplikasi Next.js

website-nextjs/
├── package.json
├── package-lock.json
├── app/
│   ├── layout.js
│   └── page.js
├── public/
└── next.config.js

Proyek Next.js umumnya menggunakan perintah next build. Anda tidak perlu mengatur direktori output secara manual pada konfigurasi standar karena Vercel dapat mendeteksi framework dan menerapkan pengaturan yang sesuai.

Jika proyek Anda menggunakan monorepo, misalnya satu repository berisi folder frontend dan backend, pastikan direktori root proyek Vercel diarahkan ke folder aplikasi yang ingin di-deploy.

Langkah 3: Menghubungkan Repository ke Vercel

Setelah repository siap, lakukan deployment pertama melalui dashboard Vercel.

1. Masuk ke dashboard Vercel.
2. Klik Add New → Project atau opsi pembuatan proyek yang tersedia.
3. Pilih repository Git yang berisi website Anda.
4. Jika repository belum muncul, periksa izin integrasi Git dan akses repository pada akun yang terhubung.
5. Tentukan nama proyek dan periksa direktori root yang digunakan.
6. Periksa Framework Preset, Build Command, dan Output Directory yang terdeteksi.
7. Tambahkan environment variables jika aplikasi membutuhkannya.
8. Klik Deploy untuk memulai proses deployment.

Vercel akan mengambil source code, menginstal dependency jika diperlukan, menjalankan build, kemudian memublikasikan hasilnya. Durasi proses bergantung pada ukuran proyek, jumlah dependency, serta kompleksitas build.

Setelah deployment berhasil, Vercel menyediakan URL yang dapat digunakan untuk menguji website. Alamat tersebut biasanya menggunakan subdomain vercel.app.

Jika deployment gagal, jangan langsung mengubah semua pengaturan. Buka log deployment terlebih dahulu untuk mengetahui apakah masalah berasal dari dependency, build command, TypeScript, environment variables, atau konfigurasi direktori.

Langkah 4: Mengatur Build Command dan Output Directory

Build command adalah perintah yang dijalankan untuk membangun aplikasi. Output directory adalah folder hasil build yang akan disajikan sebagai file statis jika sesuai dengan model deployment proyek tersebut.

Vercel dapat mendeteksi banyak framework secara otomatis. Meski demikian, developer tetap perlu memahami konfigurasi ini karena kesalahan build command atau output directory dapat menyebabkan deployment gagal atau halaman menampilkan error 404.

Nilai pada tabel merupakan konfigurasi yang lazim digunakan, bukan aturan universal. Konfigurasi proyek, adapter, plugin, dan pengaturan output khusus dapat mengubah hasil akhirnya. Jika Vercel sudah mendeteksi framework dengan benar, gunakan pengaturan otomatis sebagai titik awal.

A. Konfigurasi untuk website HTML statis

Jika website Anda tidak memerlukan proses build, pilih Framework Preset Other. Biarkan Build Command kosong dan pastikan Output Directory mengarah ke folder yang berisi index.html.

Misalnya, jika struktur repository seperti berikut:

website-saya/
├── index.html
├── about.html
└── assets/

Anda dapat menggunakan root proyek sebagai direktori file statis. Jika file website berada di folder khusus, misalnya public, sesuaikan Output Directory dengan struktur tersebut. Jangan mengarahkan output ke folder yang belum berisi hasil website.

B. Konfigurasi untuk React dan Vite

Untuk aplikasi React yang dibuat dengan Vite, buka file package.json dan pastikan terdapat script build yang sesuai.

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Konfigurasi di atas merupakan contoh bagian scripts, bukan keseluruhan file package.json. Pertahankan dependency dan konfigurasi lain yang dibutuhkan proyek Anda.

Jalankan perintah berikut di terminal lokal untuk memastikan aplikasi dapat dibangun:

npm install
npm run build

Jika build berhasil, Vite biasanya menghasilkan folder dist. Folder inilah yang digunakan sebagai Output Directory jika Anda mengatur nilainya secara manual.

C. Konfigurasi untuk Next.js

Pada proyek Next.js standar, pastikan script build tersedia di package.json.

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

Jalankan npm run build untuk memeriksa apakah aplikasi dapat dibangun. Untuk deployment standar di Vercel, biarkan pengaturan framework dan output mengikuti konfigurasi Next.js yang terdeteksi secara otomatis.

Jangan mengatur folder .next sebagai output statis secara sembarangan. Folder tersebut merupakan hasil build internal Next.js dan tidak berarti seluruh aplikasinya dapat dijalankan hanya dengan menyajikan file statis.

Jika aplikasi memang ingin diekspor sebagai website statis, Next.js menyediakan konfigurasi static export melalui opsi output: 'export' di next.config.js. Mode ini memiliki batasan, antara lain tidak mendukung fitur yang memerlukan server Next.js saat runtime. Setelah proses build, hasil ekspor statis umumnya berada di folder out.

Di mana pengaturan build berada di Vercel?

Jika perlu mengubah konfigurasi, buka proyek di dashboard Vercel, kemudian masuk ke Settings → Build and Deployment atau bagian pengaturan build yang tersedia pada antarmuka terbaru.

Periksa empat konfigurasi berikut:

• Framework Preset: framework yang digunakan proyek.
• Root Directory: folder tempat aplikasi berada di dalam repository.
• Build Command: perintah untuk menghasilkan aplikasi siap deploy.
• Output Directory: folder hasil build atau folder file statis yang akan disajikan.

Dokumentasi resmi tersedia di panduan konfigurasi build Vercel.

Langkah 5: Mengatur Environment Variables dengan Aman

Environment variables digunakan untuk menyimpan konfigurasi yang diperlukan aplikasi, seperti URL API, identitas environment, dan kredensial layanan eksternal. Pengaturan ini memungkinkan aplikasi memakai konfigurasi berbeda untuk development, preview, dan production tanpa harus menulis nilai tersebut langsung di source code.

Untuk menambah environment variable, buka proyek Vercel dan masuk ke Settings → Environment Variables. Tambahkan nama variabel, nilainya, serta environment tempat variabel tersebut akan digunakan. Simpan perubahan dan lakukan deployment ulang jika diperlukan agar build atau deployment baru menggunakan konfigurasi tersebut.

Contoh environment variables

API_BASE_URL=https://api.example.com
DATABASE_URL=your-database-connection-string
API_SECRET=your-private-secret

Nilai di atas hanya contoh. Jangan menggunakan kredensial asli dalam artikel, screenshot, repository publik, atau kode yang dapat diakses pengunjung.

Untuk proyek Next.js, variabel dengan prefix NEXT_PUBLIC_ dapat dimasukkan ke bundle browser. Sebagai contoh, NEXT_PUBLIC_API_URL cocok untuk URL API yang memang boleh diketahui publik, tetapi bukan untuk password database atau secret key.

Framework lain memiliki aturan prefix publik yang berbeda. Pada Vite, misalnya, variabel dengan prefix VITE_ umumnya dapat diakses oleh kode client dan karena itu tidak boleh digunakan untuk menyimpan rahasia.

Prinsip penting: environment variables tidak otomatis menjadikan semua variabel rahasia. Jika nilainya dikirim ke browser, pengunjung berpotensi melihatnya melalui source code atau developer tools.

Checklist keamanan environment variables

• Jangan commit file .env yang berisi kredensial asli ke repository publik.
• Pastikan file rahasia tercantum dalam .gitignore jika sesuai dengan kebutuhan proyek.
• Gunakan variabel publik hanya untuk nilai yang aman diketahui pengunjung.
• Pisahkan konfigurasi development, preview, dan production jika nilainya berbeda.
• Jika secret terlanjur masuk ke repository, cabut atau rotasi kredensial tersebut. Menghapusnya dari commit terbaru saja tidak menghilangkan riwayat sebelumnya.

Langkah 6: Menghubungkan Custom Domain ke Vercel

Setelah website berhasil di-deploy, Anda dapat menghubungkan domain sendiri agar pengunjung mengakses alamat seperti www.example.com atau example.com alih-alih subdomain vercel.app.

Domain biasanya dibeli melalui registrar atau penyedia domain. Vercel berfungsi sebagai platform deployment dan hosting aplikasi, sedangkan pengelolaan DNS dapat dilakukan di registrar maupun penyedia DNS yang Anda gunakan.

Langkah menghubungkan domain

1. Buka dashboard Vercel dan pilih proyek yang ingin menggunakan domain sendiri.
2. Masuk ke Settings → Domains.
3. Tambahkan domain, misalnya example.com.
4. Jika ingin menggunakan alamat dengan www, tambahkan www.example.com juga.
5. Periksa instruksi DNS yang diberikan Vercel untuk masing-masing nama domain.
6. Buka pengelola DNS domain Anda dan tambahkan atau sesuaikan record yang diminta.
7. Kembali ke Vercel untuk memeriksa status verifikasi domain.
8. Setelah domain terhubung, periksa apakah HTTPS sudah aktif dan kedua varian domain berperilaku sesuai konfigurasi.

Memahami DNS untuk domain Vercel

Record DNS yang diperlukan bergantung pada nama domain dan konfigurasi deployment. Sebagai gambaran, domain utama atau apex domain dapat menggunakan record A, sedangkan subdomain seperti www sering menggunakan CNAME. Namun, jangan menyalin nilai record dari tutorial lain tanpa memeriksa instruksi yang ditampilkan pada proyek Anda.

Record di atas merupakan penjelasan umum. Anda tidak selalu memerlukan ketiganya untuk menghubungkan domain ke Vercel.

Jika domain dikelola melalui Cloudflare atau penyedia DNS lain, perhatikan konfigurasi proxy dan record yang sudah ada. Jangan menghapus record email, verifikasi, atau layanan lain secara sembarangan hanya untuk menyelesaikan deployment website.

Memilih domain utama

Jika Anda menggunakan example.com dan www.example.com, tentukan salah satunya sebagai alamat utama. Atur domain alternatif agar mengarah ke domain utama melalui mekanisme redirect yang disediakan Vercel. Dengan demikian, pengunjung menggunakan satu versi alamat yang konsisten.

Vercel dapat menyediakan sertifikat HTTPS secara otomatis setelah konfigurasi domain memenuhi persyaratan platform. Jika sertifikat belum aktif, periksa status domain, konfigurasi DNS, serta kemungkinan record yang saling bertentangan.

Untuk memahami record DNS lebih lanjut, baca panduan cara menghubungkan domain ke hosting dan memahami DNS.

Langkah 7: Memahami Preview Deployment dan Production Deployment

Salah satu fitur penting Vercel adalah pemisahan antara deployment untuk pengujian dan deployment produksi. Fitur ini membantu developer memeriksa perubahan sebelum memperbarui website yang digunakan pengunjung.

Contoh workflow deployment

# Membuat branch untuk fitur baru
git checkout -b feature/landing-page

# Memeriksa perubahan
git status

# Menyimpan perubahan
git add .
git commit -m "Add landing page"

# Mengirim branch ke repository
git push -u origin feature/landing-page

Jika repository terhubung dengan Vercel, push tersebut dapat memicu preview deployment. Developer kemudian membuka URL preview untuk memeriksa tampilan, fungsi, dan perilaku aplikasi sebelum perubahan digabungkan ke production branch.

Alur sederhananya adalah branch fitur, preview, review, merge ke branch produksi, lalu deployment produksi. Nama branch produksi bisa berupa main atau branch lain sesuai konfigurasi proyek.

Feature branch
      |
      v
   Git push
      |
      v
Preview deployment
      |
      v
Review dan pengujian
      |
      v
Pull request disetujui
      |
      v
Merge ke production branch
      |
      v
Production deployment
  

Perlu diperhatikan bahwa preview deployment bukan otomatis salinan produksi yang aman untuk semua jenis data. Jika aplikasi menggunakan database, API, atau layanan eksternal, atur environment variables dan izin akses dengan tepat agar pengujian tidak memengaruhi data produksi.

Untuk memahami proses otomatisasi deployment secara lebih luas, Anda juga dapat membaca panduan setup CI/CD menggunakan GitHub Actions.

Langkah 8: Deploy Vercel Menggunakan Command Line Interface

Selain melalui dashboard, developer dapat menggunakan Vercel CLI untuk melakukan deployment dari terminal. Metode ini berguna ketika Anda ingin menguji proyek dengan cepat, bekerja dari terminal, atau mengintegrasikan deployment ke workflow pengembangan.

Pastikan Node.js dan npm sudah tersedia di komputer. Kemudian instal Vercel CLI secara global menggunakan perintah berikut:

npm install -g vercel

Masuk ke direktori proyek yang ingin di-deploy:

cd nama-proyek

Login ke akun Vercel:

vercel login

Jalankan perintah deployment:

vercel

Pada penggunaan umum, perintah tersebut membuat preview deployment. Ikuti instruksi CLI untuk menghubungkan direktori lokal ke proyek Vercel jika diperlukan.

Setelah preview selesai diuji, gunakan perintah berikut jika ingin melakukan deployment produksi:

vercel --prod

Pastikan Anda sudah memahami proyek dan target deployment sebelum menjalankan perintah produksi. Perintah tersebut dapat menerbitkan perubahan yang langsung digunakan oleh pengunjung website.

Dokumentasi lengkap tersedia di panduan resmi Vercel CLI.

Langkah 9: Menguji Website Setelah Deployment

Deployment yang berstatus berhasil belum tentu menjamin semua fitur website berfungsi dengan benar. Setelah mendapatkan URL, lakukan pengujian dasar untuk memastikan hasil deployment sesuai harapan.

Checklist pengujian website

• Buka URL deployment dan pastikan halaman utama dapat dimuat.
• Periksa seluruh halaman penting, termasuk halaman produk, artikel, kontak, dan formulir.
• Pastikan gambar, CSS, font, serta JavaScript berhasil dimuat.
• Uji navigasi, tombol, formulir, dan fitur interaktif lainnya.
• Periksa request API pada browser developer tools jika aplikasi menggunakan backend.
• Pastikan environment variables untuk production telah diatur dengan benar.
• Uji website di perangkat seluler dan desktop.
• Jika memakai domain sendiri, periksa HTTPS dan redirect domain utama.
• Periksa metadata halaman, canonical URL, robots.txt, dan sitemap jika website ditujukan untuk mesin pencari.

Untuk website yang bergantung pada backend eksternal, uji juga skenario ketika API mengembalikan error, koneksi lambat, atau data kosong. Hal ini membantu memastikan website tidak hanya berhasil ditampilkan, tetapi juga berfungsi dengan baik dalam kondisi nyata.

Langkah 10: Memahami Batasan Vercel untuk Backend dan Database

Vercel bukan sekadar hosting file HTML, tetapi juga mendukung fungsi server-side dan aplikasi full-stack. Meski demikian, arsitektur aplikasi perlu disesuaikan dengan jenis workload yang dijalankan.

Website statis, front-end React, dan aplikasi Next.js dapat menggunakan pendekatan deployment yang berbeda. Sebagian fitur berjalan sebagai aset statis, sementara fitur lain membutuhkan fungsi server-side atau infrastruktur pendukung.

Vercel Functions memiliki batasan durasi eksekusi dan karakteristik runtime yang berbeda dari proses server permanen. Karena itu, aplikasi yang membutuhkan worker selalu aktif, proses background panjang, koneksi persisten tertentu, atau kontrol penuh terhadap sistem operasi perlu dievaluasi secara khusus.

Anda tidak harus memindahkan seluruh aplikasi ke satu platform. Sebagai contoh, front-end dapat berjalan di Vercel, sedangkan backend utama dan database ditempatkan pada layanan lain. Pola ini dapat memberikan fleksibilitas selama konfigurasi jaringan, keamanan, autentikasi, dan komunikasi antarlayanan dirancang dengan baik.

Jika kebutuhan Anda adalah mengelola server Ubuntu, Nginx, aplikasi backend, dan proses layanan secara lebih langsung, pelajari tutorial deploy aplikasi ke VPS Ubuntu menggunakan Nginx.

Vercel Gratis atau Berbayar: Mana yang Perlu Digunakan?

Vercel menyediakan paket Hobby, Pro, dan Enterprise dengan peruntukan serta batas penggunaan yang berbeda. Sebelum memilih paket, pertimbangkan apakah proyek bersifat pribadi atau komersial, kebutuhan kolaborasi tim, konsumsi resource, dan fitur operasional yang dibutuhkan.

Catatan penting: paket Hobby ditujukan untuk penggunaan pribadi nonkomersial. Website bisnis, website klien berbayar, dan penggunaan komersial perlu mempertimbangkan paket yang sesuai, termasuk Pro. Jangan menganggap paket gratis otomatis cocok hanya karena trafik website masih rendah.

Kuota, harga, dan batas resource dapat berubah. Sebelum menempatkan aplikasi produksi, periksa dokumentasi paket Vercel dan halaman harga resmi Vercel untuk mengetahui ketentuan terbaru.

Troubleshooting: Cara Mengatasi Masalah Deploy Vercel

Ketika deployment tidak berjalan sesuai harapan, langkah pertama adalah membuka detail deployment di dashboard Vercel. Periksa build log dan pesan error sebelum mengubah konfigurasi. Pesan error biasanya memberikan petunjuk apakah masalah terjadi saat instalasi dependency, kompilasi aplikasi, atau penyajian hasil build.

1. Deployment gagal saat build

Penyebab yang mungkin: kesalahan sintaks, dependency tidak kompatibel, script build tidak tersedia, atau konfigurasi TypeScript yang menghasilkan error.

Solusi:

1. Buka build log pada deployment yang gagal.
2. Identifikasi error pertama yang relevan, bukan hanya pesan terakhir.
3. Jalankan build secara lokal dengan npm run build.
4. Perbaiki error dan pastikan perubahan sudah di-commit.
5. Push kembali ke repository untuk memicu deployment baru.

2. Website menampilkan 404 setelah deploy

Penyebab yang mungkin: file index.html tidak berada pada direktori yang disajikan, Output Directory salah, atau konfigurasi routing belum sesuai.

Solusi: periksa Root Directory dan Output Directory. Untuk website statis, pastikan file utama berada pada direktori output yang benar. Untuk aplikasi single-page application yang memakai client-side routing, periksa apakah diperlukan konfigurasi rewrite yang sesuai. Jangan menerapkan rewrite universal tanpa memahami dampaknya terhadap file statis dan endpoint API.

3. Build berhasil, tetapi gambar atau CSS tidak muncul

Penyebab yang mungkin: path aset salah, perbedaan huruf besar dan kecil pada nama file, atau referensi aset masih menunjuk ke path lokal.

Solusi: periksa URL aset pada browser developer tools dan cocokkan dengan struktur file yang di-deploy. Pada lingkungan deployment berbasis Linux, perbedaan kapitalisasi nama file dapat menyebabkan file yang berfungsi di lingkungan lokal tertentu menjadi tidak ditemukan.

4. Environment variable bernilai undefined

Penyebab yang mungkin: variabel belum ditambahkan pada environment yang tepat, nama variabel berbeda, atau aplikasi belum dibangun ulang setelah konfigurasi diperbarui.

Solusi: periksa nama variabel, target environment, serta kebutuhan prefix publik pada framework. Setelah perubahan, lakukan deployment baru jika diperlukan. Jangan menyelesaikan masalah dengan memindahkan secret ke variabel publik.

5. Custom domain belum aktif

Penyebab yang mungkin: record DNS belum sesuai, perubahan DNS belum tersebar, terdapat record yang bertentangan, atau proses verifikasi belum selesai.

Solusi: cocokkan konfigurasi DNS dengan instruksi domain pada dashboard Vercel. Periksa record A, CNAME, atau TXT yang memang diminta. Setelah DNS benar, tunggu proses propagasi dan periksa kembali status verifikasi serta HTTPS.

6. Halaman utama berfungsi, tetapi refresh pada URL lain menghasilkan 404

Masalah ini sering terjadi pada aplikasi single-page application yang mengandalkan client-side routing. Navigasi internal mungkin berfungsi karena ditangani JavaScript, tetapi permintaan langsung ke URL seperti /dashboard tetap dikirim ke server.

Jika proyek menggunakan Vite atau front-end statis dengan routing sisi klien, periksa dokumentasi framework dan kebutuhan rewrite. Berikut contoh konfigurasi vercel.json untuk SPA sederhana yang ingin mengarahkan permintaan halaman ke index.html:

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

Gunakan konfigurasi tersebut hanya jika sesuai dengan struktur aplikasi. Rewrite seperti ini tidak boleh diterapkan tanpa evaluasi pada aplikasi yang memiliki endpoint API atau membutuhkan aturan routing lain, karena permintaan yang seharusnya mengakses resource tertentu dapat ikut diarahkan ke halaman utama.

7. Deployment berhasil, tetapi API tidak dapat diakses

Penyebab yang mungkin: URL API salah, backend belum aktif, konfigurasi CORS tidak sesuai, atau environment variable production berbeda dari environment lokal.

Solusi: periksa URL request di browser developer tools, status respons API, konfigurasi CORS pada backend, serta environment variables. Pastikan backend dapat dijangkau dari lingkungan deployment dan endpoint yang digunakan memang tersedia untuk aplikasi tersebut.

Checklist Sebelum Website Vercel Dipublikasikan

Gunakan checklist berikut untuk memastikan proses deployment tidak berhenti hanya pada status berhasil.

• Source code dan dependency sudah tersimpan di repository.
• Build berhasil dijalankan tanpa error yang belum ditangani.
• Root Directory, Build Command, dan Output Directory sesuai dengan framework.
• Environment variables production sudah diatur dengan benar.
• Secret dan kredensial database tidak terekspos ke browser.
• Halaman utama, navigasi, gambar, CSS, dan JavaScript berfungsi.
• Routing sudah diuji dengan membuka URL secara langsung dan melakukan refresh.
• Integrasi API dan database sudah diuji pada environment yang sesuai.
• Custom domain sudah diverifikasi jika digunakan.
• HTTPS dan redirect domain utama berjalan sesuai konfigurasi.
• Metadata SEO, canonical URL, robots.txt, dan sitemap sudah diperiksa jika relevan.
• Paket Vercel sesuai dengan tujuan penggunaan dan kebutuhan resource.

FAQ: Pertanyaan yang Sering Diajukan tentang Deploy Vercel

Apakah Vercel gratis untuk deploy website?

Vercel menyediakan paket Hobby gratis untuk proyek pribadi dan penggunaan nonkomersial, dengan batas resource tertentu. Untuk website bisnis dan kebutuhan profesional, periksa paket Pro serta ketentuan penggunaan terbaru sebelum menentukan pilihan.

Apakah harus menggunakan GitHub untuk deploy Vercel?

Tidak. Vercel mendukung integrasi dengan GitHub, GitLab, dan Bitbucket, serta menyediakan Vercel CLI untuk deployment dari terminal. Integrasi Git memudahkan proses deployment otomatis ketika kode diperbarui.

Apakah website HTML biasa bisa di-deploy ke Vercel?

Bisa. Website HTML, CSS, dan JavaScript statis dapat di-deploy tanpa framework. Pilih preset yang sesuai, biasanya Other, kemudian pastikan direktori yang disajikan berisi file index.html dan seluruh aset yang diperlukan.

Apakah Vercel mendukung React dan Next.js?

Ya. Vercel mendukung React melalui tool seperti Vite serta menyediakan dukungan terintegrasi untuk Next.js. Pengaturan build sebaiknya mengikuti konfigurasi framework yang digunakan.

Apakah bisa menggunakan domain sendiri di Vercel?

Bisa. Tambahkan domain pada pengaturan proyek, kemudian ikuti instruksi DNS yang diberikan. Setelah verifikasi selesai, HTTPS dapat disediakan secara otomatis sesuai persyaratan platform.

Apakah setiap git push langsung memperbarui website produksi?

Tidak selalu. Push ke branch yang dikonfigurasi sebagai production branch dapat memicu deployment produksi, sedangkan branch lain umumnya menghasilkan preview deployment. Perilaku tersebut bergantung pada pengaturan repository dan proyek Vercel.

Apakah Vercel bisa digunakan untuk backend?

Bisa, termasuk untuk fungsi server-side dan API yang sesuai dengan runtime Vercel Functions. Namun, backend yang membutuhkan proses permanen, worker selalu aktif, atau kontrol penuh atas server mungkin lebih cocok ditempatkan pada infrastruktur lain.

Apakah Vercel otomatis membuat website SEO-friendly?

Vercel menyediakan infrastruktur deployment, tetapi tidak otomatis menjamin peringkat mesin pencari. Developer tetap perlu memperhatikan konten, metadata, struktur URL, internal linking, rendering, performa, aksesibilitas crawler, serta kualitas pengalaman pengguna.

Kesimpulan

Deploy Vercel memungkinkan developer memublikasikan website dengan alur yang relatif sederhana, terutama ketika source code sudah tersimpan di repository Git. Dengan konfigurasi build yang benar, environment variables yang aman, custom domain yang terverifikasi, serta workflow preview dan production yang teratur, proses deployment dapat menjadi bagian alami dari pengembangan aplikasi.

Untuk proyek HTML statis dan front-end modern, Vercel dapat mengurangi pekerjaan operasional yang biasanya diperlukan saat menyiapkan hosting. Untuk aplikasi full-stack, pemilihan arsitektur tetap perlu mempertimbangkan kebutuhan backend, database, proses background, keamanan, dan biaya penggunaan.

Jika Anda membutuhkan website bisnis yang tidak hanya online, tetapi juga dirancang dengan struktur teknis, performa, dan fondasi SEO yang baik, Clovertechno menyediakan layanan pembuatan website untuk kebutuhan bisnis. Anda juga dapat menghubungi tim kami melalui halaman kontak Clovertechno untuk mendiskusikan kebutuhan proyek.

Referensi Resmi

• Vercel Documentation — Deploying Git Repositories
• Vercel Documentation — Frameworks
• Vercel Documentation — Configuring a Build
• Vercel Documentation — CLI
• Vercel Documentation — Account Plans
• Vercel — Pricing