Deploy Vue.js Project dari GitHub ke Cloudflare Gratis: Panduan Sederhana
Tags: vue, cloudflare, github, javascript
Published: 2023-10-02 10:38:41

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](https://github.com/). 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](https://dash.cloudflare.com/sign-up), 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".


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ozp7kxyhmhtkf9kgrah.png)

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8g1bd0v3j5a523s0k0hs.png)

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](https://www.domainesia.com/). . Karna murah heheheheh...


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kne3u3flrfxizfyispgs.png)

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 :-)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y99onus6li8qv5e955o3.png)

Selanjutnya hal yang paling penting. cloudflare akan meminta kamu untuk mendaftarkan nameserver mereka ke pengaturan name server di tempat kamu membeli domain


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqklfrpomqyo7ymcdnp4.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jpo7o0eitkd9ohoe5n0b.png)

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 !!