Memasang Nuxtjs di Server Debian

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