Hosting Project menggunakan Vercel App

19 August 2022 | Author: Mahathir Aldiafis Mochammad

Pengertian

Vercel adalah platform penyedia layanan hosting untuk website, baik statis maupun dinamis dengan NodeJS. Dengan menggunakan Vercel, kita dapat dengan mudah mempublikasikan proyek website kita dengan mengintegrasi repository yang kita gunakan seperti Gitlab atau Github kita sendiri. Kabar baik nya lagi, Vercel menyediakan fasilitas secara gratis untuk akses pengguna satu orang.

Vercel juga memudahkan kita dalam proses development dan sebagai wadah yang dapat melihat tampilan website sebelum deployment ke production dilakukan, hal ini tentunya menguntungkan agar kita dapat memastikan apakah website kita sudah berjalan secara optimal atau belum.

Pilihan Web Hosting

Ada beberapa pilihan untuk penyedia layanan website hosting secara gratis, yaitu:

• Vercel
• Netlify
• Firebase
• Heroku
• 000webhost by Hostinger

Pertimbangan

Berdasarkan pertimbangan dari sekian pilihan penyedia layanan hosting secara gratis, penulis merekomendasikan Vercel untuk proyek awal Program Digital Amoeba. Pertimbangannya adalah:

• Gratis selamanya untuk user pengelola satu orang. Tentunya kita dapat meminimalisir cost untuk validasi proyek sebelum benar-benar menggunakan fasilitas server yang sifatnya berbayar.
• Sudah mendukung Framework berbasis NodeJS seperti ReactJS, VueJS dan NextJS yang dimana salah satu framework tersebut sudah menjadi standarisasi yang digunakan oleh Program Digital Amoeba (ReactJS).
• Berdasarkan hasil tes performa hosting Vercel, angka rata-rata waktu loading yang dihasilkan adalah 0.73ms yang dimana angka tersebut terbilang cukup cepat.

• Terintegrasi oleh repository Gitlab yang dimana repository tersebut sudah menjadi standar yang digunakan oleh Program Digital Amoeba.
• Memudahkan proses development untuk kita dapat melihat terlebih dahulu tampilan website yang sudah di hosting. Hal ini tentunya dapat membantu kita untuk memastikan website sudah berjalan secara optimal atau belum sebelum deployment ke production dilakukan.
• Terdapat fitur Integrations untuk kita dapat mengkonfigurasi layanan third-party seperti databases, logging atau monitoring dan juga fitur Custom Domain yang memungkinkan kita untuk mengkonfigurasi seperti DNS, Nameservers, Renewing domain, dan lainnya.
• Memiliki histori aktivitas setiap kali kita melakukan deployment. Jika di versi terbaru production terjadi kesalahan/error dan website sudah digunakan oleh sejumlah pengguna, kita dapat mengembalikan (rollback) ke versi sebelumnya.
• Dapat menggunakan domain sendiri.

Pre-requisites

Sebelum memulai, ada beberapa hal yang perlu disiapkan untuk meng-hosting sebuah website, yaitu project website yang berbasis NodeJS (untuk memulai kali ini saya akan menggunakan ReactJS disertai langkah-langkah instalasinya) akun Gitlab untuk akses ke repository dan akun Vercel (karena fitur login Vercel dapat menggunakan Gitlab, saya akan menggunakan akun Gitlab).

Instalasi Project dengan ReactJS

Pertama-tama kita perlu melakukan install ReactJS dengan npm kemudian tentukan dimana anda akan menyimpan folder project anda

npx create-react-app starter-project

Penjelasan:

• npx adalah NodeJS package runner yang berfungsi untuk mengeksekusi package NodeJS.
• create-react-app adalah perintah berbasis CLI untuk membangun environment project framework ReactJS.
• starter-project adalah nama folder project baru yang akan anda buat. Anda dapat mengubah sesuai dengan keinginan anda.

Jika sebelumnya belum pernah menjalankan perintah create-react-app, anda akan diarahkan untuk sebuah pilihan menginstal package create-react-app. silahkan pilih (y) untuk melanjutkan dan jika sebelumnya sudah pernah, lewati langkah ini.

Setelah proses instalasi selesai, buka folder yang sudah ditentukan path nya saat instalasi tadi dan kemudian jika tampilan isi folder seperti berikut ini maka ReactJS sudah terinstal dengan baik.

