Menghubungkan Subdomain cPanel ke Vercel untuk Project Next.js
Waktu pertama kali belajar deploy Next.js, gw sempat mikir semua project harus ditaruh di shared hosting kaya Laravel
Setelah dicoba, ternyata workflow kaya gitu malah bikin ribet.
Setiap ada update harus :
npm install
npm run build
upload file
cek error
ulang lagi
Belum lagi kalo hosting yang dipakai engga mendukung Node.js dengan baik.
Akhirnya gw ketemu workflow yang menurut gw jauh lebih nyaman :
Source Code -> GitHub
Deployment -> Vercel
Domain -> Domain pribadi
Subdomain -> cPanel DNS
Dengan cara ini workflow nya jadi simpel :
-
Push code ke GitHub
-
Vercel otomatis ngelakuin build
-
Deployment otomatis
-
Website langsung update
-
Tetap bisa menggunakan domain sendiri
Di artikel ini gw bakal jelasin dari nol sampai subdomain berhasil terhubung ke project Next.js yang ada di Vercel.
Studi Kasus
Biar lebih gampang ngikutin tutorial ini, kita pakai contoh project dummy, ini studi kasus yang gw buat, bisa aja beda sama yang lo punya.
Misalnya kita punya domain utama :
example.my.id
Kemudian kita punya project portfolio Next.js yang udah disimpan di GitHub :
username/portfolio
Project itu kemudian kita deploy ke Vercel.
Kalo berhasil, Vercel bakal kasi URL bawaan kaya gini :
portfolio-demo.vercel.app
URL itu sebenarnya udah bisa dicoba untuk buka web nya.
Tapi gw pengen pake domain sendiri supaya alamat websitenya lebih rapi.
Target akhirnya adalah :
portfolio.example.my.id
Jadi ketika orang membuka:
https://portfolio.example.my.id
yang tampil adalah project Next.js yang sebenarnya berjalan di Vercel.
Kurang lebih alurnya kaya ini:
GitHub
│
▼
Vercel
│
▼
portfolio-demo.vercel.app
▲
│
│ DNS
│
portfolio.example.my.id
│
▼
example.my.id
Di sini cPanel engga dipake buat ngejalanin project Next.js.
cPanel cuma dipake buat mengatur DNS domain.
Sedangkan project Next.js nya tetep jalan di Vercel.
Kenapa Engga Deploy Langsung ke Shared Hosting?
Banyak orang mungkin mikir :
Laravel = Shared Hosting
Next.js = Shared Hosting
Padahal sebenarnya engga sesederhana itu.
Laravel biasanya jalan pake :
PHP
Apache / LiteSpeed
MySQL
Sedangkan Next.js pake :
Node.js
dan tergantung project nya juga, bisa juga pake fitur kaya :
SSR
Server Functions
API Routes
Middleware
Masalahnya, engga semua shared hosting punya environment Node.js yang nyaman untuk running kebutuhan itu, riweh setup nya.
Bukan berarti Next.js engga bisa dirunning di shared hosting.
Bisa saja, tergantung provider dan konfigurasi hosting nya.
Tapi buat workflow development yang simpel, Vercel kerasa jauh lebih nyaman karena emang dibuat sangat dekat dengan ekosistem Next.js itu sendiri.
Gambaran Arsitektur
Sebelum mulai, pahami dulu alurnya.
Visitor
│
▼
portfolio.example.my.id
│
▼
DNS
│
▼
Vercel
│
▼
Project Next.js
Jadi :
portfolio.example.my.id
bakal jadi alamat yang digunakan visitor/user lah.
Sedangkan :
Project Next.js
tetep running di infrastructure Vercel.
cPanel dalam kasus ini cuma berperan sebagai tempat kita ngatur DNS.
Sebelum Mulai
Sebelum dicoba tutorial ini, pastiin beberapa hal berikut udah tersedia :
✓ Project Next.js
✓ Repository GitHub
✓ Akun Vercel
✓ Domain pribadi
✓ Akses ke cPanel
✓ DNS domain dikelola melalui cPanel
Contoh yang kita gunakan :
Domain:
example.my.id
Repository:
username/portfolio
URL Vercel:
portfolio-demo.vercel.app
Target:
portfolio.example.my.id
Kalo DNS domain kalian ternyata dikelola oleh Cloudflare atau provider DNS lain, prinsipnya tetap sama.
Bedanya, record CNAME nanti dibuat di DNS provider tersebut, bukan melalui cPanel.
Tahap 1 - Deploy Project ke Vercel
Sebelum menghubungkan domain, pastiin project Next.js udah berhasil di deploy ke Vercel.
Masuk ke :
https://vercel.com
Kemudian pilih :
Add New Project
Pilih repository GitHub yang ingin digunakan.
Contohnya :
username/portfolio
Terus klik :
Deploy
Tunggu sampe proses deployment selesai.
Kalo berhasil, biasanya project bakal dapet URL kaya gini :
portfolio-demo.vercel.app
Coba buka URL nya.
Kalo website udah bisa dibuka, berarti deployment Next.js ke Vercel udah berhasil.
Kalo URL bawaan Vercel masih error, sebaiknya selesain dulu masalah deployment nya sebelum lanjut ke konfigurasi domain.
Tahap 2 - Membuka Menu Domain
Setelah project berhasil di deploy, masuk ke project tersebut di Vercel.
Kemudian buka :
Settings
Lalu cari menu :
Domains
Tampilan Vercel bisa berubah dari waktu ke waktu, jadi posisi menu mungkin sedikit beda.
Intinya kita perlu masuk ke halaman pengaturan domain buat project nya.
Tahap 3 - Menambahkan Subdomain
Di halaman Domains, tambahin domain yang bakal dipake.
Misalnya :
portfolio.example.my.id
Pastiin nama domain engga typo.
Contoh yang bener :
portfolio.example.my.id
Contoh yang salah :
portofolio.example.my.id
atau :
portfolio.example.my.id.example.my.id
Setelah domain ditambah, Vercel bakal coba ngecek konfigurasi DNS.
Tahap 4 - Muncul Invalid Configuration
Biasanya setelah domain ditambah, Vercel bakal nampilin status kaya :
Invalid Configuration
Jangan panik, santai dulu.. chill ok.
Ini belum tentu berarti ada error project.
Artinya Vercel belum ketemu DNS record yang sesuai sama domain nya.
Karena kita belum ngebuat DNS record buat :
portfolio.example.my.id
maka Vercel belum tahu bahwa subdomain itu tuh harus diarahin ke project ini.
Tahap 5 - Ambil Informasi DNS dari Vercel
Di halaman domain tersebut, Vercel bakal kasi informasi DNS yang perlu dibuat.
Contohnya bisa kaya gini :
Type : CNAME
Name : portfolio
Value : xxx.vercel-dns-xxx.com
Contoh di atas cuma ilustrasi aja.
Jangan pake value dari contoh artikel ini, jadi sesuain lagi.
Setiap project/domain bisa dapet konfigurasi yang beda-beda.
Pake value CNAME yang dikasi sama Vercel buat project kalian sendiri.
Misalnya Vercel kasi :
xxx.vercel-dns-xxx.com
maka value itu yang nanti dimasukin ke DNS.
Tahap 6 - Login ke cPanel
Sekarang kita pindah ke sisi DNS.
Login ke cPanel hosting yang dipake buat ngelola domainnya.
Cari menu :
Zone Editor
Biasanya menu itu berada di bagian :
Domains
Atau lo bisa pake fitur search atau lansung aja ctrl + f terus cari.
Terus pilih :
Manage
di domain utama.
Contohnya :
example.my.id
Di sinilah kita bakal ngatur DNS record buat subdomain :
portfolio.example.my.id
Tahap 7 - Cari Record yang Sudah Ada
Ini bagian yang sering bikin bingung jujur.
Kalo subdomain itu sebelumnya pernah dibuat dari cPanel, bisa aja sudah ada DNS record yang dibuat secara otomatis.
Misalnya :
portfolio.example.my.id A
atau :
portfolio.example.my.id AAAA
atau record lain dengan hostname yang sama.
Sekarang coba cari record yang pake hostname :
portfolio.example.my.id
Yang perlu diperhatikan adalah record dengan nama/hostname yang sama persis dengan subdomain yang pengen kita pake ya.
Kenapa Record Lama Bisa Menjadi Masalah?
Karena kita mau pake :
portfolio.example.my.id
sebagai :
CNAME
Sedangkan hostname yang sama mungkin udah ada record lain.
Misalnya :
portfolio.example.my.id A
portfolio.example.my.id CNAME
Konfigurasi kaya gini bisa nyebapin konflik.
Dalam beberapa kondisi DNS, CNAME engga bisa berjalan bersamaan dengan record data lain pada hostname yang sama.
Karena itu kalo sebelumnya subdomain itu udah ada record yang bentrok, record itu perlu dihapus atau diubah dulu.
Tahap 8 - Hapus Record yang Bentrok
Cari record dengan nama :
portfolio.example.my.id
Kalo ada record yang bentrok sama CNAME, hapus record itu.
Misalnya :
portfolio.example.my.id A
atau :
portfolio.example.my.id AAAA
atau record lain yang memang ada di hostname yang sama dan engga lagi dipake.
Setelah itu kita bisa ngebuat CNAME buat subdomain nya.
Jangan asal ngapus semua record yang keliatan berhubungan sama subdomain.
Contohnya :
webmail.portfolio.example.my.id
autodiscover.portfolio.example.my.id
default._domainkey.portfolio.example.my.id
itu adalah hostname yang beda, jangan iseng inti nya.
Terutama buat record yang berhubungan sama email kaya MX, jangan dihapus sembarangan karena bisa ganggu layanan email.
Intinya :
Yang kita bersihkan adalah record yang bentrok pada hostname
portfolio.example.my.id, bukan semua record yang memiliki kataportfolio.
Tahap 9 - Membuat CNAME Baru
Sekarang kita buat record baru.
Klik :
Add Record
Terus isi kurang lebih kaya ini.
Name
portfolio
Beberapa cPanel akan otomatis autofill jadi :
portfolio.example.my.id
Kalo begitu, engga masalah.
TTL
Bisa pake :
14400
atau nilai default dari cPanel.
Type
Pilih :
CNAME
Record / Target
Masukkan value yang dikasi sama Vercel.
Contohnya :
xxx.vercel-dns-xxx.com
Sekali lagi, value tersebut CUMA CONTOH.
Pake value yang bener dikasi Vercel buat project kalian.
Setelah semuanya bener, klik :
Save
Tahap 10 - Verifikasi DNS di cPanel
Setelah berhasil disimpan, kurang lebih record nya bakal keliatan kaya gini :
portfolio.example.my.id
CNAME
xxx.vercel-dns-xxx.com
Kalo udah gini, konfigurasi DNS di cPanel udah selesai.
Sekarang tinggal nunggu Vercel mendeteksi perubahan nya deh.
Tahap 11 - Kembali ke Vercel
Sekarang kembali ke project di Vercel.
Buka:
Project
↓
Domains
Terus cek status domain :
portfolio.example.my.id
Kalo DNS udah terdeteksi dengan benar, status :
Invalid Configuration
Bakal berubah jadi status kaya gini :
Valid Configuration
atau :
Connected
Tampilan dan tulisan status bisa beda tergantung versi Vercel.
Yang penting domain udah valid oleh kata Vercel.
Tahap 12 - Menunggu DNS Propagation
Kadang perubahan DNS engga langsung keliatan.
Ini normal banget.
Perubahan DNS bisa keliatan dalam beberapa menit, tapi dalam kondisi tertentu bisa butuh waktu lebih lama tergantung TTL, resolver DNS, dan provider DNS yang dipake.
Jadi kalo baru saja ngebuat CNAME tapi Vercel masih nunjukin :
Invalid Configuration
jangan langsung nguba konfigurasi berkali kali.
Tunggu beberapa saat lalu cek lagi.
Tahap 13 - Cek DNS dari Terminal
Kalo ingin mastiin DNS nya memang udah kebaca, kita juga bisa ngecek dari terminal.
Misalnya pake :
dig portfolio.example.my.id CNAME
atau :
nslookup portfolio.example.my.id
Kalo udah bener, hasilnya akan nunjukin bahwa :
portfolio.example.my.id
mengarah ke CNAME yang dikasi sama Vercel.
Cara ini cukup berguna kalo Vercel masih belum mendeteksi DNS dan kita mau mastiin masalahnya ada di DNS atau bukan.
Tahap 14 - SSL / HTTPS Otomatis
Setelah domain berhasil terhubung, Vercel akan menangani SSL certificate buat domain nya.
Jadi website nantinya bisa diakses pake :
https://portfolio.example.my.id
Kita engga perlu lagi tuh konfigurasi SSL manual kaya :
Let's Encrypt
CSR
Certificate Upload
Vercel bakal mengurus certificate itu buat custom domain yang udah kehubung.
Kalo HTTPS belim langsung aktif, tunggu sampai proses certificate selesai.
Tahap 15 - Test Website
Sekarang coba buka :
https://portfolio.example.my.id
Kalo semuanya udah bener, harusnya yang muncul adalah website Next.js yang sebelumnya bisa kita akses dari :
portfolio-demo.vercel.app
Bedanya sekarang visitor cukup liat url :
portfolio.example.my.id
Jadi URL bawaan Vercel tetap ada, tapi kita juga punya custom domain sendiri.
Workflow Setelah Selesai
Nah, ini bagian yang menurut gw paling enak.
Setelah semuanya selesai, kita engga perlu lagi :
Login cPanel
Upload file
Build manual
Extract ZIP
Upload ulang
Setiap ada perubahan di project, cukup :
git add .
git commit -m "update"
git push origin main
Kemudian Vercel bakal menangani proses deployment.
Kurang lebih workflow-nya :
Git Push
│
▼
GitHub
│
▼
Vercel
│
├── Install Dependencies
├── Build Project
├── Deploy
└── Publish
│
▼
portfolio.example.my.id
Jadi setelah setup awal selesai, proses deploy sehari harinya jauh lebih simpel harus nya.
Kalo Vercel Masih Menampilkan Invalid Configuration
Kalo setelah beberapa waktu status masih :
Invalid Configuration
coba cek beberapa hal berikut.
1. CNAME sudah benar?
Pastikan hostname yang dibuat adalah :
portfolio.example.my.id
dan bukan :
portofolio.example.my.id
2. Value CNAME sesuai dengan Vercel?
Jangan pake value dari tutorial atau project lain.
Pake value yang dikasi Vercel buat project kalian.
3. Masih ada record yang bentrok?
Cek apa masih ada :
portfolio.example.my.id A
atau :
portfolio.example.my.id AAAA
yang pake hostname yang sama.
4. DNS sudah berubah?
Coba cek pake :
dig portfolio.example.my.id CNAME
atau :
nslookup portfolio.example.my.id
5. DNS memang dikelola oleh cPanel?
Ini juga penting.
Kalo nameserver domain ternyata mengarah ke Cloudflare atau provider DNS lain, perubahan di cPanel bisa aja engga berpengaruh.
Buat kondisi itu, CNAME harus dibuat di DNS provider yang emang mengelola domain.
Kesimpulan
Menurut gw workflow :
GitHub + Vercel + Custom Domain
jauh lebih nyaman buat project Next.js dibanding harus ngelakuin build dan upload secara manual setiap kali ada perubahan.
Shared hosting tetap punya tempatnya sendiri, misalnya buat :
Laravel
WordPress
Blog
Website PHP
Company Profile
Sedangkan buat project kaya :
Next.js
Portfolio
Landing Page
Web App
Vercel bisa jadi pilihan yang jauh lebih praktis.
Dan yang paling penting, kita tetap bisa pake domain sendiri.
Hasil akhirnya visitor cukup ngeliat :
portfolio.example.my.id
sedangkan di belakangnya :
GitHub
↓
Vercel
↓
Next.js
Jadi kita tetap dapet workflow deployment modern tanpa harus ninggalin domain pribadi yang udah kita punya.
