Integrasi Gitlab CI/CD dengan Heroku pada aplikasi ReactJS

Hallo, selamat datang pembaca. Kali ini saya akan sharing mengenai Gitlab CI/CD dan juga pengintegrasiannya dengan Heroku pada aplikasi ReactJS. Sebelum membahas lebih jauh kita akan berkenalan dulu dengan apa itu CI/CD. CI/CD sendiri merupakan singkatan dari kata Continuous Integration, Continuous Delivery dan Continuous Deployment yang mana pengertian masing-masingnya sebagai berikut:

Continuous Integration, yaitu sebuah proses yang mana setiap kali code dipush kedalam repository maka kita juga akan melakukan Test dan Build secara manual ataupun secara otomatis.

Continuous Delivery, merupakan proses yang melakukan CI, automated testing dan automated deployment saat sebuah code dipush menuju repository. Namun, pada Continuous Delivery masih memerlukan proses manual saat hendak sampai ke production.

Continuous Deployment, yaitu praktik pengintegrasian sistem dimana disetiap stepnya sudah tidak ada lagi intervensi manusia sehingga program dapat sampai ke production benar-benar secara otomatis.

Pada prakteknya pembuat CI/CD dapat menggunakan berbagai macam tools seperti Gitlab, Jenkins, Travis CI dan lain sebagainya. Sedangkan Heroku adalah salah satu cloud platform yang dapat digunakan untuk menjalankan sebuah aplikasi dari bahasa pemrograman tertentu seperti Javascript, Ruby, PHP, Python, GO hingga Java. Sederhananya Heroku itu seperti sebuah hosting web.

Integrasi Gitlab CI/CD dengan Heroku

Untuk lebih jelasnya kita akan mencoba membuat sebuah sistem CI/CD yang menggunakan Gitlab dan Heroku sebagai hostingnya. Penggunaan Gitlab dipilih karena Gitlab CI/CD mudah untuk diintegrasikan.

Konfigurasi ReactJS Aplikasi

• Buat sebuah aplikasi ReactJS, dapat menggunakan perintah npm init react-app appname

npm init react-app appname

• Masuk kedalam directory aplikasi yang dibuat cd appname
• Tambahkan dependency serve pada project. Dapat menggunakan perintah npm install serve

npm install serve

• Larang git untuk push file yarn.lock dan package-lock.json dengan menambahkanya di file .gitignore seperti contoh berikut

Modifikasi file package.json pada bagian scripts dengan menambahkan command dev, heroku-postbuild dan ubah pada command start seperti dibawah ini

Konfigurasi Heroku dan Gitlab CI/CD

• Buat sebuah project baru pada heroku

Project baru Heroku

• Copy API Key akun anda yang berada pada Account Settings -> API Key

Heroku API Key

• Berpindah pada Gitlab, dan buat sebuah project baru
• Kemudian masuk kedalam menu Settings -> CI/CD. Pada menu Variables tambahkan dua buah variabel baru dengan nama HEROKU_API yang berisikan API Key anda dan REPO_NAME yang berisikan nama aplikasi di Heroku anda

Gitlab CI/CD Variables

• Kembali ke project ReactJS, kemudian buat sebuah file dengan nama .gitlab-ci.yml yang berisikan pengaturan CI / CD anda. Seperti berikut ini

• Coba push project anda ke Repository Gitlab
• Perhatikan pada CI / CD -> Pipelines maka akan terlihat sebuah pipeline yang sedang berjalan kemudian tunggu beberapa saat hingga proses deploy selesai seperti berikut

Gitlab Pipelines Page

Heroku Site

• Coba ubah sedikit bagian code program dan push kembali ke Gitlab. Maka secara otomatis halaman di Heroku juga kan berubah dengan sendirinya setelah pipeline selesai

Kesimpulan

Pada proses pembuatan sebuah sistem aplikasi dikenal istilah CI/CD dimana dengan menggunakan CI/CD proses deploying aplikasi ke server dapat dilakuakan lebih mudah dan cepat. Dengan menggunakan CI/CD kita juga dapat mengintegrasikan Automated Testing hingga Automated Deployment yang memudahkan tahapan pembuatan aplikasi hingga mencapai production dan dapat digunakan oleh client. Cukup sekian artikel ini dibuat, salah kurangnya mohon maaf. Jangan lupa tinggalkan ‘clap’ apabila artikel ini menarik. Terimakasih, babay…

Source:

Test and deploy a Python application with GitLab CI/CD | GitLab

Deploying Production Build of React App to Heroku

Create a New React App - React