Menginisiasi Gitlab

Pada langkah ini anda perlu mempersiapkan repository untuk menyimpan project dan mengintegrasi ke Vercel. Saya akan menggunakan Gitlab yang sebelumnya sudah menjadi standar repository Program Digital Amoeba.

Silahkan akses ke halaman https://git.digitalamoeba.id dan login dengan akun Gitlab anda.

Klik tombol New Project dan anda akan memasuki halaman Create New Project

Kemudian pilih Create Blank Project.

Isi project name, project slug dan project description dan visibility level (private/public) sesuaikan dengan kebutuhan anda. Jika sudah, silahkan pilih Create Project.

Jika sudah berhasil, di halaman berikut akan tampil notifikasi Project ‘starter-project’ was successfully created, pada tahap kali ini silahkan pilih tombol Clone dan copy bagian ‘Clone with HTTPS’ seperti gambar berikut.

Langkah selanjutnya adalah menginisiasi project anda dengan repository Gitlab. Kembali lagi ke project yang sebelumnya sudah anda buat dan buka terminal di dalam project tersebut lalu jalankan perintah berikut:

git init

git add .

git remote add origin https://gitlab.com/mahathiramnst/starter-project.git

git push -u origin master

Jika semua sudah berjalan dengan baik, silahkan buka kembali repository gitlab anda dan refresh kemudian pilih branch master. Jika struktur file dan folder sudah tampil seperti berikut, anda sudah berhasil push ke Gitlab.

Deployment Project ReactJS ke Vercel App

Pertama-tama masuk ke halaman https://vercel.com dan Login. Karena sebelumnya kita sudah memiliki akun Gitlab, pada kali ini kita akan menggunakan akun Gitlab yang sudah kita miliki sebelumnya, setelah login berhasil anda akan diarahkan ke Import Git Repository. Silahkan pilih Continue with Gitlab.

Jika Vercel sudah tersinkronisasi dengan repository Gitlab, akan tampil daftar project yang ada di repository Gitlab anda. Sebelumnya nama project yang kita buat adalah starter-project, import project tersebut untuk kita sinkronisasi dengan Vercel.

Kemudian anda akan diarahkan ke halaman Configure Project, silahkan anda ubah Project Name sesuai dengan keinginan anda dan untuk Framework Preset kita akan pilih Create React App karena framework yang kita gunakan adalah ReactJS. Jika framework yang kita gunakan bukan ReactJS, sesuaian dengan framework yang digunakan. Jika sudah, klik tombol Deploy.

Pada tahap ini, Vercel secara sistem akan melakukan proses Building, Running Checks dan Assigning Domains. Ini adalah bagian tahapan dari deployment project anda, silahkan anda tunggu proses deployment hingga selesai.

Jika proses deployment sudah berhasil, akan tampil halaman baru seperti berikut. Silahkan anda klik bagian tampilan halaman project jika anda ingin mengunjungi halaman project anda. Jika anda ingin melihat status project anda di dashboard Vercel, silahkan klik tombol Go to Dashboard.

Dan ini adalah tampilan halaman dashboard untuk setiap project yang sudah terintegrasi oleh Vercel. Di dashboard, terdapat 4 tab yang bisa anda lihat mengenai project anda yaitu Overview, Deployments, Analytics dan Settings.

Anda sudah dapat mengakses halaman project anda dengan domain Vercel. Sampai pada tahap ini, dapat dikatakan project anda di Vercel sudah naik ke production dan berjalan dengan baik.

Kesimpulan

Setelah kita melakukan tahapan deployment menggunakan layanan hosting dari Vercel,  cukup memudahkan developer dalam pengembangkan website dengan framework ReactJS berbasis NodeJS.

Yang memudahkan dalam hal deployment, developer tidak perlu konfigurasi apapun ketika ingin melakukan deployment sehingga dapat dikatakan juga one-click-deploy. Fitur yang disediakan oleh Vercel di dashboard bagian deployments adalah menampilkan histori setiap deployment yang kita lakukan namun tidak hanya itu, kita dapat mengembalikan ke versi sebelumnya jika deployment terakhir terjadi error dan membutuhkan waktu untuk perbaikan.

Vercel juga dapat melakukan auto-build dan auto-deploy ketika ada commit baru pada branch di repository Gitlab sehingga developer tidak perlu melakukan deploy secara manual ketika ada perubahan kode.