Jika kamu seorang pengembang Vue.js yang bersemangat, pasti kamu ingin membagikan proyek hebatmu dengan dunia. Untungnya, ada cara yang cukup mudah untuk mendeploy proyek Vue.js kamu dari GitHub ke Cloudflare, memberi kamu akses cepat dan andal ke proyekmu. Dalam panduan ini, kita akan menjelaskan langkah-langkahnya dengan cara yang sederhana dan ramah pengguna.
Langkah 1: Persiapkan Proyek Vue.js di GitHub
Pastikan kamu sudah memiliki proyek Vue.js yang di-host di GitHub. Jika belum, buat repositori di GitHub dan unggah proyek Vue.js kamu ke sana. Pastikan semua file yang diperlukan ada di repositori tersebut.
Langkah 2: Buat Akun Cloudflare
Jika kamu belum memiliki akun Cloudflare, buat satu akun secara gratis. Cloudflare adalah penyedia layanan CDN yang sangat populer dan andal.
Langkah 3: Tambahkan Proyek ke Cloudflare
Setelah masuk ke akun Cloudflare, klik pada bagian "Worker & Pages". Lalu klik pada Tombol "Create Application" kemudian pilih tab "Pages",terkahir klik tombol "Connect to Git".
setelah itu akan muncul pilihan akun github kamu, kamu juga bisa menggunakan gitlab sebagai opsi lainnya.
Selanjutnya pilih repository yang ingin kamu deploy, jika sudah dipastikan benar klik "Begin Setup" untuk melanjutkan.
Proses selanjutnya adalah memasukan informasi tentang website atau apulikasi kamu, seperti:
Project name : (isi dengan nama web kamu)
pada bagian ini nama domain default akan terbentuk.Production branch:(pilih branch yang ingin kamu deploy)
pada section "Build Setting"
- Framework preset: (pilih Vue)
- Build command: npm run build
- Build output diresctory: dist
jika kamu memiliki .env dalam project kamu, kamu bisa daftarkan env variable dalam section "Environtment variables"
jika semua telah terisi dengan benar ,selanjutnya klik "Save and Deploy"
dan Tadaaaaaaa!!!.......... websitemu telah di deploy !!!
Langkah 4: Custom Nama Domain
sebenarnya sampai langkah ke tiga websitemu sudah bisa di akses di internet dengan domain name dari cloudflare, namun jika kamu menggunakan domain sendiri kamu bisa custom sendiri.
kamu bisa kunjungi website penyedia layanan domain. disini saya mencontohkan dari Domainesia. . Karna murah heheheheh...
Jika kamu sudah membeli domainnya, kamu bisa kembali ke halaman cloudflare kamu lalu klik menu "Websites" lalu klik tombol "Add a Site". kamu akan di minta memasukan nama domain yan telah kamu buat sebelumnya. lalu pilih pake yang Gratis :-)
Selanjutnya hal yang paling penting. cloudflare akan meminta kamu untuk mendaftarkan nameserver mereka ke pengaturan name server di tempat kamu membeli domain
copy kedua name server tersebut lalu masuk ke halaman member (disini saya menggunakan domainesia) . klik menu "Domains" lalu centang nama domain kamu selanjutnya klik tombol "Manage Nameservers" , lalu masukan nameserver yang kamu dapat dari cloudflare disana. klik "Change Namesservers" dan selesai
Cloudflare akan otomatis memverifikasi domain kamu.
Langkah 4: Setting Custom Domains di Pages
jika domainmu suda di verifikasi oleh cloudflare kamu bisa ke menu "Worker & Pages" lalu klik project vue yang telah kamu deploy sebelumnya, kemudian kamu bisa ke tab custom domain, disana kamu akan diminta untuk memasukan nama domain kamu. jika sudah klik "continue" dan Tadaaaa..... website kamu sekarang sudah bisa di akses dengan domain kamu sendiri.
cloudflare akan melakukan pendaftaran DNSnya secara otomatis.
Gampang bukan :-D
Jika ada pertanyaan atau kesulitan bisa berikan pertanyaan kamu di form komentar ya~~
happy coding !!
Top comments (0)