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
Table of Contents
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