Implementasi CI/CD Pipelines untuk Aplikasi React

y
Implementasi CI/CD Pipelines untuk Aplikasi React

y
yohanesn | #Tech
June 14, 2021 at 2:49 pm

Continuous Integration (CI) adalah suatu proses di mana software developer atau software programmer melakukan integrasi perubahan kode secara teratur ke dalam sebuah source code repository, yang kemudian diikuti dengan beberapa aktivitas seperti code review untuk memeriksa kualitas kode, dan menggabungkan pull request dari programmer lain ke branch master. Istilah ini pertama kali muncul di dalam buku Object Oriented Design with Applications yang ditulis oleh Grady Brooch. Sementara itu, Continuous Deployment (CD) merupakan sebuah proses yang secara otomatis menerapkan versi baru dari software ke environment production.

Nah, dalam artikel ini aku bakal menjelaskan secara singkat mengenai CI/CD workflow pipeline, manfaat implementasi CI/CD pipeline, dan tahapan pembuatan pipeline CI/CD untuk aplikasi React menggunakan Github Actions dan Heroku.

CI/CD Workflow Pipeline

Sumber: Medium

CI/CD pipeline biasanya terdiri atas beberapa langkah berikut:

• Commit – Setelah melakukan perubahan pada kode, software developer akan melakukan commit perubahan tersebut ke repository.

• Build – Source code dari repositori diintegrasikan ke dalam sebuah build.

• Tests – Setelah perubahan diintegrasikan ke dalam sebuah build, perubahan tersebut divalidasi dengan berbagai tingkat pengujian otomatis (automated testing). Proses ini dilakukan untuk memastikan perubahan yang dilakukan gak merusak aplikasi. Kalau ditemukan konflik atau bug, maka proses CI mempermudah untuk memperbaiki bug tersebut dengan cepat.

• Deploy -Versi terbaru dari build yang telah terintegrasi kemudian diterapkan ke environment production.

Manfaat Penggunaan CI/CD

Perubahan Kode yang Lebih Sedikit

Mengimplementasikan CI/CD memungkinkan kita untuk mengintegrasikan lebih sedikit kode dalam satu waktu. Perubahan kode yang lebih sedikit lebih mudah untuk ditangani daripada perubahan kode yang banyak. Meminimalisasi perubahan kode juga mengurangi risiko dan usaha yang diperlukan untuk memperbaiki masalah yang mungkin timbul di kemudian hari dari perubahan kode tersebut. Hal ini juga mempercepat proses pengujian terhadap perubahan kode yang dilakukan, dan mengurangi waktu yang digunakan untuk melakukan code review.

Fault Isolation

Fault isolation merupakan suatu desain sistem yang membatasi efek negatif dari eror atau bug. Implementasi CI/CD membuat fault isolation lebih mudah diterapkan karena sistem lebih mudah untuk di-maintain dan penyebab serta lokasi eror atau bug lebih cepat untuk diidentifikasi.

Mempercepat Release Rate

Mempercepat release rate dimungkinkan karena kode terus-menerus digabungkan (merge) dan diterapkan (deploy) ke environment production, sehingga software selalu dalam keadaan siap rilis.

Backlog yang Lebih Sedikit

Jumlah eror atau bug yang gak kritis di dalam backlog dapat dikurangi dengan menerapkan CI/CD. Hal ini dikarenakan eror atau bug yang kecil dapat terdeteksi dan diperbaiki sebelum dirilis ke environment production.

Kepuasan Pelanggan

Implementasi CD/CD dapat meningkatkan kepuasan pelanggan karena produk yang telah dirilis lebih mudah untuk di-maintain dan lebih gampang untuk diperbarui ketika diperlukan penambahan fitur baru atau bug fixing.

Membuat Pipeline CI/CD untuk Aplikasi React dengan GitHub Actions dan Heroku

1. Membuat Project React dan Workflow

Pertama-tama, kita akan membuat suatu proyek React baru menggunakan perintah create-react-app.

Setelah project React terbentuk, buat sebuah repositori baru di GitHub, kemudian buka project baru tersebut dengan code editor dan tambahkan repositori remote dengan menggunakan perintah git remote add origin.

Langkah selanjutnya yang akan kita lakukan adalah membuat workflow. Workflow harus dibuat di dalam folder .github/workflow/ agar dapat diakses oleh Github. Setelah menambahkan folder workflow, tambahkan juga sebuah .yml file di dalam folder yang baru kita buat tersebut. Penamaan file yang baru tersebut bebas, tapi tipe dari file tersebut haruslah yml. Berikut adalah gambaran dari struktur project React tersebut setelah kita menambahkan folder workflow di dalamnya.

Kemudian buka file .yml yang baru saja kita tambahkan dan salin kode berikut ini:

