Mendeploy PWA ke VPS

Sebenarnya artikel ini terinspirasi dari artikel mas Pradita Utama yaitu Progressive Web-Application di AWS. Singkat cerita tujuannya hampir sama yaitu deploy aplikasi ke hosting. Namun kali ini saya akan share bagaimana proses build, hingga deploy dengan menggunakan bantuan Gitlab.

Inisialisasi Project

Pertama mari kita buat sebuah aplikasi VueJS dengan menggunakan vue-cli dengan perintah npx vue-cli init pwa contoh-pwa. Jadi dari perintah tersebut, vue-cli akan membuat satu project PWA dengan nama contoh-pwa. Setelah project berhasil dibuat maka install dependency dengan menggunakan package manager favorit Anda.

Output dari vue-cli
npx vue-cli init pwa contoh-pwa
cd contoh-pwa
yarn install
yarn build

Hasil dari build dari vue-cli berada di folder dist. Isi dari folder yaitu index.html, service-worker.js, serta file statis(css/js) lainnya.

Konfigurasi Nginx

Langkah selanjutnya adalah membuat konfigurasi virtual host baru di nginx. Pertama, silahkan login ke VPS anda menggunakan akses root.

vi /etc/nginx/conf.d/contoh-pwa.conf

Lalu isi file tersebut dengan konfigurasi sebagai berikut:

Simpan konfigurasi, lalu test dan jika tidak ada masalah dalam konfigurasi maka reload nginx.

# Test Konfigurasi
nginx -t
# Reload Nginx
nginx -s reload

Konfigurasi Gitlab CI

Lalu kita buat konfigurasi gitlab-ci nya, sebagai berikut:

Dari konfigurasi di atas ada 2 hal yang akan dilakukan gitlab, pertama adalah build, dan hasil dari build tersebut akan di simpan ke dalam artifactsnya gitlab, dan yang terakhir adalah deploy. Jadi untuk deploy gitlab akan menggunakan koneksi ssh ke server kita.

Set Variabel Runner

Jika diperhatikan pada file konfigurasi .gitlab-ci.yml, ada 2 variabel yang harus di set sebelumnya yaitu :

VPS_HOST : alamat IP Server.

SSH_PUBLIC_KEY: public key yang akan digunakan untuk koneksi ke server via ssh.

Untuk melakukan konfigurasi ini, anda bisa lakukan di menu Settings > CI / CD > Variables.

Penutup

Cara diatas bukan hanya untuk Vue saja. Anda bisa menerapkan hal yang sama untuk library lainnya seperti React (Create React App), dan lainnya.

Hasilnya bisa dilihat di https://contoh-pwa.moangi.com/, untuk lihat secara lengkap konfigurasi dapat dilihat di https://gitlab.com/nipeharefa/contoh-pwa.

Terima kasih sudah membaca, mohon kritik dan sarannya. ^_^

Yaahowu!!