Melakukan Deployment React App ke Firebase Menggunakan Jenkins

Pada kelas Belajar Implementasi CI/CD Dicoding Indonesia modul Instruksi Submission Proyek Membangun CI/CD Pipeline dengan Jenkins, kita wajib membangun CI/CD pipeline dengan Jenkins sesuai kriteria yang ditentukan.

Untuk mendapatkan nilai tinggi, salah satu saran yang dapat diterapkan adalah melakukan deployment ke cloud provider.

Pada kesempatan ini, kita akan melakukan deployment React App dengan memanfaatkan salah satu layanan yang disediakan Firebase, yaitu Firebase Hosting.

Setup Proyek Firebase #

1. Login menggunakan kredensial dari akun Google dan akses halaman console Firebase.

2. Pada halaman Welcome to Firebase!, klik tombol Create a project untuk membuat proyek Firebase baru.

   

3. Halaman Create a project akan tampil. Pada tahapan pertama, isi nama proyek pada bagian Project name. Kami akan menentukan nama proyek berupa k7i-react-app.

   Jangan lupa centang opsi “I accept the Firebase terms” dan “I confirm that I will use Firebase exclusively for purposes relating to my trade, business, craft, or profession”.

   Lanjutkan proses dengan klik tombol Continue.

   

4. Pada tahapan kedua, kita akan diberikan opsi mengaktifkan Google Analytics untuk proyek Firebase yang dibuat. Pada pembelajaran ini, kita tidak memerlukan fitur tersebut sehingga dapat dinonaktifkan dengan menekan toggle switch “Enable Google Analytics for this project” menjadi off.

   Lanjutkan proses dengan klik tombol Create project.

   

5. Proses pembuatan proyek Firebase akan berjalan. Tunggu beberapa saat hingga muncul tampilan dengan pemberitahuan “Your new project is ready”.

   Lanjutkan proses dengan klik tombol Continue.

   

6. Halaman Project Overview untuk proyek Firebase k7i-react-app akan tampil. Pada bagian sidebar sebelah kiri, klik dropdown Build lalu pilih Hosting.

   

7. Selanjutnya, kita akan diarahkan pada tampilan utama Hosting. Klik tombol Get started untuk memulai penggunaan layanan Hosting.

   

8. Pada halaman Set up Firebase Hosting, kita akan diinformasikan beberapa tahapan yang perlu dilakukan untuk proses setup Firebase Hosting.

   

9. Pada tahapan pertama, kita akan melakukan instalasi Firebase CLI. Buka Terminal dan jalankan perintah berikut:

   npm install -g firebase-tools
   

   

10. Kembali pada halaman Set up Firebase Hosting, klik tombol Next untuk melanjutkan.

    

11. Pada tahapan kedua, kita akan melakukan inisialisasi proyek. Namun, sebelumnya kita perlu sign in menggunakan akun Google.

    Pada Terminal, kita akan menjalankan perintah yang berbeda, yaitu firebase login:ci agar setelah proses login berhasil, token autentikasi akan diberikan untuk digunakan pada non-interactive environment.

    💡

    Proses autentikasi menggunakan token autentikasi sudah deprecated dan akan segera dihapus. Untuk itu, kita disarankan melakukan proses autentikasi menggunakan service account key.
    

12. Tunggu beberapa saat hingga browser mengakses URL tertentu untuk melakukan proses login. Pilih akun Google yang akan digunakan untuk pengembangan dan klik tombol Allow untuk memberikan izin Firebase CLI mengakses akun Google yang dipilih.

    Selanjutnya, halaman yang menyatakan bahwa Firebase CLI berhasil login akan tampil.

    

13. Kembali pada Terminal, kita dapat melihat token autentikasi dicetak pada layar. Simpan nilai ini pada tempat yang aman. Kita akan menggunakannya nanti.

    

14. Selanjutnya, kita akan menginisialisasi proyek.

    Pindah ke direktori tempat proyek disimpan menggunakan perintah cd. Kami menyimpan proyek pada direktori kodeologi.id/a428-cicd-labs sehingga perintah yang digunakan adalah sebagai berikut:

    cd ~/kodeologi.id/a428-cicd-labs
    

15. Untuk menggunakan perintah pada Firebase CLI, kita akan mendefinisikan terlebih dahulu environment variable FIREBASE_TOKEN. Pada Terminal, jalankan perintah berikut:

    export FIREBASE_TOKEN=<token>
    

    Nilai <token> diganti dengan token autentikasi yang diberikan saat proses login Firebase CLI berhasil.

16. Selanjutnya, jalankan perintah berikut:

    firebase init
    

    

17. Perintah di atas akan menjalankan interactive shell. Sesuaikan nilai input dengan konfigurasi sebagai berikut:

    • Which Firebase features do you want to set up for this directory?
      (Tekan tombol space pada opsi di bawah lalu tekan tombol Enter)
      Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys.
    • Please select an option:
      Use an existing project
    • Select a default Firebase project for this directory:
      (Sesuaikan dengan nilai proyek Firebase)
      k7i-react-app
    • What do you want to use as your public directory?
      build
    • Configure as a single-page app (rewrite all urls to /index.html)?
      N
    • Set up automatic builds and deploys with GitHub?
      N

