Menyiapkan Aplikasi Web Nuxt.js di Ubuntu 18.04 LTS

• Nuxt.js: Kerangka Universal
• Menginstal Node.js
• Aplikasi Perancah
• Mulai Awal
• Bangunan Untuk Produksi
• PM2: Kelola aplikasi Anda dengan mudah

Nuxt.js: Kerangka Universal

Nuxt.js adalah kerangka kerja JavaScript yang dirancang untuk membuat aplikasi Vue.js universal dengan cepat. Ini paling terkenal karena kemampuannya untuk membuat aplikasi Vue.js yang dapat di-render di server maupun klien. Dalam tutorial ini, kita akan mengatur aplikasi Nuxt.js yang di-render-server dan menggunakannya di Ubuntu 18.04 LTS.

Menginstal Node.js

Pertama, Anda harus memastikan bahwa Anda menjalankan Ubuntu 18.04 LTS. Kemudian, Anda harus menginstal Node.js, jika belum diinstal. Dalam tutorial ini, kita akan menggunakan Node Version Manager, atau NVM, untuk membuat proses ini lebih mudah.

Instal NVM menggunakan perintah berikut.

curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh -o install_nvm.sh
bash install_nvm.sh
source ~/.profile
nvm install 11.1.0
nvm use 11.1.0

Aplikasi Perancah

Setelah Anda menginstal Node.js, kita sekarang dapat melanjutkan untuk mengatur paket yang kita perlukan menggunakan NPM. Kami akan menggunakan alat kecil praktis yang disebut create-nuxt-app, alat buatan komunitas yang dapat dengan mudah membuat aplikasi Nuxt.js.

Di direktori rumah Anda, jalankan perintah berikut untuk memulai pembuatan aplikasi.

npx create-nuxt-app <nameofproject>

Konsol akan meminta Anda untuk beberapa opsi penting. Demi tutorial ini, kami akan menamai proyek kami " app". Kami akan menggunakan Express sebagai kerangka kerja server khusus kami, dan kami akan menjalankan aplikasi dalam mode universal, yang memastikan bahwa kami akan merender situs web kami di server. Ketika Anda telah menentukan semua izin yang diperlukan, proses instalasi akan dimulai, dan semua file konfigurasi akan dibuat.

Mulai Awal

Setelah semuanya diunduh, ubah direktori menjadi folder yang baru saja Anda buat.

cd app

Sekarang kita dapat memulai server pengembangan Nuxt.js.

npm run dev

Perintah ini akan membangun situs menggunakan webpack, yang merupakan bundler modul, dan melayani situs di port localhost, yang umumnya akan menjadi port 3000. Ini juga akan memberi Anda akses ke modul reload panas, yang akan menghapus kebutuhan untuk me-restart aplikasi setiap kali Anda mengubah file. Karena kami menjalankan aplikasi dalam mode universal, aplikasi akan dikompilasi pada klien dan server. Sekarang aplikasi Anda akan berjalan di port 3000.

Bangunan Untuk Produksi

Mode pengembangan cukup berguna ketika Anda secara aktif mengembangkan aplikasi Anda. Namun, saat Anda siap mempublikasikan aplikasi Anda, add-on seperti hot-reload dan alat pengembang menjadi kurang penting. Inilah sebabnya kami ingin membangun aplikasi kami sekali, untuk lingkungan produksi. Untungnya, Nuxt.js termasuk alat yang dapat kita gunakan untuk dengan cepat membangun modul aplikasi kita untuk produksi. Jalankan berikut ini untuk memulai proses pembuatan produksi.

npm run build

Pada dasarnya, apa yang kami lakukan di sini adalah kami menyusun semua modul webpack kami, dengan optimisasi untuk produksi.

Setelah pembangunan selesai, Anda akan dapat menjalankan situs untuk produksi.

npm start

Sekarang, jika Anda menavigasi ke http://yourip:3000, Anda akan melihat layar splash Nuxt.js, yang menegaskan bahwa Anda menjalankan dalam mode produksi.

PM2: Kelola aplikasi Anda dengan mudah

Sekarang kami memahami dasar-dasar menjalankan aplikasi kami untuk produksi. Dalam hal lingkungan produksi, kami lebih suka cara yang baik untuk menjaga aplikasi kami berjalan selamanya, restart otomatis aplikasi kami bila perlu, dan memonitor sumber daya aplikasi kami. Di situlah Process Manager 2 (PM2) masuk. PM2 adalah manajer proses Node.js untuk aplikasi produksi, yang mencakup banyak alat produksi penting seperti penyeimbangan beban, log canggih, skrip startup, dan banyak lagi. Pertama, instal PM2.

npm install pm2 -g

Ini menginstal PM2 secara global sehingga kami dapat menggunakannya di mana saja di server kami. Setelah PM2 selesai mengunduh, kita dapat memulai aplikasi kita.

pm2 start <appfolder>/server/index.js

Perhatikan bahwa kita memulai file server yang terletak di dalam root aplikasi kita.

Jika Anda ingin melihat sumber daya yang dikonsumsi aplikasi Anda, Anda dapat melakukannya dengan pm2 monitperintah. Ini akan memunculkan antarmuka yang mirip dengan ncurses, di mana Anda dapat mengumpulkan data tentang RAM aplikasi, CPU, dan penggunaan disk dengan tepat.

Saat ini, aplikasi Anda akan berjalan persis seperti sebelumnya ketika kami menjalankannya dengan npm, kecuali sekarang kami memiliki kendali lebih besar dalam hal optimasi produksi.

Anda sekarang memiliki membangun aplikasi Nuxt.js yang digunakan untuk produksi dengan Node.js dan Ubuntu 18.04. Jika Anda ingin mempelajari lebih lanjut tentang Nuxt, dan semua fitur mendalamnya, silakan kunjungi dokumentasi resmi mereka .