Deploy ke GitHub Pages menggunakan Jenkins

Pelengkap kelas Belajar Implementasi CI/CD dari Dicoding

Seperti yang teman-teman ketahui, kelas Belajar Implementasi CI/CD menggunakan Jenkins dan Docker untuk mem-build dan test React App (saat penulisan artikel ini, karena bisa saja suatu saat sudah berubah atau berbeda).

Developer Academy: Belajar Implementasi CI/CD

Artikel ini bertujuan untuk membantu teman-teman yang mungkin penasaran untuk menggunakan Jenkinsfile atau pipeline yang sudah ada sebelumnya dan mau menambahkan untuk deploy ke GitHub Pages.

Persiapan

Ada beberapa hal yang harus teman-teman persiapkan.

1. GitHub Token
2. Repositori GitHub tujuan

Secara singkat kita akan menggunakan GitHub Token ini untuk melakukan push ke repositori yang kita inginkan.

Membuat GitHub Token

Kamu bisa mengecek dokumentasi untuk membuat GitHub Token. Namun, saya hanya menunjukan kasus saat ini. Karena bisa saja sudah berbeda cara penggunaannya. Saat ini masih tersedia GitHub Token yang classic. Jadi saya menggunakan GitHub Token yang classic. Untuk security/keamanan, sebaiknya teman-teman eksplorasi untuk menggunakan cara terbaru.

• Klik pada Icon/Gambar Profil lalu klik Settings
• Klik Developer Settings
• Klik Personal access token dan klik Tokens (classic)
• Klik Generate new token, jika ada pilihan, pilih classic
• Berikan nama token dan set expired-nya.
• Centang bagian repo saja.

Scope GitHub Token

• Klik Generate token
• Jangan lupa catat atau copy token-nya. Pastikan tidak hilang, ini akan kita gunakan dan menyimpannya pada credentials jenkins.

Simpan GitHub Token pada Jenkins Credentials

Sekali lagi, akan lebih baik mengacu pada dokumentasi Jenkins. Namun, ini akan diberikan tahapan yang berlaku saat ini.

• Klik Manage Jenkins
• Klik Manage Credentials
• Klik Jenkins
• Klik Global credentials (unrestricted)
• Klik Add Credentials (ada di kiri)
• Pada field Kind pilih Secret Text
• Scope biarkan Global
• Isi Secret dengan GitHub token sebelumnya
• Isi ID dengan jenkins-github-token
• Klik tombol Create

Credentials

Membuat script singkat untuk Deploy ke GitHub Pages

Script saya kurang lebih seperti ini:

#!/usr/bin/env sh
set -x
# just to ensure the build
ls build
# set the user, I just use Github Actions. hahaha
git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
git config --global user.name "github-actions[bot]"
# set the target repo
git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
# run gh-pages, please ensure the jenkins have the permission
npx gh-pages --message '[skip ci] Updates' --dist build

Perlu perhatikan saya memiliki beberapa asumsi dan ekspektasi:

1. git sudah terinstall dengan baik
2. GITHUB_TOKEN sudah ada di environment melalui Jenkins credentials
3. GITHUB_REPOSITORY sudah ada di environment, bisa hardcode atau credentials jika perlu.
4. Saya akan menggunakan gh-pages untuk membantu commit & push perubahan ke branch gh-pages pada repositori tujuan.

Mengubah Jenkinsfile

Saya menggunakan image “custom” yang sudah dibuat oleh seseorang. Jika Anda ingin membuat sendiri juga boleh, namun pastikan sudah ada node, npm, npx dan git. Saya tidak menggunakan node:16-buster-slim karena tidak memiliki git. Saya menghindari install secara manual untuk mengurangi kompleksitas artikel ini. :) Tetapi kamu bisa mencoba node:16-buster (image sizenya cukup besar, dibandingkan yang saya gunakan yaitu timbru31/node-alpine-git:16).

pipeline {
    agent {
        docker {
            image 'timbru31/node-alpine-git:16' 
            args '-p 3000:3000' 
        }
    }
    environment {
        GITHUB_TOKEN     = credentials('jenkins-github-token')
        GITHUB_REPOSITORY = 'berviantoleo/a428-cicd-labs'
    }
    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: 'Sudah selesai menggunakan React App? (Klik "Proceed" untuk mengakhiri)'
                sh './jenkins/scripts/kill.sh'
                sh 'chmod +x ./jenkins/scripts/github-pages.sh && ./jenkins/scripts/github-pages.sh'
            }
        }
    }
    post {
        always {
            archiveArtifacts artifacts: 'build/**/*', fingerprint: true
        }
    }
}

Catatan:

• Perhatikan, saya menggunakan image: timbru31/node-alpine-git:16, untuk membantu saya memberikan git pada image node.
• Saya menambahkan line: sh ‘chmod +x ./jenkins/scripts/github-pages.sh && ./jenkins/scripts/github-pages.sh untuk menjalankan script yang buat sebelumnya.
• (Opsional) Saya juga menambahkan artifacts hanya untuk memastikan hasil build-nya sudah benar.

Hasil Run

Nah, mari coba run. Jika berhasil log-nya akan seperti ini.

Log berhasil

Nah, waktunya cek repo tujuan. Jika berhasil, maka akan keluar seperti ini. Terdapat branch gh-pages dan file yang sesuai.

Tambahan

Setting GitHub Pages

Akan lebih baik jika mengacu ke dokumentasi GitHub mengenai ini. Namun saya akan berikan langkah-langkah saat ini.

• Buka repo Anda dan klik Settings
• Klik Pages (ada di kiri)
• Source (Deploy from a branch), pada bagian branch pilih gh-pages.
• Jika sudah klik Save (jika sudah disabled, berarti sudah berhasil atau sudah pernah disetting).
• Pastikan Enforce HTTPS tercentang.
• Nah, coba ke alamat https://<username anda>.github.io/<nama repo anda>, contoh: https://berviantoleo.github.io/a428-cicd-labs/.
• Kalau blank, nah, ada tahapan tambahan di bawah ini.

Setting PUBLIC_URL

Sebenarnya tahapan kita sudah selesai, namun ada beberapa catatan sebelum kita bisa akses GitHub Pages-nya dengan baik dan tidak blank.

Nah, perlu diingat, jika kita bukan deploy ke <username>.github.io maka pages kita akan ke <username>.github.io/<nama repo>. Ini akan bermasalah jika kita menggunakan React App dan Router. Loh kenapa? Karena mereka akan selalu mencari di root, yang artinya mengacu kepada repo <username>.github.io. Untuk mengatasinya bagaimana? Kita perlu setting environment variabel tadi dengan PUBLIC_URL.

Contoh perubahan:

environment {
        PUBLIC_URL       = 'https://berviantoleo.github.io/a428-cicd-labs'
        GITHUB_TOKEN     = credentials('jenkins-github-token')
        GITHUB_REPOSITORY = 'berviantoleo/a428-cicd-labs'
}

Jika masih penasaran, simak repositori saya.

GitHub - berviantoleo/a428-cicd-labs at react-app

Jika sudah berhasil, akan seperti ini.

Hasil deploy

Berikut yang sudah terdeploy.

React App

Terima Kasih

Terima kasih sudah membaca. Jika ada tanggapan maupun umpan balik, boleh ditambahkan di artikel ini.

Photo by Jon Tyson on Unsplash