Deploy app Nuxt menggunakan Git ke server Ubuntu 16.04

Deploy app Nuxt menggunakan Git – Semua aplikasi berbasis web yang telah selesai dikembangkan di komputer lokal tentu pada akhirnya mesti dipasang di server agar bisa diakses secara publik. Ada beberapa cara untuk memasang/deploy aplikasi dengan fasilitasnya. Yang sering digunakan adalah FTP (File Transfer Protocol) dan SFTP dan Git.

Berdasarkan pengalaman pribadi, saat ini belum banyak tutorial mengenai cara memasang aplikasi berbasi Nuxt ke server (VPS). Ada beberapa tutorial tentang Vue JS (ibunya Nuxt), namun karena Nuxt “sedikit berbeda” dalam proses pemasangan dan running-nya saya akan membagikan sedikit pengalaman pribadi saya. Intinya sama menggunakan Nginx sebagai reverse proxy.

Dalam artikel ini, penulis menggunakan Ubuntu 16.04, sehingga versi aplikasi yang digunakan mengikuti versi yang tersedia pada repository sistem operasi tersebut

Framelian

Install Nginx

Setelah masuk ke sever, lakukan Update repository:

sudo apt update

Lanjutkan dengan proses install nginx web server

sudo apt install nginx -y

Konfigurasi Nginx

Apabila proses pemasangan Nginx berjalan lancar, maka lanjutkan dengan pengaturan konfigurasinya agar proses deploy app dapat berjalan baik.

sudo nano /etc/nginx/sites-avaliable/default

Konfigurasi default nginx kira-kira seperti gambar berikut ini:

Ubah konfigurasi default di atas menjadi seperti gambar berikut:

Simpan perubahan dengan Ctrl+O, lalu keluar dari nano dengan Ctrl+X.

Lakukan pengetesan hasil konfigurasi dengan mengetikkan

sudo nginx -t

Apabila keluar pesan sukses, restart nginx

sudo service nginx reload

Install NodeJs

Untuk memasang NodeJs kita menggunakan NVM atau Node Version Manager. NVM sangat membantu mengurangi “sakit kepala” dalam menjalankan Node JS. Node JS sangat berperan penting dalam menjalankan hasil deploy app Nuxt nantinya

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash

atau

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash

Dilanjutkan pengaturan environment NVM dengan memasukkan perintah berikut ini :

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

Setelah perintah di atas selesai dijalankan, uji coba hasilnya dengan perintah :

command -v nvm

Apabila proses instalasi di atas dijalankan dengan benar, maka mestinya akan keluar hasil

nvm

Mengecek versi NodeJS yang tersedia dari sumber resminya :

nvm ls-remote

Maka akan keluar baris-baris versi Node Js

Untuk melihat dokumentasinya, ketik

nvm

Untuk menginstall NodeJS versi terbaru saat ini (versi 14.13.0) :

nvm install 14.13.0

Untuk mengganti versi NodeJS yang aktif (misalnya mengganti ke versi 14.7.0 – Syaratnya adalah NodeJS versi 14.7.0 sudah terpasang), ketik perintah

nvm use 14.7.0

Install Git

Git adalah tool utama yang akan kita gunakan untuk memasang aplikasi di server

sudo apt update
sudo apt install git

Deploy app

Merujuk pada konfigurasi nginx di atas, aplikasi yang akan live nanti berada di folder /var/www/html.

Membuat folder repo aplikasi dan bare repo

cd /var/www/html
git init

Pekerjaan di atas adalah membuat repo aplikasi. Masih di dalam folder yang sama ketik perintah berikut :

sudo mkdir repo
cd repo
git init --bare

Langkah berikutnya adalah membuat githook post-receive untuk mencegat commit dari komputer lokal lalu melakukan push ke folder repo aplikasi.

sudo nano hooks/post-receive

Masukkan baris perintah berikut ini

#!/bin/bash
git --work-tree=/var/www/html --git-dir=/var/www/html/repo checkout -f

Simpan file tersebut dengan Ctrl+O, lalu keluar dengan Ctrl+X

Ubah permission file hooks/post-reveice berikut agar dapat di-eksekusi:

sudo chmod +x hooks/post-receive

Deploy app Nuxt ke server

Berpindah ke komputer lokal, masuk ke folder root aplikasi. Lalu ketik perintah berikut ini

git init
git remote add origin <<nama_user_SSH>>@<<IP SERVER>:/var/www/html/repo
git add .
git commit -m "Initial commit"

Lakukan pengiriman file lokal dengan perintah:

git push origin master

Mulai saat ini setiap perubahan yang akan dikirim ke server dilakukan dengan mengulangi perintah git add sampai git push

Menginstall aplikasi di server

Pindah kembali ke terminal server, lalu pastikan bahwa lokasi saat ini di folder /var/www/html

cd /var/www/html

Cek isi folder tersebut dengan perintah ls

Apabila sudah tampil seperti gambar di atas, artinya proses deploy app menggunakan git tadi berjalan dengan baik. Apabila belum, ulangi lagi langkah pengaturan dan deploy git-nya.

npm install
npm run build

Install PM2

Agar aplikasi secara otomatis dijalankan setiap kali server harus restart, maka dibutuhkan sebuah process manager yang berfungsi sebagai daemon.

npm install -g pm2

Jalankan process manager aplikasi

pm2 start npm -- start

Untuk melihat list aplikasi yang sedang dijalankan

Aplikasi yang dijalankan oleh PM2 akan restart secara otomatis setiap kali mengalami crash. Langkah berikut adalah mengatur agar PM2 dijalankan pada startup

pm2 startup systemd

Perintah di atas akan menghasilkan output berupa beberapa baris. Salin baris terakhir pada output perintah tersebut lalu tempel di command line

sudo env PATH=$PATH:/home/<<username>>/.nvm/versions/node/v14.9.0/bin /home/<<username>>/.nvm/versions/node/v14.9.0/lib/node_modules/pm2/bin/pm2 startup systemd -u <<username>> --hp /home/<<username>>

Perintah di atas akan membuat sebuah komponen pada systemd yang akan menjalankan pm2 setiap kali boot. Dan PM2 ini akan secara otomatis menjalankan secara aplikasi nuxt yang sudah kita pasang tadi.

Beberapa perintah PM2 yang berguna

Menghentikan aplikasi

pm2 stop namaaplikasi_atau_idplikasi

Fungsinya menghentikan aplikasi yang sedang berjalan. Misalnya menghentikan aplikasi dengan id 0.

pm2 stop 0

Restart Aplikasi

pm2 restart namaaplikasi_atau_idplikasi

List

pm2 list

Selamat mencoba