Deploy Website dengan CI/CD #3: Deploy dengan Vercel
Setelah membuat GitHub Actions workflow pada seri ke-2, pada seri ke-3 ini kita akan sama-sama belajar deployment dengan menggunakan Vercel untuk proses CD.
Info: Pastikan kamu sudah mengikuti bagian ke-2. Jika belum, kamu bisa scroll ke paling bawah halaman ini sampai pada bagian Daftar Seri Tulisan dan klik link pada bagian ke-2.
Info: Disini saya menggunakan akun GitHub lain (amruk53sh) untuk menunjukkan bagaimana cara deploy dengan Vercel untuk pertama kalinya.
Untuk deploy dengan vercel ikuti langkah-langkah berikut:
- Buat akun Vercel dengan buka halaman Sign Up Vercel, lalu pada bagian Plan type, karena ini tujuannya untuk belajar maka pilih Hobby, lalu pada kolom input Your name, isi dengan nama kamu dan klik button Continue:
- Kamu akan diarahkan ke suatu halaman untuk menghubungkan akun Vercel kamu dengan Git provider, karena dalam tutorial ini menggunakan GitHub, maka klik button Continue With GitHub:
- Akan terbuka pop up window Authorize Vercel, yang intinya Vercel ingin meminta persetujuan dari kamu untuk mengakses beberapa hal di akun GitHub kamu. Klik button Authorize Vercel untuk menyetujui:
- Kamu akan diminta mengisi nomor telepon. Pilih negara Indonesia, lalu isi dengan nomor aktif kamu (ini hanya untuk verifikasi) dan klik button Continue:
- Kamu perlu memasukkan 4 kode yang telah dikirim ke nomor telepon kamu dan selamat akun Vercel kamu sudah berhasil dibuat:
- Tunggu sebentar sampai kamu diarahkan ke halaman untuk membuat projek baru (seperti dibawah ini), jika agak lama, tidak apa-apa, tetap tunggu. Karena sebelumnya sudah memiliki projek yang ingin dideploy, maka kamu hanya perlu untuk melakukan Import Git Repository saja. Untuk melakukan import, kamu perlu install Vercel GitHub App di akun GitHub-mu, caranya dengan klik button Install pada bagian Import Git Repository:
Di GitHub ada tools yang bernama GitHub Apps, GitHub Apps adalah tools yang memperluas fungsionalitas GitHub. GitHub Apps dapat melakukan sesuatu di GitHub seperti membuka issues, komen di dalam pull request dan mengelola projects. GitHub Apps juga bisa melakukan sesuatu di luar GitHub berdasarkan event yang terjadi di GitHub. Vercel yang kamu install di akun GitHub-mu adalah salah satu dari GitHub Apps. Lebih detail mengenai GitHub Apps bisa baca disini. - Kamu akan dimintai semacam persetujuan oleh Vercel untuk beberapa izin terkait menginstall Vercel GitHub App di akun GitHub-mu, kamu bisa membaca apa saja izin tersebut, selanjutnya jangan lupa untuk memilih Only select repositories, untuk install Vercel hanya di repositori yang dipilih saja, kemudian pilih repositori website counter-js dan klik button Install (scroll ke bawah jika kamu belum melihat button tersebut):
- Klik button Import pada repositori website counter-js di bagian Import Git Repository:
- Sebelum deploy, kamu akan diminta untuk melakukan konfigurasi projek, seperti Project Name, Framework Preset, Root Directory, Build and Output Settings dan Environment Variables. Tetapi untuk di tutorial ini, kamu tidak perlu merubah apapun karena Vercel sudah membuat konfigurasi default, kamu bisa langsung klik button Deploy untuk deploy website counter-js dan tunggu sampai proses deploy selesai:
- Selamat kamu telah berhasil deploy website counter-js dengan Vercel. Selanjutnya kamu bisa klik button Continue to Dashboard untuk melihat detail dari website counter-js yang telah dideploy:
- Kamu akan dialihkan ke halaman dashboard dari website counter-js yang telah berhasil dideploy. Untuk mengunjungi website yang telah dideploy kamu bisa klik button Visit:
Setelah berhasil deploy website counter-js ke Vercel, seperti penjelasan saya sebelumnya, bahwa ketika ada perubahan yang diterapkan ke branch main, maka Vercel secara otomatis akan melakukan proses deployment. Untuk memastikan apakah betul berjalan seperti itu, buat branch baru, lalu lakukan perubahan apapun di repositori local (agar mudah melihat perbedaan antara deployment sebelumnya dan yang baru, buat perubahan pada tampilan website di file main.js) dan lakukan commit kemudian push.
Info: Disini saya kembali menggunakan akun GitHub utama saya (rezafikkri).
Selanjutnya buka sebuah pull request ke branch main, tunggu semua pengecekan lolos dan lakukan Merge pull request dengan klik button Merge pull request:
Karena melakukan merge, maka kamu akan diminta untuk mengisi commit message dan commit description, kamu bisa merubahnya atau biarkan default dan klik button Confirm merge:
Jika pada button tidak terdapat kata Merge pull request, maka klik dropdown menu pada button dan pilih Create a merge commit:
Setelah Merge pull request berhasil, untuk melihat apakah deployment otomatis dijalankan, opsi pertama, kamu bisa melihat langsung pada website counter-js yang telah dideploy, apakah terdapat perubahan (jika kamu melakukan perubahan pada tampilan website).
Opsi kedua, kamu bisa membuka tab Deployments pada halaman dashboard website counter-js, disana kamu bisa melihat deployment terbaru adalah deployment dari Merge pull request yang sebelumnya kamu lakukan, ini menandakan bahwa betul Vercel secara otomatis melakukan deployment ketika ada perubahan yang diterapkan pada branch main:
Oke, terima kasih buat kamu yang sudah membaca, semoga bermanfaat. Jika ada yang ingin ditanyakan atau ada saran silahkan kirim email ke fikkri.reza@gmail.com. Jangan lupa follow Linkedin saya di in/reza-sariful-fikri untuk mendapatkan tulisan terbaru. Serta jangan lupa baca artikel dan tutorial saya lainnya pada halaman Blog dengan mengklik menu Blog pada navbar atau footer.
Kamu bisa juga berdonasi melalui Saweria untuk mendukung saya.