GitHub adalah layanan hos web bersama untuk proyek pengembangan perangkat lunak yang menggunakan sistem kendali versi Git dan layanan hosting internet.

Kemudian GitHub Actions adalah alat untuk mengotomatiskan tindakan rutin dengan repositori dan membantu Anda membuat CI / CD untuk proyek Anda.

Ada banyak sekali tools yang bisa kita gunakan untuk melakukan CI/CD dari yang gratisan sampe yang berbayar, dari yang on premise sampai yang on cloud.

Ini adalah artikel yang akan mengawali pembahasan tentang github actions, tool CI/CD yang berada di github.. atau bisa juga disebut github workflows.

Fitur fitur github actions

Github actions memiliki fitur yang banyak dan keren, dan tentunya sangat berguna dalam proses pengembangan software kita.

Github actions mensupport sistem operasi Linux, macOS, Windows, ARM, and containers. Untuk bahasa pemrograman nya pun juga support banyak, beberapa contohnya adalah Node.js, Python, Java, Ruby, PHP, Go, Rust, .NET, dll..

Github actions juga menawarkan semua fiturnya gratis untuk repositori public, bahkan untuk repositori private kita tetap mendapatkan gratis sampai 2000 menit, ini sangatlah banyak untuk bisa kita gunakan sehari hari.

Fitur fitur lainnya bisa kalian lihat pada halaman berikut: https://github.com/features/actions

Untuk dokumentasi bisa temen temen lihat pada halaman berikut: https://docs.github.com/en/actions

Coba Github Actions: Deliver Simple HTML ke VPS

Mari kita coba projek simple untuk mendeliver static html dari github ke VM tau VPS kita..

Pertama, kita coba untuk membuat repositori untuk menaruh kode html kita yang sangat simpel nanti..

Kemudian clone lah repositori tersebut ke lokal agar bisa kita edit dengan mudah dengan perintah seperti berikut

git clone [email protected]:user/repositori.git

contoh:
git clone [email protected]:man20820/simple-html.git

Jika sudah terclone maka buka lah dengan teks editor kesayangan teman teman, disini saya akan menggunakan vscode.

Disini saya hanya mengisi dengan file index.html sederhana yang isinya adalah hello world.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple HTML</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

Kemudian untuk membuat github actions, kita perlu membuat file yaml di dalam direktori .github/workflows/

Kita buat dengan nama main.yml

name: Deploy

on:
  push:
    branches: 
     - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@v3
      - name: Install SSH Key
        uses: shimataro/ssh-key-action@v2
        with:
          key: ${{ secrets.SSH_KEY }} 
          known_hosts: 'hello-world'
      - name: Adding Known Hosts
        run: ssh-keyscan -H ${{ secrets.SSH_HOST }} >> ~/.ssh/known_hosts
      - name: sync
        run: |
          rsync -avz . ${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }}:/home/ubuntu/www/html/${{ github.event.repository.name }}

Penjelasan nya adalah sebagai berikut:

Baris pertama adalah nama action yang kita bikin, bisa dinamai sesuai kebutuhan misal: build, deploy, atau yang lainnya. Baris ke tiga sampai enam menandakan action ini akan dijalankan ketika ada yang melakukan push ke repositori pada branch main. Baris ke delapan itu jobs nya apa saja, kebetulan di projek simple ini kita hanya menggunakan satu job saja yaitu deploy, kita akan mencoba menggunakan beberapa job jika projek sudah semakin kompleks, pertama kita bisa build dulu, kemudian tes, kemudian baru di deploy.. Pada bagian steps pertama kita lakukan checkout repositori, detail nya bisa temen temen lihat pada halaman berikut https://github.com/actions/checkout, kemudian kita tambahkan fitur ssh key dari shimataro/ssh-key-action@v2, karena nantinya kita akan mentransfer file html kita ke VPS menggunakan rsync dan ssh, kalau temen temen ingin menggunakan scp juga bisa. Kemudian di langkah terakhir kita kirimkan file html kita ke vps.

Ini belum bisa dijalankan ya temen temen, pada actions tersebut terdapat {{ secrets. … }} yang artinya kita menggunakan fitur secret di github. Fitur secret ini sangat berguna untuk melindungi data data sensitif seperti user, password, ssh key, host, dan lain lain. Kita perlu melakukan setup ssh key di VPS terlebih dahulu, kemudian tambahkan kredensial tersebut ke repository secret pada menu settings.

Jika sudah maka kita bisa push kode kita tadi ke repositori, dan github actions akan berjalan secara otomatis dan bisa kita pantau.

Untuk memantau actions bisa kalian lihat pada menu berikut https://github.com/user/repositori/actions

Kemudian untuk detail nya bisa di klik saja, nanti ada urutan step step yang sudah kita buat tadi..

Pengujian

Cek dulu apakah html sudah bisa ditampilkan pada VPS. Disini saya sudah konfigurasi nginx untuk menyajikan static html, untuk tutorial nya bisa temen temen cari di internet karena tidak saya jelaskan di artikel ini.

Untuk pengujian disini kita akan mencoba untuk mengubah kode html hello world kita di awal tadi. Kita akan coba ubah hello world menjadi “Mencoba Auto Deployment pada Github Actions.” dan push kode tersebut ke repositori.

Cek pada github actions, pastikan sudah ada actions baru yang jalan

Kemudian coba refresh kembali halaman html nya, seharusnya sudah berubah menjadi yang terbaru tanpa kita melakukan transfer secara manual menggunakan ftp / scp.. Ini sudah dilakukan oleh github actions.

Selamat mencobaa…