Mencipta & Menjalankan Projek Nuxt.js Dengan ServBay

Apa Itu Nuxt.js?

Nuxt.js ialah kerangka sumber terbuka berasaskan Vue.js yang direka untuk membina aplikasi web moden dan berprestasi tinggi. Ia menyederhanakan konfigurasi kompleks supaya pembangun dapat fokus pada logik perniagaan. Nuxt.js amat berkemampuan menghasilkan aplikasi dengan rendering di sisi pelayan (SSR), namun turut menyokong penjanaan laman statik (SSG) yang hebat — menjadikannya pilihan ideal untuk membina laman serta aplikasi kaya kandungan yang mesra SEO.

Ciri Utama & Kelebihan Nuxt.js

• Rendering Sisi Pelayan (SSR): Prarender halaman Vue di pelayan untuk mempercepatkan muat halaman pertama, memperbaiki pengalaman pengguna, dan memudahkan enjin carian membaca kandungan anda.
• Penjanaan Laman Statik (SSG): Hasilkan fail HTML statik sewaktu binaan. Kaedah ini sangat pantas, mudah dihantar, dan tidak memerlukan runtime pelayan — sesuai untuk laman kandungan tetap seperti blog atau dokumentasi.
• Pembahagian Kod Automatik: Nuxt.js membahagi kod JavaScript secara automatik berdasarkan laluan, jadi hanya kod yang diperlukan dimuat setiap kali pelawat melawati laman — ini mengoptimumkan prestasi aplikasi.
• Routing Berdasarkan Sistem Fail: Laluan secara automatik diwujudkan dengan mencipta fail .vue dalam direktori pages, memudahkan pengurusan routing.
• Modular: Ekosistem modul yang kukuh membolehkan integrasi pelbagai fungsi dan servis pihak ketiga (seperti Axios, PWA, CMS, dsb) dengan mudah.
• Konvensi Mengatasi Konfigurasi: Mengikuti struktur direktori dan penamaan yang tetap bagi mengurangkan keperluan konfigurasi.
• Pengalaman Pembangunan Dipertingkat: Menyediakan HMR (pembaikan modul panas), laporan ralat, dan lain-lain untuk mempercepatkan workflow pembangunan.

Dengan ciri-ciri ini, Nuxt.js membolehkan anda membina aplikasi web kompleks, berprestasi tinggi, dan mesra SEO dengan lebih cekap.

Konfigurasi & Jalankan Projek Nuxt.js Dalam ServBay

Panduan ini menunjukkan cara menggunakan persekitaran pembangunan lokal ServBay, khususnya pakej Node.js dan pengurusan laman webnya, untuk mencipta, konfigurasikan, dan menjalankan projek Nuxt.js. Ia akan membimbing anda tentang tetapan mod pembangunan (reverse proxy) dan mod pengeluaran (servis fail statik) dalam ServBay.

Prasyarat

Sebelum bermula, pastikan perkara berikut:

1. ServBay telah dipasang dengan betul.
2. Node.js diaktifkan dan dipasang dalam ServBay. Periksa dan pasang dari tab “Pakej” dalam panel kawalan ServBay.
3. Anda memahami asas Node.js, npm (atau Yarn/pnpm), serta perintah terminal.
4. (Cadangan) Pemasangan editor kod seperti VS Code.

Mencipta Projek Nuxt.js

Kami akan menggunakan scaffolding create-nuxt-app untuk memulakan projek Nuxt.js dengan pantas.

1. Buka Terminal dan Masuk ke Direktori Root ServBay

   Direktori root laman web ServBay ialah lokasi yang disyorkan untuk projek pembangunan lokal. Buka terminal anda dan jalankan arahan berikut untuk masuk ke direktori tersebut:

   macOS:

   cd /Applications/ServBay/www

   Windows:

   cd C:\ServBay\www

