AI Web Building #08 — Deploy Website ke Vercel

Artikel 8 dari 8 · Tahap Deployment

Dari Project Lokal Menjadi Website yang Bisa Diakses Semua Orang

Selamat! Kita telah tiba di tahap akhir dari seluruh rangkaian seri AI Web Building.

Sejauh ini, kita telah menentukan ide, melakukan riset, berdiskusi mematangkan konsep, menyusun Website Brief, membangun kode dengan AI developer, melakukan pengujian menyeluruh, dan mengunggah kode ke GitHub.

Namun, website masih berada di dalam komputer atau repository pribadi. Agar teman, klien, penguji challenge, atau pengguna di seluruh dunia dapat membukanya melalui internet, kita perlu melakukan proses deployment.

Deployment adalah proses mempublikasikan aplikasi web ke server cloud hosting agar memiliki URL aktif (seperti namaproject.vercel.app). Pada panduan ini, kita akan menggunakan Vercel.

Vercel adalah platform cloud modern yang terintegrasi secara otomatis dengan GitHub. Setiap kali kamu melakukan update kode, Vercel akan langsung memperbarui website secara otomatis (Continuous Deployment).

1. Apa yang Perlu Disiapkan?

Sebelum memulai, pastikan kamu sudah memiliki:

• Akun GitHub aktif.
• Repository GitHub berisi source code website (dari materi #07).
• Proyek yang sukses menjalankan perintah npm run build tanpa error.
• Daftar Environment Variables (jika proyekmu menggunakan API key eksternal).

2. Buka Vercel dan Hubungkan Akun

1. Kunjungi vercel.com.
2. Klik tombol Sign Up atau Log In.
3. Pilih opsi Continue with GitHub. Menggunakan akun GitHub mempermudah otorisasi repository secara otomatis.

3. Import Repository GitHub

Setelah masuk ke dashboard utama Vercel, ikuti alur berikut:

1. Buat Project Baru: Klik tombol "Add New..." lalu pilih "Project".
2. Pilih Repository: Di bawah daftar Import Git Repository, temukan nama repository website kamu (misal: hospital-website).
3. Klik Import: Klik tombol Import di samping nama repository tersebut.

4. Periksa Konfigurasi Project

Sebelum menekan tombol deploy, periksa konfigurasi dasar proyekmu:

• Framework Preset: Vercel biasanya otomatis mendeteksi framework yang digunakan (misalnya Vite, Next.js, atau Create React App). Pastikan preset sesuai.
• Root Directory: Jika file proyek langsung berada di root repository, biarkan ./. Jika berada dalam subfolder, klik Edit dan pilih foldernya.
• Build & Output Settings:
  • Build Command: npm run build
  • Output Directory: dist (untuk Vite) atau .next (untuk Next.js)
• Environment Variables: Jika aplikasimu membutuhkan API key rahasia (seperti Gemini API key), tambahkan nama variabel (Key) dan isinya (Value) di bagian ini. Jangan pernah menaruh API key langsung di file kode publik.

[!NOTE] Khusus aplikasi Single Page Application (SPA) berbasis Vite/React dengan routing halaman internal, pastikan konfigurasi rewrite diatur agar saat halaman internal di-refresh tidak memunculkan pesan error 404. Cukup buat file vercel.json di root proyek jika dibutuhkan:

JSONCopy

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

5. Jalankan Proses Deployment

Klik tombol Deploy.

Vercel akan mengunduh source code dari GitHub, menginstall dependencies, menjalankan proses build, dan mendistribusikan websitemu ke server jaringan global (CDN).

Proses ini biasanya memakan waktu antara 30 hingga 60 detik. Ketika selesai, layar akan menampilkan konfeti dengan pesan:

🎉 Congratulations! Your project has been deployed.

Kamu akan mendapatkan URL publik resmi, misalnya:
https://hospital-website.vercel.app

6. Uji Website Setelah Online (Post-Deployment Checklist)

Website berhasil di-deploy bukan jaminan 100% semua fitur langsung mulus. Lakukan verifikasi di alamat URL publik tersebut:

• Halaman utama (Homepage) terbuka cepat tanpa error tampilan.
• Navigasi menuju halaman internal (Dokter, Layanan, Kontak) berjalan mulus.
• Coba refresh browser saat berada di halaman internal, pastikan tidak muncul halaman 404 Not Found.
• Seluruh gambar, logo, dan ikon termuat sempurna (tidak ada ikon gambar rusak).
• Fitur interaktif (pencarian, filter, modal formulir) berfungsi normal.
• Tampilan website tetap responsif ketika dibuka melalui smartphone sungguhan.
• Tidak ada pesan error merah di console browser (F12 > Console).
• Tidak ada data sensitif atau API key rahasia yang bocor ke publik.

7. Cara Memperbaiki Deployment yang Gagal

Jika proses build di Vercel gagal, jangan panik. Buka tab Deployment Logs di Vercel untuk membaca pesan errornya.

Salin pesan error tersebut dan minta AI menganalisisnya:

Website saya mengalami kegagalan deployment di Vercel.

Informasi proyek:
- Framework: [contoh: React + Vite]
- Build command: [contoh: npm run build]
- Root directory: [contoh: ./]

Deployment error log:
[TEMPEL KODE ERROR DARI VERCEL DI SINI]

Bantu saya:
1. Identifikasi akar masalah berdasarkan log error tersebut.
2. Jelaskan penyebabnya dengan bahasa sederhana.
3. Tentukan file atau konfigurasi yang perlu diperbaiki.
4. Berikan kode perbaikan yang tepat dan minimal.
5. Jelaskan cara memverifikasinya.

Jangan mengubah arsitektur proyek tanpa alasan yang jelas.
Jangan meminta saya membagikan nilai environment variable rahasia.

Setelah kode diperbaiki dan di-push ke GitHub, Vercel akan otomatis mengulang deployment.

8. Hubungkan Custom Domain (Opsional)

Jika kamu ingin menggunakan nama domain brand sendiri (seperti www.kliniksentosa.com):

1. Buka dashboard proyek di Vercel, masuk ke Settings > Domains.
2. Masukkan nama domain yang sudah kamu beli.
3. Vercel akan memberikan petunjuk DNS Record (biasanya berupa CNAME atau A Record).
4. Pasang DNS record tersebut di dashboard registrar domain kamu. Dalam beberapa menit hingga jam, domainmu akan aktif dengan sertifikat SSL gratis (https).

9. Update Website Setelah Online (Alur Kerja Otomatis)

Keunggulan terbesar alur kerja GitHub + Vercel adalah kemudahan update:

Edit Kode di Komputer/AI  ──>  git push ke GitHub  ──>  Vercel Otomatis Build  ──>  Website Langsung Terupdate

Kamu tidak perlu lagi mengunggah file manual satu per satu lewat cPanel atau FTP!

10. Bagikan Hasil Proyek Kamu

Kini saatnya memamerkan karyamu ke komunitas, klien, atau submission juri perlombaan! Siapkan format submission yang rapi seperti ini:

# Project Submission

**Project Name:** Hospital Website — Klinik Sehat Sentosa  
**Live Website:** https://hospital-website.vercel.app  
**GitHub Repository:** https://github.com/USERNAME/hospital-website  

**Deskripsi Singkat:**  
Website profil rumah sakit modern yang dilengkapi direktori dokter spesialis, jadwal praktik, sistem filter layanan kesehatan, serta simulasi formulir pendaftaran pasien secara responsif.

**Teknologi:**  
React, Tailwind CSS, Vite, Lucide Icons, Deployed on Vercel.

**Status:**  
Demo / Educational Project

Hasil Akhir Materi #08

Website telah online secara global dengan sertifikat keamanan SSL, memiliki URL publik yang siap dibagikan, terhubung ke repository GitHub dengan pipeline Continuous Deployment, dan lulus seluruh pengujian post-deployment.

🏆 Penutup Seri: Dari Ide Sampai Online

Selamat! Kamu telah menyelesaikan seluruh 8 materi dalam seri AI Web Building:

1. #01 — Dari Ide Sampai Online: Menentukan ide, target audiens, dan ruang lingkup website.
2. #02 — Riset Website dengan AI: Menganalisis kompetitor, fitur esensial, dan struktur sitemap.
3. #03 — Diskusi Konsep Website dengan AI: Mematangkan user journey dan menentukan batas MVP.
4. #04 — Cara Membuat Website Brief yang Lengkap: Menyusun cetak biru dokumen spesifikasi yang presisi.
5. #05 — Build Website dengan AI Developer: Mengubah brief menjadi kode nyata dengan master prompt terstruktur.
6. #06 — Review dan Revisi Website dengan AI: Menjalankan audit QA, uji responsive, dan perbaikan terarah.
7. #07 — Upload Project Website ke GitHub: Mengamankan kode dengan version control dan dokumentasi README.
8. #08 — Deploy Website ke Vercel: Mempublikasikan website ke internet dengan continuous deployment.

Intisari Pembelajaran:

AI adalah akselerator yang luar biasa untuk riset, ideasi, penulisan kode, dan debugging. Namun, keberhasilan sebuah produk web tetap ditentukan oleh cara berpikir pengembangnya: kemampuan memahami kebutuhan pengguna nyata, merumuskan instruksi yang jelas, dan menjaga standar kualitas produk hingga layak digunakan.

Mulailah berkarya, bangun ide websitemu, dan bagikan karyamu kepada dunia!