Bedah Workflow: Bot Pemeliharaan Otomatis

Halo Devs! Pernah tidak sih ngerasa males sangat kalau perlu update dependency satu-satu? Atau ribet download ulang file CSS/JS dari pihak ketiga biar website tetap ngebut tanpa request ke server orang lain melulu?

Nah, kode workflow GitHub Actions yang kamu lihat itu adalah jawabannya. Ini adalah semacam "Asisten Rumah Tangga Digital" yang bakal bangun sebulan sekali buat bersih-bersih, ngecat ulang, dan cek keamanan rumah (website) kamu.

Ilustrasi Maintenance Otomatis

Sebelum kita bedah penjelasannya, berikut adalah kode lengkapnya (YAML). Kamu bisa salin dan adaptasi buat project kamu sendiri.

.github/workflows/perawatan-paket.yml
name: ๐Ÿ› ๏ธ Pemeliharaan Dependensi Aplikasi Terpasang
on:
 workflow_dispatch:
 schedule:
 - cron: '0 1 9 * *' # setiap tanggal 9 pukul 01:00 UTC (08:00 WIB)
jobs:
 maintenance-pr:
 runs-on: ubuntu-latest
 permissions:
 contents: write
 pull-requests: write
 steps:
 - name: ๐Ÿงฉ Checkout kode
 uses: actions/checkout@v4
 - name: โš™๏ธ Setup Node.js
 uses: actions/setup-node@v4
 with:
 node-version: 20
 cache: npm
 - name: ๐Ÿ’พ Cache NPM
 uses: actions/cache@v4
 with:
 path: ~/.npm
 key: npm-${{ hashFiles('package-lock.json') }}
 restore-keys: npm-
 - name: ๐Ÿ“ฆ Install & Upgrade Dependencies
 run: |
 npm ci || npm install
 npm install -g npm-check-updates
 ncu -u --target minor
 echo "โœ… Dependencies diupgrade."
 - name: ๐ŸŒˆ Update Assets Highlight.js & Font Awesome
 run: |
 mkdir -p ext mini
 npm install @highlightjs/cdn-assets@latest @fortawesome/fontawesome-free@latest --no-save
 # Highlight.js JS & CSS (CSS selalu dari CDN versi terbaru)
 cp node_modules/@highlightjs/cdn-assets/highlight.min.js ext/highlight.js
 HLJS_LATEST=$(npm view @highlightjs/cdn-assets version)
 curl -s -o ext/default.min.css /ext/default.min.css
 # Font Awesome
 mkdir -p ext/fontawesome-webfonts
 cp -f node_modules/@fortawesome/fontawesome-free/webfonts/* ext/fontawesome-webfonts/
 cp node_modules/@fortawesome/fontawesome-free/css/all.min.css ext/fontawesome.css
 sed -i 's|\.\./webfonts/|./fontawesome-webfonts/|g' ext/fontawesome.css
 DATE_NOW=$(date -u +"%Y-%m-%dT%H:%M:%SZ")
 echo -e "hljs=$HLJS_LATEST\nfontawesome=$(npm view @fortawesome/fontawesome-free version)\nupdated=$DATE_NOW" > mini/asset-info.txt
 - name: ๐Ÿ” Verifikasi Font Awesome
 run: |
 mkdir -p mini
 FONT_DIR="ext/fontawesome-webfonts"
 OUTPUT="mini/fontawesome-verify.txt"
 PREV="mini/fontawesome-verify-prev.txt"
 ALERT="mini/fontawesome-alert.txt"
 [ -f "$OUTPUT" ] && cp "$OUTPUT" "$PREV"
 echo "๐Ÿ“„ Font + ukuran + hash SHA-256:" > "$OUTPUT"
 find "$FONT_DIR" -type f \( -name "*.woff" -o -name "*.woff2" -o -name "*.ttf" \) | sort | while read f; do
 echo "$(basename "$f")|$(stat -c%s "$f")|$(sha256sum "$f" | awk '{print $1}')" >> "$OUTPUT"
 done
 if [ -f "$PREV" ]; then
 diff=$(diff -u "$PREV" "$OUTPUT" || true)
 [ -n "$diff" ] && echo -e "๐Ÿšจ Perubahan font:\n$diff" > "$ALERT" && echo "alert=true" >> $GITHUB_OUTPUT || echo "alert=false" >> $GITHUB_OUTPUT
 else
 echo "alert=false" >> $GITHUB_OUTPUT
 fi
 - name: ๐Ÿงช Audit, Lint & Test
 run: |
 npm audit --omit=dev || true
 npm run lint --if-present || true
 npm run test --if-present || true
 - name: ๐Ÿ” Cek perubahan akhir & PR
 id: check_changes
 run: |
 [[ $(git status --porcelain package.json package-lock.json ext mini) ]] && echo "changes_detected=true" >> $GITHUB_OUTPUT || echo "changes_detected=false" >> $GITHUB_OUTPUT
 - name: ๐Ÿ“จ Buat Pull Request
 if: steps.check_changes.outputs.changes_detected == 'true'
 uses: peter-evans/create-pull-request@v6
 with:
 branch: chore/auto-maintenance-${{ github.run_id }}
 title: 'chore: Auto Maintenance (Deps + Assets + Font Integrity)'
 commit-message: 'chore: upgrade deps, sync Highlight.js & Font Awesome, verify font hash'
 body: |
 ๐Ÿ”ง Pemeliharaan Otomatis Compact
 Perubahan:
 - Upgrade Dependencies
 - Highlight.js JS & CSS (CSS selalu versi terbaru)
 - Font Awesome + verifikasi SHA-256 font
 - Audit & Lint
 ${{ steps.check_changes.outputs.changes_detected == 'true' && '๐Ÿšจ Perubahan terdeteksi pada font/asset!' || 'โœ… Semua asset aman.' }}
 labels: dependencies, chore, automated
 reviewers: frijal
 draft: false
 - name: โ„น๏ธ Tidak ada perubahan
 if: steps.check_changes.outputs.changes_detected == 'false'
 run: echo "๐Ÿ’ค Tidak ada perubahan signifikan."

Yuk, kita bedah baris demi baris, kenapa workflow ini powerful banget buat proyek jangka panjang.

1. Kapan Bot Ini Bangun? (Triggers)

Bayangkan kamu punya alarm yang diset otomatis. Di sini ada dua pemicu utama:

  • Manual (workflow_dispatch): Tombol darurat. Kalau kamu lagi pengen update sekarang juga tanpa nunggu jadwal, kamu bisa klik tombol "Run Workflow" di GitHub.
  • Terjadwal (schedule): Ini sihirnya. Kode cron: '0 1 9 * *' artinya bot ini bakal jalan otomatis setiap tanggal 9, jam 01:00 UTC (atau jam 08:00 pagi WIB). Pas kamu lagi ngopi pagi, dia udah kerja!

2. Menyiapkan Bengkel (Setup Job)

Sebelum mulai kerja, bot butuh komputer (virtual machine). Di sini dia meminjam komputer Linux (ubuntu-latest).

Hal penting di sini adalah bagian Permissions. Kita ngasih izin write ke bot supaya dia boleh ngubah kode kita dan bikin Pull Request. Tanpa izin ini, dia cuma bisa nonton doang, tidak bisa kerja.

3. Update "Oli & Sparepart" (Dependencies)

Install & Caching

Pertama, dia install Node.js versi 20. Biar tidak lemot, dia pakai fitur Cache. Jadi kalau file package-lock.json tidak berubah, dia tidak perlu download ulang ribuan file dari internet. Hemat kuota GitHub!

The Smart Upgrade

Ini langkah cerdasnya. Dia menjalankan perintah:

npm ci || npm install
npm install -g npm-check-updates
ncu -u --target minor

Kenapa pakai --target minor? Karena kita cari aman.
Misal library versi 1.2.0 jadi 1.3.0 (Minor) itu oke. Tapi kalau jadi 2.0.0 (Major), biasanya ada kode yang rusak (breaking changes). Bot ini cuma update yang aman-aman aja.

4. Belanja Aset Baru (Highlight.js & Font Awesome)

Bagian ini favorit saya! Daripada loading website kamu berat karena manggil file dari CDN orang lain (yang bisa aja down), script ini mendownload asetnya ke folder lokal.

Trik Pro: Script ini mendownload CSS Highlight.js langsung dari CDN tapi menyimpannya sebagai file lokal. Jadi versinya selalu sinkron sama file JS-nya. Anti belang!

Untuk Font Awesome, dia melakukan operasi bedah plastik:

  1. Ambil semua font (.woff, .ttf).
  2. Ambil file CSS.
  3. Pakai perintah sed (stream editor) buat ngedit jalur font di dalam CSS supaya tidak nyasar. Keren kan? Semuanya otomatis!

5. Satpam Digital (Verifikasi Hash)

Cek Keaslian Font

Pernah dengar serangan siber di mana file font disusupi virus? Script ini melakukan pengecekan SHA-256 Hash.

Setiap file font dihitung "sidik jarinya". Kalau besok sidik jarinya berubah padahal versinya sama, berarti file itu korup atau ada yang ngutak-ngatik. Bot bakal teriak "๐Ÿšจ Perubahan font!" di laporan akhirnya. Ini level keamanannya udah next level.

6. Quality Control (Lint & Audit)

Sebelum lapor ke bos, bot harus yakin kerjanya bener.

  • npm audit: Ngecek ada celah keamanan tidak di library yang baru diupdate.
  • npm run lint: Ngecek kerapian kode.
  • npm run test: Jalanin tes aplikasi.

Perhatikan ada || true di ujung perintah. Itu artinya: "Kalau ada error dikit, jangan langsung mogok kerja, lanjut dulu sampai bikin laporan."

7. Laporan ke Bos (Pull Request)

Langkah terakhir! Script bakal ngecek pakai git status.

  • Kalau sepi (Clean): Dia bakal bilang "๐Ÿ’ค Tidak ada perubahan signifikan" terus tidur lagi.
  • Kalau ada beda: Dia pakai action peter-evans/create-pull-request buat bikin PR.

PR-nya pun rapi banget. Judulnya jelas, isinya ngasih tau apa aja yang diubah, bahkan mention reviewer (si frijal) buat ngecek. Labelnya juga otomatis dikasih dependencies dan automated.

Kesimpulan

Workflow ini bukan sekadar script update biasa. Ini adalah sistem pemeliharaan mandiri yang Aman (cek hash & audit), Efisien (caching & local assets), dan Cerdas (minor update only).

Implementasi script kayak gini di repo kamu bakal bikin hidup lebih tenang. Tidak ada lagi cerita website error karena lupa update library 2 tahun!