2. Inisialisasi Projek Nuxt.js Baharu

   Gunakan arahan npx create-nuxt-app untuk memulakan projek baharu bernama servbay-nuxt-app. npx adalah alat dari npm 5.2+ yang membolehkan anda menjalankan executable npm tanpa pemasangan global.

   npx create-nuxt-app servbay-nuxt-app

   Ikut arahan konfigurasi dalam terminal. Anda boleh memilih mengikut keperluan masing-masing. Contoh konfigurasi:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm         # Pilih pengurus pakej, disyorkan Npm atau Yarn
   ? UI framework: None          # Pilih rangka UI mengikut keperluan
   ? Nuxt.js modules: Axios      # Pilih modul Nuxt.js mengikut kehendak
   ? Linting tools: ESLint       # Pilih alat linting jika diperlukan
   ? Testing framework: None     # Pilih rangka ujian jika mahu
   ? Rendering mode: Universal (SSR / SSG) # Pilih mod rendering; Universal menyokong SSR & SSG
   ? Deployment target: Server (Node.js hosting) # Pilih target; Server sesuai untuk pembangunan lokal dan pelayan Node.js
   ? Development tools: jsconfig.json (Recommended for VS Code) # Pilih konfigurasi alat pembangunan jika perlu

3. Pasang Kebergantungan Projek

   Masuk ke direktori projek yang baru dibuat dan gunakan pengurus pakej pilihan anda untuk memasang kebergantungan projek:

   cd servbay-nuxt-app
   npm install
   # Atau Yarn: yarn install
   # Atau pnpm: pnpm install

   Tunggu sehingga pemasangan kebergantungan selesai.

Ubah Kandungan Projek untuk Ujian

Untuk memudahkan pengesahan, kita akan ubah fail halaman utama agar ia memaparkan teks ringkas.

1. Buka Fail pages/index.vue

   Dengan editor kod pilihan anda, buka fail pages/index.vue dalam direktori projek.

2. Ubah Kandungan Fail

   Tukar kandungan fail menjadi seperti berikut untuk memaparkan "Hello ServBay!" di laman:

   <template>
     <div>
       <h1>Hello ServBay!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'IndexPage'
   }
   </script>
   
   <style scoped>
   div {
     text-align: center;
     margin-top: 50px;
     font-family: sans-serif;
   }
   h1 {
     color: #333;
   }
   </style>

   Di sini, atribut scoped ditambah pada tag style untuk memastikan gaya hanya diterapkan pada komponen semasa dan mempercantikkan paparan.

Jalankan Mod Pembangunan Nuxt.js Dalam ServBay

Server pembangunan Nuxt.js biasanya berjalan dalam port lokal tertentu. Supaya anda dapat mengaksesnya melalui domain tersuai, sijil SSL dan port 80/443 yang diurus ServBay, kita akan setup laman “reverse proxy”.

1. Mulakan Server Pembangunan Nuxt.js

   Dalam root projek, jalankan arahan berikut untuk memulakan server Nuxt.js, contohnya di port 8585 (anda boleh memilih port lain yang belum digunakan).

   macOS:

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run dev -- --port 8585
   # Atau Yarn: yarn dev --port 8585
   # Atau pnpm: pnpm run dev --port 8585

   Windows:

   cd C:\ServBay\www\servbay-nuxt-app
   npm run dev -- --port 8585
   # Atau Yarn: yarn dev --port 8585
   # Atau pnpm: pnpm run dev --port 8585

   Server pembangunan biasanya beroperasi di http://localhost:8585. Pastikan terminal ini terus dibuka supaya server aktif.

2. Konfigurasi Laman ServBay (Reverse Proxy)

   Buka panel kawalan ServBay dan pergi ke tab ‘Laman’. Tekan butang + di kiri bawah untuk tambah konfigurasi laman baharu:

   • Nama: Contohnya, Nuxt.js Dev Site (Proxy).
   • Domain: Masukkan domain tersuai, contohnya nuxt-dev.servbay.demo. Guna akhiran .servbay.demo sebagai amalan branding ServBay.
   • Jenis Laman: Pilih Reverse Proxy.
   • Alamat IP: Masukkan 127.0.0.1 (alamat localhost).
   • Port: Masukkan port server pembangunan Nuxt.js, iaitu 8585.

   Selepas konfigurasi, klik “Tambah” atau “Simpan”. ServBay akan mengemaskini tetapan dan mengaktifkan laman tersebut.

   Untuk langkah lebih terperinci tentang penambahan laman pembangun Node.js (biasanya melalui reverse proxy), rujuk Menambah Laman Pembangunan Node.js.

