Continuous Integration Sederhana Jekyll dan Github Webhook

Posted on January 19, 2019

Saya tidak tahu apakah ini bisa disebut sebagai Continuous Integration. Hahaha. Flownya seperti gambar diatas. Untuk casenya seperti ini:

• Saya punya VPS dan serving website yang dibuild pakai jekyll di dalamnya.
• Repo dari situs itu saya simpan di github.
• Selama ini, dari dalam vps saya pull dan build secara manual.
• Saya ingin pull otomatis, jekyll build otomatis, dan deploy hasil build secara otomatis, ketika saya melakukan push ke repo yang ada di github.

Solusinya adalah:

• Github webhook
• Sesuatu di VPS yang akan menerima webhook (saya akan pakai flask dan bash script).

Saya buat program flask untuk merespon webhook dari github

from flask import Flask, request
import subprocess
import os
import json

app = Flask(__name__)

@app.route('/', methods=['POST'])
def blogrefresh():
    data = json.loads(request.data)
    print "New commit by: {}".format(data['commits'][0]['author']['name'])

    script_path = "/home/sumarsono/jekyll_rebuild.sh"
    subprocess.call([os.path.expanduser(script_path)])
    return "OK"

if __name__ == "__main__":
    app.run(host="127.0.0.1", port=5000)

Disitu saya memakai library flask, saya install pakai pip. Kemudian ada bash script yang dieksekusi yaitu jekyll_rebuild.sh, harus dibuat.

Bash script untuk build dan deploy jekyll

nano /home/sumarsono/jekyll_rebuild.sh

Isinya:

#!/bin/bash
source /home/sumarsono/.rvm/scripts/rvm

cd ~/blog/anuan;
git pull origin master;
bundle exec jekyll build;
cp -rf ~/blog/anuan/_site/* /var/www/html/sumarsono/;

Konfigurasi vhost nginx

Saya tidak mau membuka port 5000 ke public, jadi pakai reserve proxy aja buat ngarahin ke localhost:5000

server {
  listen 80;
  server_name api.anuan.com;

  error_log /var/log/nginx/api/error.log warn;
  access_log /var/log/nginx/api/access.log combined;

  location /jekyll {
      proxy_set_header Host $host;
      proxy_set_header X-Forwarded-Host $host;
      proxy_set_header X-Forwarded-Server $host;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $host;
      proxy_pass http://localhost:5000/;
  }
}

Nantinya, setiap akses ke api.anuan.com/jekyll akan di proxy ke localhost:5000. Jangan lupa reload nginx, nginx -s reload dan tambahkan subdomain api di manager dns.

eksekusi

siapkan repo di lokal

mkdir /home/sumarsono/blog
cd /home/sumarsono/blog
git clone git clone [email protected]:unomind/anuan.git

Jalankan program python tadi:

python /home/sumarsono/webhook.py

Konfigurasi webhook di repo github

Kalau kita coba melakukan push ke repo, VPS kita akan menanggapinya kurang lebih seperti ini:

remote: Enumerating objects: 7, done.
remote: Counting objects: 100% (7/7), done.
remote: Compressing objects: 100% (1/1), done.
remote: Total 4 (delta 3), reused 4 (delta 3), pack-reused 0
Unpacking objects: 100% (4/4), done.
From github.com:unomind/nalakawula.github.io
 * branch            master     -> FETCH_HEAD
Updating 0920d54..73fbf41
Fast-forward
 _posts/2019-01-18-pembaruan-otomatis-sertifikat-lets-encrypt-menggunakan-systemd-timer.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
Configuration file: /home/sumarsono/blog/anuan/_config.yml
            Source: /home/sumarsono/blog/anuan
       Destination: /home/sumarsono/blog/anuan/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
       Jekyll Feed: Generating feed for posts
                    done in 3.059 seconds.
 Auto-regeneration: disabled. Use --watch to enable.
127.0.0.1 - - [19/Jan/2019 05:13:53] "POST / HTTP/1.0" 200 -

PR selanjutnya adalah menambahkan secret.