Deploy Website dengan CI/CD #2: GitHub Actions Workflow

Setelah membahas beberapa teori terkait lalu membuat remote repositori di GitHub dan mengupload website counter-js ke remote repositori tersebut pada seri ke-1. Pada seri ke-2 ini kita akan sama-sama belajar membuat GitHub Actions workflow untuk proses CI, yang nantinya secara otomatis akan menjalankan unit testing dan linting ketika pull request dibuka ke branch main atau ketika pull request yang sudah ditutup dibuka kembali, atau ketika head branch (branch yang berisi perubahan yang ingin kamu integrasikan/terapkan) dari pull request diupdate. Tetapi sebelum itu, tentunya perlu untuk memahami apa itu GitHub Actions workflow.

Info: Pastikan kamu sudah mengikuti bagian ke-1. Jika belum, kamu bisa scroll ke paling bawah halaman ini sampai pada bagian Daftar Seri Tulisan dan klik link pada bagian ke-1.

Apa itu GitHub Actions Workflow?

GitHub Actions workflow adalah automated process (proses otomatis) yang dapat dikonfigurasi yang akan menjalankan satu atau beberapa jobs. Workflow dibuat di direktori .github/workflows di dalam repositori, dengan bahasa YAML (human-friendly data serialization language). Workflow akan dijalankan ketika terpicu oleh suatu event di dalam repositori (seperti pull request, push, dll), atau dapat juga dipicu secara manual, atau juga bisa terpicu sesuai jadwal yang ditentukan. Satu repositori dapat memiliki banyak workflow dan masing-masing dari workflow itu dapat melakukan serangkaian tugas yang berbeda. Sebagai contoh, kamu dapat memiliki satu workflow untuk build dan test pull request, satu workflow lain untuk deploy aplikasi-mu setiap kali release dibuat dan satu workflow lain lagi yang menambahkan sebuah label setiap kali seseorang membuat issue baru.

Mengenai event dan jobs, event adalah aktivitas spesifik di dalam sebuah repositori yang memicu workflow dijalankan, sedangkan jobs adalah serangkaian langkah dalam workflow yang dijalankan pada runner yang sama dan runner itu sendiri adalah sebuah server yang menjalankan workflow ketika dipicu. Setiap runner dapat menjalankan satu job dalam satu waktu. GitHub sendiri menyediakan beberapa runner, yaitu, Ubuntu Linux, Microsoft Windows dan macOS.

Membuat GitHub Actions Workflow

Oke, untuk membuat workflow, buat direktori .github/workflows/ di dalam direktori utama website counter-js, lalu didalamnya buat file ci.yml, seperti dibawah ini: Dan copy semua code dibawah ini ke dalam file ci.yml:

name: Continious Integration

on:
  pull_request:
    branches: [main]

jobs:
  test-and-lint:

    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - name: Clean install dependencies
        run: npm ci

      - name: Run test and lint
        run: |
          npm run lint
          npm test

Catatan: untuk indentasi tiap baris juga harus disesuaikan, karena hal itu bukan hanya untuk gaya saja, tetapi memang memiliki peran penting. Jika kamu ingin mempelajari YAML lebih lanjut, lihat Learn YAML in Y Minutes.

Sekarang, saya akan menjelaskan setiap baris kode diatas, supaya kamu lebih memahami bagaimana YAML syntax digunakan untuk membuat workflow:

• Mendefinisikan nama dari workflow, nama ini nanti akan ditampilkan pada tab Actions di repositori kamu:

  name: Continious Integration

• Mendefinisikan pemicu dari workflow. Pada tutorial ini digunakan pull_request event dan dengan filter branches, yang berarti bahwa workflow akan dijalankan ketika sebuah pull request dibuka atau ketika pull request yang sudah ditutup dibuka kembali, atau ketika head branch (branch yang berisi perubahan yang ingin kamu integrasikan/terapkan) dari pull request diupdate, dengan syarat base branch (branch dimana perubahan akan diterapkan) harus cocok dengan branch yang ada di filter branches, yaitu branch main. Dengan kata lain, ketika misalnya sebuah pull request dibuka dengan target base branch selain branch main, maka workflow tidak akan dijalankan:

  on:
    pull_request:
      branches: [main]

  Mungkin kamu bertanya kenapa ketika pull request dibuka ke branch main yang akan memicu workflow CI dijalankan, hal ini karena (terkait dengan konsep yang saya jelaskan pada seri ke-1), ketika telah dibuka pull request ke branch main maka berarti perubahan tersebut telah siap untuk dideploy, tetapi sebelum dideploy tentunya perlu untuk melakukan beberapa pengujian (seperti unit testing, dsb), sehingga diharapkan bisa mengurangi resiko kesalahan (error) ter-deploy oleh Vercel ke production.