name: Actions

Pada baris ini kita menentukan nama dari workflow yang kita buat.

on:

Dengan perintah on ini kita menentukan event apa yang akan memicu workflow untuk dijalankan. Pada kode di atas, workflow akan dijalankan hanya ketika ada kode yang di-push ke branch master pada repositori. Perintah ini juga dapat berupa list dari event. Contoh:

on: [push, pull_request]


jobs:

Pada baris ini kita menentukan job apa yang akan kita jalankan. Kita dapat menjalankan job dalam jumlah yang gak terbatas selama gak melebihi batas penggunaan yang ditetapkan oleh Github Actions. Pada kode di atas kita akan menjalankan job build.

runs-on: macos-latest

Pada baris ini kita menentukan jenis sistem operasi yang akan digunakan untuk menjalankan job yang sudah kita tentukan. Apabila kita menggunakan macos-latest seperti pada kode di atas, maka sistem operasi yang digunakan adalah sistem operasi macOS 10.15.

steps:

Steps adalah rangkaian dari tasks yang ada di dalam job yang kita buat. Sama seperti job, kita juga dapat menjalankan step dalam jumlah yang gak terbatas selama gak melebihi batas penggunaan yang ditetapkan oleh Github Actions.

uses: actions/checkout@v1

Dengan perintah ini kita memilih action yang akan dijalankan sebagai bagian dari step di dalam job yang telah kita buat. Action yang kita gunakan dalam kode di atas adalah versi 1 dari checkout, yang digunakan untuk mengkloning repositori ke dalam project directory kita. Contoh lain dari action adalah actions/setup-node@v1, actions/checkout@v2.

Sangat disarankan untuk menetapkan versi dari actions yang akan kita gunakan di dalam workflow kita. Hal ini untuk mencegah terjadinya break atau behaviour yang gak diharapkan pada workflow yang telah kita buat ketika ada pembaruan pada action tersebut.

2. Menjalankan workflow

Push kode yang telah kita buat ke GitHub menggunakan perintah berikut:

git add .
git commit -m "Add workflow"
git push origin -u master

Pada halaman GitHub, klik tab Actions untuk melihat pipeline yang telah kita buat.

3. Membuat App di Heroku

Langkah selanjutnya adalah membuat app baru di Heroku. Pipeline yang telah kita buat akan men-deploy proyek kita ke Heroku. Pastikan untuk terlebih dahulu membuat akun di Heroku dan menginstal Heroku Command Line Interface (CLI) sebelumnya. Heroku CLI dapat di-download melalui tautan berikut: https://devcenter.heroku.com/articles/heroku-cli#download-and-install.

Kemudian jalankan perintah berikut untuk membuat app baru di Heroku:

heroku create actions-github --buildpack mars/create-react-app

Perintah ini akan membuat app baru pada Heroku dengan nama actions-github dan menambahkan buildpack create-react-app. Untuk melakukan deploy ke Heroku, jalankan perintah berikut:

git push heroku master

4. Memperbarui Pipeline

Pada workflow pipeline yang telah kita buat, tambahkan bagian baru yang disebut dengan strategy. Strategy membuat build matrix untuk job yang kita jalankan. Tambahkan Strategy di dalam job yang telah kita buat. Kita akan memerintahkan workflow untuk menjalankan build pada 2 versi Node, yaitu Node 10 dan 12.

Selanjutnya, tambahkan actions untuk menginstal versi spesifik dari Node pada environment workflow kita. Kita akan menambahkan 2 environments untuk Node 10 dan Node 12, kemudian menambahkan step untuk menjalankan yarn install, test, dan build.

5. Menambahkan Environment Variables

Pada dasbor Heroku, klik Account Settings dan salin API Key yang terdapat di Account Settings. Kemudian, pada repositori GitHub, klik tab Settings, kemudian klik Secrets. Tambahkan Heroku API Key dan juga nama app pada Heroku seperti pada contoh di bawah.

Tambahkan kode seperti pada gambar di bawah untuk men-deploy kode kita ke server Heroku. Dapat dilihat bahwa kita mengakses variabel Heroku API Key dan nama app pada Heroku yang telah kita tambahkan dengan menggunakan format ${{ secrets.HEROKU_API_KEY }} dan ${{ secrets.HEROKU_APP_NAME }}.

Commit dan push kode yang telah kita tambahkan tersebut ke branch master, dan pipeline workflow yang telah kita buat akan melakukan build secara otomatis.

Nah, demikianlah tahapan pembuatan pipeline CI/CD sederhana untuk aplikasi React menggunakan GitHub Actions dan Heroku. Kalau ada yang mau tanya dan kepingin diskusi sama aku, boleh tulis di kolom komentar, ya!

Sumber: