Cara Deploy Aplikasi React ke Heroku Otomatis dengan CI/CD Gitlab

Cara Deploy Aplikasi React ke Heroku Otomatis dengan CI/CD Gitlab

 

React merupakan sebuah framework untuk membuat aplikasi web berbasis Javascript. Framework React sangat populer dikalangan developer web pada saat ini. Nah.. bagi kalian yang ingin aplikasi web React-nya bisa diakses  secara online dan gratis tentunya, bisa menggunakan salah satu cloud service yakni Heroku. Heroku juga support tidak hanya ReactJS saja tetapi aplikasi yang ditulis dengan Ruby, Java, Python , Go, PHP, dll. 

Heroku juga mempunyai versi berbayarnya dan tentunya service yang diberikan pasti lebih lengkap dari yang gratisan. Tapi untuk kali ini kita akan belajar menggunakan yang gratisan dulu hehehe...

Deploy aplikasi ke Heroku ini ada berbagai macam cara, untuk kali ini kita menggunakan fitur CI/CD dari Gitlab. apa itu Gitlab ? Gitlab merupakan sebuah respository yang digunakan untuk menyimpan code kita nantinya yang menggunakan Git sebagai Version Control  kodingan kita.

Lalu apa itu CI/CD ? CI/CD kependekan dari Continuous Integration and Continuous Delivery  yang merupakan proses develop aplikasi dimana developer mengupload code ke sebuah repository dan kemudian code tersebut diuji, dibuild dan dideploy ke production secara otomatis.

Oke, sekarang kita langsung saja ke langkah-langkahnya :

Persiapan

yang perlu disiapkan pertama kali adalah :

• Aplikasi ReactJS
• Akun Heroku
• Akun Gitlab
• Sudah paham git 

Membuat App Baru di Heroku

Pertama kita akan membuat App baru di Heroku dengan cara:

1. login ke akun Heroku (https://id.heroku.com/login).

2. Pada Dashboard pojok kanan atas klik tombol New --> Create New App.

3. Isikan nama aplikasi (app name) sesuai yang kalian inginkan, dan region pilih United States lalu klik tombol create app. jangan lupa untuk menyimpan/mengingat nama app kalian.

Membuat API Key

1. Setelah app sudah dibuat klik Profile pada Dashboard di pojok kanan atas klik Account Settings

 

2. Scroll ke bagian bawah maka akan muncul seperti ini

3. Pada section API Key klik Regenerate API Key untuk membuat API Key baru, lalu klik Reveal untuk melihat valuenya. simpan API Key tersebut untuk CI/CD nantinya.

Membuat Repository Baru di Gitlab

1. Login ke akun Gitlab kalian (https://gitlab.com/)

2. Buat project baru dengan klik New Project --> pilih Blank Project

3. isikan nama project dan jangan centang Initialize repository with a README  lalu klik Create Project

Menambahkan Repository Gitlab ke Aplikasi Lokal

1. Buka project ReactJS dengan editor favorit kalian, kalau saya pakai vscode karena sudah ada terminal didalamnya.

2. Buka terminal di vscode dengan cara klik menu View --> Terminal. maka akan muncul terminal yang mengarah ke folder root project kita.

3. untuk menambahkan repository dengan https, ketikan perintah dibawah sesuai url yang ada di Gitlab repository kalian:

git remote add origin https://gitlab.com/dadanginuy/web-pertamaku.git

4. Buat branch baru bernama production yang diambil dari branch main dengan cara:

git checkout -b production main

Membuat File .gitlab-ci.yml 

Selanjutnya kita akan membuat file .gitlab-ci.yml di root folder kita yang akan kita gunakan untuk melakukan perintah CI/CD secara otomatis ke heroku. 

Jadi setiap ada perubahan koding yang kita push ke branch production maka akan otomatis terbuild ke server heroku kita. 

Isi file dan lokasinya seperti ini: 

Menambahkan Enviroment Variable di Gitlab

Selanjutnya sebelum code kita push ke repository kita buatkan enviroment variable yang akan di baca oleh file .gitlab-ci.yml dengan nama variablenya adalah: 

$HEROKU_APP_NAME ( nama aplikasi kalian di Heroku )

$HEROKU_API_KEY ( api key yang didapat dari Heroku )

1. Buka repository apliaksi yang sudah dibuat tadi.

2. Pada sidebar menu sebelah kiri, klik menu Settings -> CI/CD

3. Scroll ke section Variables klik tombol Expand maka akan tampil seperti ini.

4. Klik tombol Add variable dan isikan Key dengan HEROKU_APP_NAME dan Value sesuai nama aplikasi Heroku kalian. Untuk Flags tidak perlu dicentang, lalu klik tombol Add variable. 

5. Lakukan untuk hal yang sama untuk variabel HEROKU_API_KEY dengan value api key dari heroku, ingat simpan dan rahasiakan api key kalian, setelah selai makan akan seperti dibawah ini.

Push Koding ke Gitlab

Selanjutnya kita push kodingan kita ke repository Gitlab dengan cara:

git add .

git commit -m 'commit pertama webku'

git push origin --all

Jika push berhasil maka akan muncul seperti ini.

Selatah Push berhasil, maka pada menu CI/CD -> Jobs akan muncul sebuah list job yang running untuk diploy ke Heroku.

Nah , setelah proses CI/CD selesai maka akan tampil seperti di bawah ini, yang menunjukan aplikasi web kalian sudah bisa diakses secara online.

Untuk cek aplikasi sudah bisa diakses secara online, kalian bisa cek ke Heroku , buka aplikasi kalian tadi dan klik tombol Open App di pojok kanan atas.

Walllaaaaa....... aplikasi sudah online.

Demikian tutorial Deploy aplikasi ReactJS ke Heroku dengan CI/CD Gitlab. 

Semoga bermanfaat , terimakasih.