Bagian 6 — Expose ke Internet dengan Cloudflare Tunnel · Langkah 26 dari 38
Jalur Vercel: Domain + Cloudflare + Vercel untuk Frontend
Deploy frontend (React/Next.js/static site) di Vercel dengan custom domain lewat Cloudflare DNS.
Kapan pakai jalur ini?
Kalau aplikasimu adalah frontend-only (React, Next.js, Vue, static HTML) yang tidak butuh server VM sendiri — Vercel/Netlify sudah menyediakan hosting gratis dengan CI/CD otomatis dari GitHub. Kamu cukup push ke repo, Vercel build & deploy otomatis. Yang perlu diatur: custom domain lewat Cloudflare DNS supaya aksesnya pakai nama profesional, bukan namaproject.vercel.app.
| Cloudflare Tunnel + VM | Vercel + Cloudflare DNS | |
|---|---|---|
| Cocok untuk | Backend API, full-stack, database, custom server | Frontend/static site, JAMstack, Next.js SSR (tanpa infra sendiri) |
| Server sendiri? | Ya — VM/VPS-mu yang menjalankan app | Tidak — Vercel yang menjalankan |
| Biaya server | Gratis (VM lokal) atau $4-6/bln (VPS) | Gratis (Vercel Free tier) |
| SSL | Otomatis dari Cloudflare (lewat tunnel) | Otomatis dari Vercel (Let's Encrypt / Google) |
| Setup | Install cloudflared + config tunnel | Klik-klik di dashboard Vercel + 1 DNS record |
Step 1 — Deploy project ke Vercel
- Push kode-mu ke GitHub repository (sudah harus ada di GitHub).
- Buka vercel.com → Sign Up / Login (bisa pakai akun GitHub langsung).
- Klik New Project → Import dari GitHub → pilih repo-mu.
- Vercel otomatis mendeteksi framework (Next.js, React, dll) → klik Deploy.
- Tunggu build selesai → project-mu sudah live di
namaproject.vercel.app. 🎉
Step 2 — Tambahkan custom domain di Vercel
- Di dashboard Vercel, buka project-mu → Settings → Domains.
- Ketik domain/subdomain yang ingin dipakai, misal:
server.domainmu.comataudomainmu.com→ klik Add. - Vercel akan menampilkan instruksi DNS yang harus kamu set:
| Jenis domain | Tipe record | Name | Value |
|---|---|---|---|
| Subdomain (server.domainmu.com) | CNAME | server | cname.vercel-dns.com |
| Root/Apex (domainmu.com) | A | @ | 76.76.21.21 |
Step 3 — Tambahkan DNS record di Cloudflare
- Buka dash.cloudflare.com → pilih domain-mu → DNS → Records.
- Klik Add record.
- Untuk subdomain (misal
server.domainmu.com): Type = CNAME, Name = server, Target = cname.vercel-dns.com, Proxy status = DNS Only (awan abu-abu). - Untuk root domain (misal
domainmu.com): Type = A, Name = @, IPv4 = 76.76.21.21, Proxy status = DNS Only (awan abu-abu). - Klik Save.
Step 4 — Tunggu verifikasi & SSL
Kembali ke halaman Domains di Vercel — statusnya akan berubah dari ⏳ ke ✅ dalam hitungan menit. Vercel otomatis menerbitkan sertifikat SSL. Kalau sudah ✅, buka https://server.domainmu.com di browser — seharusnya sudah jalan.
Step 5 (Opsional) — Aktifkan Cloudflare Proxy setelah jalan
Setelah domain sudah jalan dan SSL Vercel sudah terbit, kamu boleh mengaktifkan Proxied (awan oranye) untuk mendapat fitur Cloudflare (DDoS protection, analytics, caching). Tapi ada syarat wajib:
- Buka Cloudflare dashboard → domain-mu → SSL/TLS → Overview.
- Ubah mode dari Flexible ke Full (atau lebih baik Full (Strict)).
- Baru setelah itu, kembali ke DNS → edit record → ubah Proxy Status ke Proxied (awan oranye).
| SSL Mode | Arti | Dengan Vercel? |
|---|---|---|
| Flexible | Cloudflare → Server tanpa HTTPS | ❌ JANGAN — menyebabkan redirect loop (ERR_TOO_MANY_REDIRECTS) |
| Full | Cloudflare → Server dengan HTTPS (sertifikat tidak diverifikasi) | ✅ Boleh — tapi kurang aman |
| Full (Strict) | Cloudflare → Server dengan HTTPS + sertifikat valid | ✅ REKOMENDASI — Vercel punya sertifikat valid |
Tambahan: CAA Record (kalau SSL gagal terbit)
Kadang SSL Vercel gagal terbit karena domain-mu punya CAA record yang membatasi siapa yang boleh menerbitkan sertifikat. Solusi: tambahkan CAA record di Cloudflare DNS untuk CA yang dipakai Vercel:
| Type | Name | Tag | Value |
|---|---|---|---|
| CAA | @ | issue | pki.goog |
| CAA | @ | issue | sectigo.com |
| CAA | @ | issue | letsencrypt.org |
Atau kalau tidak ada CAA record sama sekali (kosong), biarkan kosong — artinya semua CA boleh menerbitkan, dan SSL akan terbit tanpa masalah.
✓ Tanda berhasil — centang kalau sudah kamu lihat/buktikan sendiri
Tombol “lanjut” terbuka setelah semua tercentang — bukan hukuman, tapi jaring pengaman: pastikan step ini benar-benar beres sebelum menumpuk step berikutnya di atasnya.
Lagi bermasalah?
ERR_TOO_MANY_REDIRECTS setelah aktifkan awan oranye
Penyebab klasik: SSL/TLS mode di Cloudflare masih Flexible. Cloudflare menghubungi Vercel lewat HTTP, Vercel redirect ke HTTPS, Cloudflare kirim lagi HTTP — loop tak berujung. Solusi: ubah ke Full (Strict) di Cloudflare → SSL/TLS → Overview. Biasanya langsung sembuh dalam hitungan detik.
SSL certificate gagal terbit di Vercel (error provisioning)
Periksa: (1) DNS record sudah benar dan Proxy Status = DNS Only (abu-abu)? Vercel perlu koneksi langsung untuk verifikasi. (2) Ada CAA record yang membatasi? Tambahkan 0 issue "pki.goog" dan 0 issue "letsencrypt.org". (3) Tunggu 5-10 menit lalu klik retry di Vercel.
Domain sudah setup tapi Vercel masih bilang 'Invalid Configuration'
DNS belum propagasi. Cek di terminal: nslookup server.domainmu.com 8.8.8.8 — kalau belum ada jawaban, tunggu beberapa menit. Kalau sudah ada tapi Vercel tetap invalid, pastikan value CNAME persis cname.vercel-dns.com (bukan cname.vercel-dns.com. dengan titik — walaupun beberapa DNS tool menampilkan titik, itu normal dan biasanya bukan masalah).