Setup Github Action Rsync ke VPS

JagoTekno.com - Jika anda menggunakan Hugo, Astro, Svelte atau static generator lain untuk membuat website.

Dimana kodenya disimpan di github lalu anda ingin serve website itu ke VPS sendiri, sehingga untuk membuka website mu nanti orang akan menuju ke IP VPS mu, buka ke IP github atau cloudflare dan semacamnya.

Ini bisa dilakukan dengan bantuan github action.

Pada tutorial ini saya ingin mencontohkan cara setup github action untuk dikirim menggunakan rsync ke VPS sendiri.

Rsync adalah program bawaan linux yang berfungsi untuk melakukan copy / clone dengan sangat cepat karena tidak akan menimpa file lama yang ada, tetapi melakukan sync.

Rsync juga bisa digunakan secara manual jika ingin mengirim data dari dan ke server sendiri.

Tanpa belama-lama, berikut tutorialnya.

Setup workflow file pada source code

File ini hanya akan dikonsumsi oleh github.

1. Pada root folder hugo, buatlah sebuah folder .github/workflows/ lalu di dalamnya buatlah file main.yml.

2. Isi file main.yml untuk menjelaskan step step apa saja yang akan dilakukan oleh github action nanti. File YML ini sangat sensitif dengan indentasi maupun spasi.

Jadi perhatikan baik-baik yah.

name: DEPLOY
on:
  push:
    branches:
    - main

jobs:
  deploy:
    name: "build and deploy to vps"
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - name: setup hugo
      uses: peaceiris/actions-hugo@v2
      with: 
        hugo-version: 'latest'
        extended: true
    - run: hugo --minify
    - name: deploy to server
      uses: petanikode/rsync-deploy@v1.2.1
      env:
        SSH_PRIVATE_KEY: ${{ secrets.DEPLOY_KEY }}
        RSYNC_ARGS: "-ahzur --delete"
        BUILD_DIR: "public" 
        SERVER_USERNAME: ${{ secrets.DEPLOY_SERVER_USERNAME }}
        SERVER_IP: ${{ secrets.DEPLOY_SERVER_IP }}
        SERVER_PORT: ${{ secrets.DEPLOY_SERVER_PORT }}
        DEPLOY_PATH: ${{ secrets.DEPLOY_SERVER_PATH }}

Kode di atas khusus untuk build Hugo. Silahkan cari workflow lain jika ingin setup stack lain.

Jika gagal build, coba ganti hugo version dari latest menjadi versi sebelumnya misal: 0.114.1.1.

1. Setelah itu push ke repo github anda.

Setup VPS supaya siap menerima file dari github melalui Rsync

1. Login ke vps, lalu generate keygen dengan perintah ssh-keygen -t rsa. Akan muncul file baru di .ssh/. Enter enter saja.

2. Copy isi file .ssh/id_rsa.pub ke dalam .ssh/authorized_keys. Bisa dengan perintah cat id_rsa.pub >> authorized_keys.

3. Copy dulu isi file .ssh/id_rsa file ini adalah private key (jangan sampai disebarkan ke orang lain). File ini diawali dengan -----BEGIN OPENSSH PRIVATE KEY----- nanti paste di github.

Setup Github Action pada repository

1. Login ke akun github anda, lalu arahkan ke repository yang akan digunakan.

Kemudian masuk ke Settings > Secrets and Variables > Actions > New Repository Secret > kemudian create beberapa secret key berikut:

• Buat secret baru dengan nama DEPLOY_KEY lalu isi value nya dengan key yang sudah digenerate dari ssh-keygen -t rsa pada point 1 di atas. file ini diawali dengan tulisan -----BEGIN OPENSSH PRIVATE KEY-----
• Buat secret baru dengan mama DEPLOY_SERVER_IP lalu isi dengan ip server anda. contoh: 123.123.123.123.
• Buat secret baru dengan nama DEPLOY_SERVER_PORT lalu isi dengan custom port yang digunakan misal: 3254, defaultnya adalah 22 jika memang port tidak diubah.
• Buat secret baru dengan nama DEPLOY_SERVER_USERNAME lalu isi dengan username yang digunakan untuk login ssh. misal: root.
• Buat secret baru dengan nama DEPLOY_SERVER_PATH lalu isi dengan path dimana file /htdocs di server berada. misal: /var/www/ atau mungkin di /opt/easyengine/sites/namasitus.com/app/htdocs/ atau mungkin di /usr/local/lsws/foldersitus/. Sehingga nanti Rsync akan mengirim folder /public/ ke sana.

Menguji github action + rsync

1. Silahkan buat perubahan pada kodingan local, lalu push ke repo.
2. Secara otomatis repo akan melakukan workflow berdasarkan step step yang sudah diset di atas.
3. Masuk ke tab Action untuk melihat semua proses build yang dilakukan oleh github.
4. Jika terdapat kegagalan selama step workflow maka proses rsync tidak akan mengirim ke VPS.

Semoga bermanfaat. :)