Web Autodeploy dari Repo Git Privat
Telematika.org dirancang sebagai web statik menggunakan Hugo. Konten ditulis dalam
format markdown, sehingga sesuai untuk di-git-kan. Begitu konten baru selesai disusun di komputer lokal,
dengan git push perubahan dikirim ke remote server dan men-trigger proses Hugo auto-build.
Singkatnya, kurang lebih seperti itu.
Sudah lama ingin membuat sistem autodeploy seperti ini untuk telematika.org. Metode deploy-nya agak berbeda
dengan web yg menggunakan GitHub Pages (GHP) yang proses rendering biasanya lokal (ie. situs non-jekyll)
kemudian baru di push ke branch gh-pages.
Untuk pembahasan di artikel ini akan menggunakan repo git privat.
Workflow sistem adalah sebagai berikut (diilustrasikan dalam gambar di atas):
- Pembaruan konten atau manajemen lainnya dilakukan pada repo git lokal (eg. local-torg-source)
- Apabila pembaruan sudah selesai, dilakukan
commitdanpushke remote (bare) repo eg. torg-source-gbr - Pada remote server diaktifkan fitur hook (post-receive)
- Proses hook akan menjalankan beberapa shell script: cloning ke repo normal (temporer, eg. torg-source) kemudian menjalankan Hugo dengan destinasi folder web publik (telematika.org).
Beberapa catatan dan script seperti terlampir di bawah.
Remote Bare Repo
Repositori yang dibuat dengan perintah git init merupakan repo normal (working folder atau working tree).
Pada root folder repo normal akan ditemukan subfolder .git (hidden by default) yang menyimpan semua riwayat commit/revisi.
Repo normal menyimpan semua kode sumber yang kita kerjakan.
Repositori yang dibuat dengan git init --bare disebut bare repo (repositori kosong).
Struktur folder bare repo berbeda dengan folder repo normal. Bare repo tidak secara langsung menampilkan
kode sumber, melainkan menyimpan semua riwayat commit/revisi (ie. isi direktori .git pada repo normal) secara langsung pada root folder-nya.
Mengapa menggunakan repositori bare?
Repo bare biasanya berfungsi sebagai remote repository yang digunakan sebagai shared repo untuk kolaborasi, sistem multi akses atau untuk kepentingan deploy. Jadi, bare repo adalah seperti remote repository yang kita gunakan di GitHub atau GitLab, kecuali tanpa fasilitas web interface.
Membuat dan Konfigurasi Bare Repo
Berikut script untuk membuat dan mengkonfigurasi bare repo (eg. torg-source-gbr).
cd
mkdir torg-source-gbr
cd torg-source-gbr && git init --bare
touch hooks/post-receive
chmod +x hooks/post-receive
Tiga perintah pertama merupakan perintah untuk membuat folder dan menginisiasi git bare repo didalamnya.
Dua perintah terakhir adalah perintah untuk membuat script hook post-receive kosong dan membuatnya executable.
Kalau kita inspeksi ke dalam direktori bare repo yang baru dibuat, akan terlihat struktur seperti di bawah.
unyil@newtorg:~/torg-source-gbr$ ll
total 40
drwxrwxr-x 7 unyil unyil 4096 Mar 16 07:06 ./
drwxr-xr-x 20 unyil unyil 4096 Mar 16 16:21 ../
drwxrwxr-x 2 unyil unyil 4096 Mar 1 09:41 branches/
-rw-rw-r-- 1 unyil unyil 66 Mar 1 09:41 config
-rw-rw-r-- 1 unyil unyil 73 Mar 1 09:41 description
-rw-rw-r-- 1 unyil unyil 23 Mar 1 09:41 HEAD
drwxrwxr-x 2 unyil unyil 4096 Mar 1 09:42 hooks/
drwxrwxr-x 2 unyil unyil 4096 Mar 1 09:41 info/
drwxrwxr-x 46 unyil unyil 4096 Mar 16 07:06 objects/
drwxrwxr-x 4 unyil unyil 4096 Mar 1 09:41 refs/
Bandingkan dengan:
unyil@newtorg:~/torg-source$ ll
total 52
drwxrwxr-x 8 unyil unyil 4096 Mar 16 07:07 ./
drwxr-xr-x 20 unyil unyil 4096 Mar 16 16:21 ../
drwxrwxr-x 8 unyil unyil 4096 Mar 16 07:06 .git/
Struktur direktori torg-source di atas adalah struktur awal git init. Sedangkan struktur di bawah
adalah struktur setelah kode sumber Hugo telematika.org ditambahkan.
unyil@newtorg:~/torg-source$ ll
total 52
drwxrwxr-x 8 unyil unyil 4096 Mar 16 07:07 ./
drwxr-xr-x 20 unyil unyil 4096 Mar 16 16:21 ../
-rwxrwxr-x 1 unyil unyil 408 Mar 16 07:06 configTaxo.toml*
-rwxrwxr-x 1 unyil unyil 2517 Mar 16 07:06 config.toml*
drwxrwxr-x 12 unyil unyil 4096 Mar 16 07:06 content/
drwxrwxr-x 8 unyil unyil 4096 Mar 16 07:06 .git/
-rwxrwxr-x 1 unyil unyil 289 Mar 16 07:06 .gitignore*
drwxrwxr-x 2 unyil unyil 4096 Mar 16 07:06 layouts/
-rwxrwxr-x 1 unyil unyil 1079 Mar 16 07:06 LICENSE*
-rwxrwxr-x 1 unyil unyil 1329 Mar 16 07:06 README.md*
drwxrwxr-x 3 unyil unyil 4096 Mar 16 07:07 resources/
drwxrwxr-x 4 unyil unyil 4096 Mar 16 07:06 static/
drwxrwxr-x 3 unyil unyil 4096 Mar 16 07:06 themes/
Script post-receive untuk repo torg-source-gbr adalah seperti berikut.
#!/bin/bash
set -ex
DIR_BASE=$HOME
DIR_TORG_SOURCE=$DIR_BASE/torg-source
DIR_TORG_SOURCE_GBR=$DIR_BASE/torg-source-gbr
DIR_TORG_PUBLISH=$DIR_BASE/server/telematika.org
HUGO_PATH=/snap/bin
cd $DIR_BASE
rm -rf $DIR_TORG_SOURCE
git clone $DIR_TORG_SOURCE_GBR $DIR_TORG_SOURCE
cd $DIR_TORG_SOURCE
$HUGO_PATH/hugo --cleanDestinationDir --minify -d $DIR_TORG_PUBLISH
exit
Secara garis besar ada tiga bagian yang dapat dijelaskan sebagai berikut.
Bagian pertama, setting struktur direktori dan path yang akan digunakan.
Perhatikan torg-source, torg-source-gbr dan server/telematika.org.
DIR_TORG_SOURCE=$DIR_BASE/torg-source
DIR_TORG_SOURCE_GBR=$DIR_BASE/torg-source-gbr
DIR_TORG_PUBLISH=$DIR_BASE/server/telematika.org
HUGO_PATH=/snap/bin
Bagian kedua terdiri dari dua prosedur: menghapus direktori temporer torg-source (yang berupa repo normal / working tree), tetapi kemudian
dibuat lagi melalui cloning torg-source-gbr (repo bare).
cd $DIR_BASE
rm -rf $DIR_TORG_SOURCE
git clone $DIR_TORG_SOURCE_GBR $DIR_TORG_SOURCE
Pada bagian yang terakhir dilakukan proses rendering web statik dengan Hugo dengan destinasi folder web publik.
cd $DIR_TORG_SOURCE
$HUGO_PATH/hugo --cleanDestinationDir --minify -d $DIR_TORG_PUBLISH
Selain menggunakan Hugo, telematika.org juga mempunyai konten yg di-render secara terpisah. Konten jenis
ini juga disimpan dalam repo git dengan konfigurasi identik seperti repo untuk Hugo, kecuali tidak ada proses
rendering lagi karena sudah diproses sebelumnya. Dengan konfigurasi seperti ini, baik repo konten Hugo (torg-source-gbr)
maupun repo konten statik (torg-static-gbr) dapat di-deploy ke server dengan perintah git push.
Lebih jelasnya dapat dilihat pada gambar di atas.
Workflow untuk konten statik hampir sama dengan workflow sebelumnya:
- Manajemen konten dilakukan pada repo git lokal (ie. local-torg-static), proses rendering dilakukan terpisah diluar workflow
- Apabila pembaruan sudah selesai, dilakukan
commitdanpushke remote (bare) repo ie. torg-static-gbr - Mengaktifkan fitur hook (post-receive) pada remote server
- Proses hook akan menjalankan dua prosedur: cloning ke repo normal (temporer, ie. torg-static) kemudian menyalin konten statik ke destinasi folder web publik (telematika.org).
Berikut script untuk membuat dan mengkonfigurasi bare repo torg-static-gbr.
cd
mkdir torg-static-gbr
cd torg-static-gbr && git init --bare
touch hooks/post-receive
chmod +x hooks/post-receive
Identik dengan sebelumnya, tiga perintah pertama merupakan perintah untuk membuat folder dan menginisiasi git bare repo didalamnya.
Perhatikan nama folder yang berbeda (torg-source-gbr vs. torg-static-gbr).
Dua perintah terakhir adalah perintah untuk membuat script hook post-receive kosong dan membuatnya executable.
Script post-receive untuk repo torg-static-gbr adalah seperti berikut.
#!/bin/bash
set -ex
DIR_BASE=$HOME
DIR_TORG_STATIC=$DIR_BASE/torg-static
DIR_TORG_STATIC_GBR=$DIR_BASE/torg-static-gbr
DIR_TORG_PUBLISH=$DIR_BASE/server/telematika.org
cd $DIR_BASE
rm -rf $DIR_TORG_STATIC
git clone $DIR_TORG_STATIC_GBR $DIR_TORG_STATIC
rsync -r --exclude '.git' $DIR_TORG_STATIC/ $DIR_TORG_PUBLISH
exit
Kalau dicermati dari script post-receive yang pertama (torg-source-gbr) konten statik akan hilang
pada proses update via Hugo, sehingga perlu dilakukan modifikasi sebagai berikut. Perhatikan bahwa proses
hook dari torg-source-gbr juga melakukan prosedur yang dieksekusi oleh hook torg-static-gbr di atas.
#!/bin/bash
set -ex
DIR_BASE=/opt
DIR_TORG_SOURCE=$DIR_BASE/torg-source
DIR_TORG_SOURCE_GBR=$DIR_BASE/torg-source-gbr
DIR_TORG_STATIC=$DIR_BASE/torg-static
DIR_TORG_STATIC_GBR=$DIR_BASE/torg-static-gbr
DIR_TORG_PUBLISH=$DIR_BASE/server/telematika.org
HUGO_PATH=/snap/bin
cd $DIR_BASE
rm -rf $DIR_TORG_SOURCE
rm -rf $DIR_TORG_STATIC
git clone $DIR_TORG_SOURCE_GBR $DIR_TORG_SOURCE
git clone $DIR_TORG_STATIC_GBR $DIR_TORG_STATIC
cd $DIR_TORG_SOURCE
$HUGO_PATH/hugo --cleanDestinationDir --minify -d $DIR_TORG_PUBLISH
cd $DIR_BASE
rsync -r --exclude '.git' $DIR_TORG_STATIC/ $DIR_TORG_PUBLISH
exit
Repo Lokal
Setelah remote server siap, saatnya untuk melakukan konfigurasi mesin lokal karena update
akan di-trigger melalui push dari repo lokal. Prosesnya sesederhana melakukan cloning
(untuk repo baru) atau menambahkan remote repository (untuk existing repo).
# clone remote bare to local repo (auto remote) + copy source there
git clone ssh://unyil@192.168.1.1:22/~/torg-source-gbr local-torg-source
# or set git remote for existing source repo
git remote add origin ssh://account@192.168.1.1:22/~/torg-source-gbr
Snippet di atas untuk repo lokal konten Hugo. Untuk konten statik sebagai berikut.
# clone remote bare to local repo (auto remote) + copy static source there
git clone ssh://unyil@192.168.1.1:22/~/torg-static-gbr local-torg-static
# or set git remote for existing static repo
git remote add origin ssh://account@192.168.1.1:22/~/torg-static-gbr
Apabila semua langkah di atas sudah dikerjakan, tinggal melakukan test-drive dengan: melakukan update
konten Hugo atau statik, commit, push dan reload halaman web. Done :)
