Pertama yang harus disiapkan adalah memasang node js, saya sarankan menggunakan NVM agar mudah mengatur versi node js yang akan dipasang. Terus yang kedua saya menggunakan NGINX sebagai web servernya.
Memasang NUXT
Agar mudah memasang NUXT saya menggunakan vue-cli, kalau belum terpasang silahkan pasang terlebih dahulu dengan tautan berikut. Memasang Vue CLI. Jika sudah gunakan perintah berikut untuk memasang NUXT.
vue init nuxt/starter nama-folder
Tunggu sampai selesai.
Menjalankan NUXT
Untuk menjalankan NUXT ada 3 cara, pertama mode dev dengan perintah
nuxt
Kalau gagal gunakan
npm run dev
Mode ini cocok digunakan saat pengembangan, ada fungsi hot reload saat menjalankan mode ini.
Yang kedua ada generate fungsi ini akan menghasilkan html statis dari NUXT. Jalankan dengan perintah
nuxt generate
kalau gagal gunakan
npm run generate
Yang ketiga adalah Server Rendered Deployment metode ini yang akan saya gunakan. Yang perlu diperhatikan di sini adalah, pastikan lakukan proses build terlebih dahulu. Untuk menjalankannya gunakan perintah berikut
nuxt build
nuxt start
atau gunakan
npm run build
npm run start
Alasan kenapa tidak menggunakan generate saya tulis di lain kesempatan
Sekarang jika NUXT sudah terpasang mari kita jalankan
npm run build
npm run start
Biasanya NUXT akan berjalan di locahost:3000, karena ini berjalan di localhost maka untuk tahu ini berjalan benar atau tidak gunakan perintah curl untuk mengeceknya.
curl localhost:3000
Jika berhasil di terminal akan menampilkan struktur HTML.
Background Proses
Jika sudah benar terpasang sekarang bagaimana caranya agar fungsi start ini berjalan secara background oleh itu dibutuhkan paket node namanya pm2. Untuk memasangnya gunakan perintah
sudo npm install -g pm2
-g ini berarti berfungsi global di seluruh sistem.
Mendaftarkan NUXT ke PM2
Di dalam root folder nuxt yang sudah dipasang eksekusi perintah berikut
pm2 start npm --name "nuxt" -- start
“nuxt” di sana sebagai nama servis yang didaftarkan. Untuk melihat servis sedang berjalan atau tidak, bisa gunakan perintah curl di atas. Atau melalui perintah pm2 seperti berikut :
Menjalankan servis
pm2 start nama-servis
contoh : pm2 start nuxt
akan menghasilkan
┌──────────┬────┬──────┬───────┬────────┬─────────┬────────┬─────┬──────────┬────────┬──────────┐
│ App name │ id │ mode │ pid │ status │ restart │ uptime │ cpu │ mem │ user │ watching │
├──────────┼────┼──────┼───────┼────────┼─────────┼────────┼─────┼──────────┼────────┼──────────┤
│ nuxt │ 0 │ fork │ 22625 │ online │ 5 │ 0s │ 0% │ 9.9 MB │ ariesm │ disabled │
└──────────┴────┴──────┴───────┴────────┴─────────┴────────┴─────┴──────────┴────────┴──────────┘
Menghentikan
pm2 stop nama-servis
Restart Servis
pm2 restart nama-servis
Monitoring
pm2 monit nama-servis
Silahkan periksa situs ofisial pm2 untuk perintah lainnya.
Mendaftarkan PM2 sebagai Startup
Gunakan perintah berikut agar pm2 bisa didaftarkan sebagai startup
pm2 startup systemd
Perintah di atas akan mengeluarkan hasil seperti berikut
sudo env PATH=$PATH:/home/username/.nvm/versions/node/v8.9.4/bin /usr/local/lib/node_modules/pm2/bin/pm2 startup systemd -u username --hp /home/username
Jangan copas bagian skrip di atas, silahkan salin sesuai hasil yang muncul di terminal sendiri.
Jika berhasil kita bisa mengecek status pm2 dengan cara
systemctl status pm2-username
Oke memasang nuxt sudah, sekarang bagaimana mengakses aplikasi nuxt yang berjalan di localhost:3000 ? Di sinilah NGINX berperan dengan proxy server, jika belum memasang NGINX anda bisa lihat di tautan berikut : Memasang NGINX + PHP + Webmin.
Pindah ke dalam folder konfigurasi NGINX
cd /etc/nginx/sites-available/
Salin terlebih dahulu konfigurasi default yang ada, ini tidak wajib sih tapi saran saya selalu backup konfigurasi asli jaga-jaga kalau ada masalah gampang balikin ke awalnya lagi.
cp default default.bak
Buka berkas default dengan editor favorit entah itu nano atau vim.
sudo vim default
Pada bagian location / ubah jadi seperti berikut
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
Untuk mengecek konfigurasi NGINX gunakan perintah berikut, kali-kali aja ada typo atau kurang spasi gitu.
sudo nginx -t
Kalau sudah aman restart NGINX.
sudo systemctl restart nginx
Lalu silahkan akses alamat server anda di browser, seharusnya sudah bisa diakses seperti di sini : vps.arsmp.com
Referensi :
NUXT JS OFISIAL
Setup Nodejs Application on Ubuntu