Deploy Website dengan CI/CD #1: Pendahuluan

Pada seri tutorial ini, kita akan sama-sama belajar bagaimana cara deploy dengan CI/CD menggunakan tools GitHub Actions dan Vercel. Karena di tutorial ini hanya akan berfokus pada cara deployment dan penerapan simpel dari CI seperti menjalankan pengujian secara otomatis setiap ada perubahan kode, dsb, maka saya sudah menyiapkan website yang bisa didownload disini, website tersebut hanyalah website counter biasa, dengan sedikit modifikasi dan tambahan unit testing serta linting. Pada seri ke-1 ini kita akan membahas mengenai beberapa teori terkait dan juga mengupload website ke remote repositori di GitHub.

Prasyarat

Sebelum mengikuti tutorial ini, ada beberapa prasyarat yang harus kamu penuhi (hal ini bertujuan untuk memudahkan kamu dalam memahami tutorial). Berikut adalah beberapa prasyaratnya:

1. Memahami dasar HTML, CSS, JS dan NodeJS, jika belum, kamu bisa berkunjung ke channel WPU
2. Memahami dasar Vite, jika belum, kamu bisa belajar di channel PZN
3. Memahami dasar Git (seperti commit, push, merge, branch, dll) dan juga dasar GitHub (seperti pull request, dll), jika belum, kamu bisa belajar di channel WPU >> Playlist Git & GitHub
4. Memahami mengenai testing dan linting (minimal pengertian dan kegunaannya), jika belum, kamu bisa mencari materinya dengan mudah di internet dengan kata kunci software testing dan linting.

Jika prasyarat di atas sudah terpenuhi, kamu bisa lanjut mengikuti tutorial.

Apa itu CI/CD, GitHub Actions dan Vercel?

Berikut penjelasan singkatnya:

• CI/CD adalah singkatan dari Continous Integration and Continous Delivery/Deployment. Continuous Integration adalah praktik mengintegrasikan semua perubahan kode ke dalam repositori kode secara cepat dan sering, lalu secara otomatis menguji setiap perubahan kode. Sedangkan yang dimaksud dengan Continuous Delivery atau Continuous Deployment adalah praktik yang dilakukan setelah proses CI, yaitu memastikan kode dikemas dengan semua yang diperlukan untuk diterapkan ke environment manapun dan kapanpun. CD bisa mencangkup segalanya, mulai dari penyediaan infrastruktur hingga penerapan aplikasi hingga environment testing atau production. Salah satu manfaat dari menggunakan CI/CD dalam pengembangan website, adalah untuk mengurangi resiko dan tingkat kesalahan (error), karena pada proses CI akan secara otomatis melakukan pengujian dari setiap perubahan kode. Selain itu juga, dapat mempercepat proses rilis, karena proses CI/CD dilakukan secara otomatis. Bayangkan saja, jika setiap ingin rilis fitur baru atau melakukan perbaikan dari fitur-fitur yang sudah ada, harus melakukan testing secara manual, terus deploy secara manual menggunakan software FTP misalnya, akan sangat menghabiskan waktu dan tentunya melelahkan.

• GitHub Actions adalah platform CI/CD yang memungkinkan kamu untuk mengotomatiskan alur build, test dan deployment, baca disini untuk mengetahui lebih lanjut tentang GitHub Actions.

• Vercel adalah cloud platform yang bersifat serverless dan didesain untuk static frontend dan serverless function. Cloud platform sendiri merujuk kepada operating system dan hardware server di data center, yang dikonfigurasi untuk menyediakan layanan cloud computing (seperti server, storage, dll) kepada pelanggan. Sedangkan yang dimaksud serverless adalah model pengembangan cloud-native yang memungkinkan developer membangun dan menjalankan aplikasi tanpa harus mengelola server. Lalu static frontend yang dimaksud adalah mengenai istilah website statis dan dinamis, kamu bisa membaca lebih lanjut disini. Karena Vercel bersifat serverless, sehingga tidak menjalankan sebuah server (kamu sebagai pelanggan tidak bisa menjalankan server sendiri, seperti npm run start atau nodemon server.js), maka sebagai alternatifnya, Vercel menyediakan fitur Serverless Function yang memungkinkan kamu untuk mengeksekusi logic (seperti membuat API untuk website atau mobile) di sisi server.

Pada seri tutorial ini GitHub Actions akan digunakan untuk menerapkan praktik CI dan Vercel untuk menerapkan praktik CD. Sedangkan konsepnya sendiri adalah, pada repositori website counter-js akan memiliki branch main yang akan menjadi branch utama yang akan dideploy. Setiap ingin melakukan perubahan, maka harus melalui pull request. Ketika pull request dibuka ke branch main, atau ketika pull request yang sudah ditutup dibuka kembali, atau ketika head branch (branch yang berisi perubahan yang ingin kamu integrasikan/terapkan) dari pull request diupdate, maka secara otomatis akan memicu proses CI dijalankan dan ketika perubahan tersebut diterapkan ke branch main (dengan merge pull request, dsb), maka Vercel akan otomatis mendeploy website counter-js.

Upload Website ke Remote Repository di GitHub

Setelah memahami beberapa teori diatas, langkah awal yang harus dilakukan tentunya membuat remote repositori di GitHub dan mengupload website yang telah didownload ke remote repositori tersebut. Sebelumya pastikan kamu sudah mendownload website yang sudah saya sediakan (link ada di awal tutorial), lalu lakukan npm install dan pastikan website berjalan dengan normal.

Catatan: Sebaiknya ganti nama direktori website yang telah didownload menjadi "counter-js".

Berikut langkah-langkahnya:

1. Buka terminal atau cmd pada direktori utama website counter-js yang telah di download, kemudian jalankan git init untuk membuat local repositori baru dan jangan lupa lakukan commit.
2. Buat public remote repositori baru pada akun GitHub-mu, isi Repository name, Decription (optional) dan klik Create repository (biarkan value yang lain default saja):
3. Pastikan setelah kamu klik Create repository, maka akan diarahkan ke halaman seperti di bawah ini, yang menandakan repositori masih kosong:
4. Buka kembali terminal atau cmd pada direktori utama website counte-js dan tambahkan remote repositori yang telah dibuat sebelumnya dengan nama "origin" (kamu bisa menggunakan ssh atau https):

   # ssh
   git remote add origin git@github.com:[username]/[remote-repo-name].git
   # https
   git remote add origin https://github.com/[username]/[remote-repo-name].git
       

   Ganti [username] dengan username GitHub-mu dan [remote-repo-name] dengan nama remote repositori-mu.
5. Ganti nama branch master menjadi main:

   git branch -M master main

6. Lakukan push sekaligus set upstream branch:

   git push -u origin main

7. Pastikan website counter-js berhasil terupload ke GitHub (dengan merefresh halaman yang tampil pada langkah ke-3).

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.

Referensi:

What is CI/CD? by Gitlab
Apa itu CI/CD? Developer Harus Tahu
What is CI/CD? by RedHat
Apa itu CI/CD? Belajar Membuat CI/CD Pipeline di Cloud
Benefit of CI/CD
Understanding GitHub Actions
What is Vercel?
Why does npm run start not work on Vercel?
What is Cloud Platform?
What is Serverless?
What is Serverless Function?