18. Proses inisialisasi pun berhasil!

    

19. Pada tahapan ketiga, kita akan melakukan deployment ke Firebase Hosting. Proses ini akan kita lakukan dengan memanfaatkan Jenkins. Untuk itu, tahapan ini dapat kita lewati.

    Lanjutkan proses dengan klik tombol Continue to console.

    

20. Pada halaman Manage site, perhatikan bagian Domains. Di sana, terdapat beberapa URL domain yang diberikan Firebase Hosting untuk proyek Firebase k7i-react-app. Simpan nilai ini pada tempat yang aman. Kita akan menggunakannya nanti.

    

21. Sampai tahap ini, proses setup proyek Firebase k7i-react-app sudah selesai dan berhasil.

Menyimpan Token Autentikasi pada Jenkins #

1. Akses Jenkins pada http://localhost:8080. Login menggunakan kredensial yang sudah dibuat sebelumnya.

2. Halaman Dashboard akan tampil. Pada bagian sidebar sebelah kiri, klik tombol Manage Jenkins.

3. Klik pada Configure System untuk mengakses konfigurasi sistem secara global.

4. Scroll ke bawah hingga menemukan bagian Global properties. Centang opsi Environment variables; masukkan nilai Name berupa FIREBASE_TOKEN dan Value berupa token autentikasi.

   Simpan pengubahan yang dilakukan dengan menekan tombol Save.

   

Membuat Script Deployment dan Menyesuaikan File Jenkinsfile #

1. Buka proyek a428-cicd-labs pada Visual Studio Code.

2. Buat sebuah file dengan nama deploy-to-firebase.sh pada direktori jenkins/scripts. Isi file tersebut dengan kode sebagai berikut:

   #!/usr/bin/env sh
   
   set -x
   npm install -g firebase-tools
   firebase deploy
   set +x
   

3. Kita perlu menyesuaikan akses permission agar file tersebut dapat dieksekusi dengan baik. Buka Terminal dan jalankan perintah berikut:

   sudo chmod +x ./jenkins/scripts/deploy-to-firebase.sh
   

4. Selanjutnya, buka file Jenkinsfile pada root directory proyek dan sesuaikan kode menjadi sebagai berikut:

   pipeline {
       agent {
           docker {
               image 'node:16-buster-slim'
               args '-p 3000:3000'
               args '-u 0:0'
           }
       }
       environment {
           PUBLIC_URL = 'https://k7i-react-app.web.app/'
       }
       stages {
           stage('Build') {
               steps {
                   sh 'npm install'
               }
           }
           stage('Test') {
               steps {
                   sh './jenkins/scripts/test.sh'
               }
           }
           stage('Deploy') {
               steps {
                   sh './jenkins/scripts/deliver.sh'
                   input message: 'Finished using the website? (Click "Proceed" to continue)'
                   sh './jenkins/scripts/kill.sh'
                   sh './jenkins/scripts/deploy-to-firebase.sh'
               }
           }
       }
   }
   

   • Pada baris ke-6, kita mendefinisikan user di dalam container memiliki UID 0 dan GID 0 (root).
   • Pada baris ke-9 s.d. 11, kita mendefinisikan environment variable PUBLIC_URL dengan nilai base URL tempat aplikasi React di-hosting. Jangan lupa sesuaikan nilai environment variable ini dengan URL domain yang diberikan Firebase Hosting.
   • Pada baris ke-28, kita mendefinisikan langkah sh (dari bagian steps) menjalankan shell script bernama deploy-to-firebase.sh yang terdapat pada direktori jenkins/scripts.

5. Commit semua pengubahan yang dilakukan dengan menjalankan perintah berikut:

   git add .
   git commit -m "Add Deploy to Firebase"
   

6. Selanjutnya, masuk ke halaman Activity pipeline react-app pada tampilan Blue Ocean. Mulai jalankan pipeline dengan menekan tombol Run.

   

7. Berikut adalah tampilan Detail setelah pipeline berjalan dengan sukses.

   

8. Selamat! Proses deployment sudah berjalan dengan baik. Silakan akses URL domain yang diberikan Firebase Hosting untuk mengakses React App.

   

Yeeayyy! Sekarang kamu bisa melihat React App secara online, tidak hanya di lokal saja. Kamu juga sudah berhasil menerapkan CI/CD pipeline menggunakan Jenkins sehingga tidak perlu menjalankan perintah firebase deploy secara manual lagi!

Gimana? Sekarang jadi mudah, kan? Setelah selesai melakukan development, kamu tidak perlu repot memikirkan proses integration dan deployment lagi. Tinggal sat-set-sat-set jadi, langsung up ke internet! 😁