3. Akses Laman Dalam Mod Pembangunan

   Buka pelayar web anda dan lawati domain yang sudah dikonfigurasi di ServBay, contoh https://nuxt-dev.servbay.demo.

   Dengan reverse proxy ServBay, anda boleh mengakses server pembangunan Nuxt.js melalui domain yang diurus ServBay dan port HTTPS. ServBay akan secara automatik menjana dan mengkonfigurasi sijil SSL (ditandatangani oleh ServBay User CA, pastikan sistem anda mempercayai CA ini). Ini membolehkan anda menggunakan HTTPS dalam persekitaran pembangunan, sesuai untuk meniru produksi, menguji Service Worker, ataupun fungsi lain yang memerlukan konteks selamat.

Bina & Jalankan Versi Pengeluaran (Production)

Apabila projek Nuxt.js anda sudah siap dan sedia untuk dihantar (atau anda ingin pra-tonton dalam mode produksi secara lokal), bina versi pengeluaran projek. Untuk mod Universal dan laman statik, lazimnya anda gunakan nuxt generate (boleh dipanggil dengan skrip npm run export).

1. Bina Versi Pengeluaran dan Hasilkan Fail Statik

   Dalam root projek, jalankan arahan berikut. npm run build akan membina projek, dan npm run export akan menghasilkan fail HTML statik mengikut routing dalam folder output (dist).

   macOS:

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run build
   npm run export
   # Atau Yarn: yarn build && yarn export
   # Atau pnpm: pnpm build && pnpm run export

   Windows:

   cd C:\ServBay\www\servbay-nuxt-app
   npm run build
   npm run export
   # Atau Yarn: yarn build && yarn export
   # Atau pnpm: pnpm build && pnpm run export

   Selepas siap, direktori dist akan mengandungi semua fail statik.

2. Konfigurasi Laman ServBay (Servis Fail Statik)

   Buka panel kawalan ServBay dan pergi ke tab ‘Laman’. Tekan butang + untuk tambah laman baharu:

   • Nama: Contohnya, Nuxt.js Prod Site (Static).
   • Domain: Masukkan domain untuk capaian versi pengeluaran, contoh nuxt-prod.servbay.demo.
   • Jenis Laman: Pilih Static.
   • Root Laman: Isikan lokasi folder fail statik Nuxt.js:
     • macOS: /Applications/ServBay/www/servbay-nuxt-app/dist
     • Windows: C:\ServBay\www\servbay-nuxt-app\dist

   Klik “Tambah” atau “Simpan” untuk mengaktifkan konfigurasi laman.

3. Akses Laman Dalam Mod Pengeluaran

   Buka pelayar dan lawati domain yang dikonfigurasi, contohnya https://nuxt-prod.servbay.demo.

   Web server berprestasi tinggi ServBay (Caddy atau Nginx, bergantung pada pilihan anda) akan melayan terus fail statik dalam direktori dist. Ini adalah kaedah terpantas untuk menyediakan kandungan statik. Anda juga mendapat sijil SSL percuma dan dukungan domain tersuai melalui ServBay.

Rumusan

Dengan ServBay, pengurusan persekitaran pembangunan dan pra-tonton projek Nuxt.js menjadi amat mudah. Anda boleh menjalankan server pembangunan melalui pakej Node.js ServBay, kemudian mengkonfigurasi reverse proxy untuk pembangunan dan debugging di bawah domain tersuai dan HTTPS. Apabila siap, bina dan hasilkan fail statik, lalu preview secara lokal menggunakan fungsi laman statik ServBay yang berprestasi tinggi. Workflow ini mengoptimumkan kemudahan dan keupayaan ServBay sambil memudahkan proses pembangunan serta ujian projek frontend lokal anda. Semoga panduan ini membantu anda memanfaatkan ServBay sepenuhnya untuk pembangunan Nuxt.js!