• Mendefinisikan job dengan id test-and-lint:

  jobs:
    test-and-lint:

• Mendefinisikan runner yang akan menjalankan job test-and-lint. Yang mana dalam tutorial ini digunakan runner Ubuntu Linux:

  runs-on: ubuntu-latest

• Mendefinisikan steps (langkah-langkah) yang akan dijalankan pada job. Setiap step diawali dengan tanda hubung (-), sehingga pada kode dibawah ini berarti terdapat 2 step. Step pertama, menggunakan keyword uses untuk menjalankan sebuah action yang bernama actions/checkout dengan versi v4. Sebuah action adalah unit kode yang dapat digunakan kembali, action dapat berupa file JavaScript atau Docker Container. Action actions/checkout adalah sebuah action yang memeriksa repositori kamu ke runner, sehingga memungkinkan kamu untuk menjalankan script atau action lain terhadap kode kamu (seperti unit testing, linting, build, dsb). Kamu harus menggunakan action actions/checkout kapan pun workflow kamu akan mengakses/menggunakan kode repositori, seperti pada tutorial ini, karena butuh untuk menjalankan script npm test dan npm run lint, yang mana harus dijalankan di dalam kode repositori website counter-js, sehingga workflow perlu mengakses/menggunakan kode repositori. Step kedua, menggunakan keyword uses untuk menjalankan action actions/setup-node@v4, action ini berfungsi untuk setup node.js dengan versi tertentu pada workflow kamu dan pada tutorial ini digunakan node.js versi 20 serta juga setup untuk melakukan cache terhadap npm dependencies:

  steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with:
      node-version: 20
      cache: 'npm'

• Mendefinisikan 2 step terakhir yang menggunakan keyword name untuk menetapkan nama dari step dan keyword run untuk menjalankan command:

  - name: Clean install dependencies
    run: npm ci
    
  
  - name: Run test and lint
    run: |
      npm run lint
      npm test

Info: Jika kamu ingin melihat dan belajar lebih detail mengenai syntax workflow, bisa lihat di workflow syntax for GitHub Actions.

Setelah selesai membuat workflow saatnya mencoba workflow yang telah dibuat, untuk itu, kamu bisa melakukan commit lalu push terlebih dahulu untuk mengupload workflow ke remote repositori dan pastikan di remote repositori pada tab Actions » pada sidebar menu sebelah kiri terdapat workflow dengan nama Continious Integration:

Untuk memicu workflow agar dijalankan, buat branch baru dan lakukan perubahan apapun di local repositori, setelah itu lakukan commit lalu push dan buka sebuah pull request ke branch main. Jika tidak ada masalah pada workflow yang dibuat, maka secara otomatis workflow akan dijalankan: Jika proses CI yang dijalankan berhasil (artinya lolos testing dan linting) maka akan berstatus pass:

Untuk sekarang tidak perlu untuk melakukan Merge pull request atau semacamnya, karena ini hanya bertujuan untuk melihat apakah workflow akan dijalankan ketika misalnya sebuah pull request dibuka ke branch main. Untuk itu kamu bisa Close pull request tersebut dengan scroll ke paling bawah halaman dan klik button Close pull request:

Oke, terima kasih buat kamu yang sudah membaca, semoga bermanfaat. Jika ada yang ingin ditanyakan atau ada saran silahkan kirim email ke fikkri.reza@gmail.com. Jangan lupa follow Linkedin saya di in/reza-sariful-fikri untuk mendapatkan tulisan terbaru. Serta jangan lupa baca artikel dan tutorial saya lainnya pada halaman Blog dengan mengklik menu Blog pada navbar atau footer.

Kamu bisa juga berdonasi melalui Saweria untuk mendukung saya.

Referensi:

Creating a Pull Request