Tạo và vận hành dự án Nuxt.js với ServBay

Nuxt.js là gì?

Nuxt.js là một framework mã nguồn mở xây dựng trên nền tảng Vue.js nổi tiếng, chuyên dụng cho việc phát triển các ứng dụng web hiện đại, hiệu năng cao. Framework này giúp đơn giản hóa các cấu hình phức tạp, nhờ đó các nhà phát triển có thể tập trung vào logic nghiệp vụ. Nuxt.js đặc biệt mạnh ở khả năng render phía server (SSR), đồng thời cũng cung cấp khả năng build site tĩnh (SSG) vượt trội, biến nó thành lựa chọn tối ưu cho các website, ứng dụng nội dung phong phú và thân thiện SEO.

Các tính năng nổi bật của Nuxt.js

• Render phía server (SSR): Render trước các trang Vue trên server, giúp cải thiện tốc độ tải trang đầu tiên, nâng cao trải nghiệm người dùng và khả năng được Google index, tăng hiệu quả SEO.
• Sinh site tĩnh (SSG): Tạo ra các file HTML tĩnh hoàn chỉnh khi build. Cách này vô cùng hiệu quả, dễ triển khai và không cần backend liên tục vận hành, rất phù hợp cho blog, site tài liệu – nơi nội dung ít thay đổi.
• Tự động chia nhỏ code: Dựa vào route, Nuxt.js tự động chia nhỏ JavaScript, chỉ tải phần cần thiết khi truy cập mỗi trang, tối ưu hóa hiệu suất ứng dụng.
• Router dựa trên hệ thống file: Chỉ cần tạo file .vue trong thư mục pages, hệ thống tự động sinh route, giảm đáng kể thời gian cấu hình.
• Hệ sinh thái module mạnh mẽ: Dễ dàng mở rộng tính năng hoặc tích hợp dịch vụ thứ ba (Axios, hỗ trợ PWA, tích hợp CMS...) chỉ với vài dòng cấu hình.
• Đặt quy chuẩn cao hơn cấu hình: Áp dụng cấu trúc thư mục và quy tắc đặt tên chuẩn hóa, giảm thiểu thiết lập phức tạp.
• Tối ưu trải nghiệm phát triển: Hỗ trợ hot reload, báo lỗi trực quan,... tăng hiệu suất lập trình.

Nhờ các điểm mạnh này, Nuxt.js giúp việc xây dựng web hiện đại, hiệu năng tối ưu và chuẩn SEO trở nên đơn giản, hiệu quả.

Thiết lập & chạy Nuxt.js trên ServBay

Bài hướng dẫn này sẽ chỉ bạn tận dụng môi trường phát triển local mạnh mẽ của ServBay – đặc biệt là bộ Node.js và quản lý website – để tạo, cấu hình và chạy dự án Nuxt.js. Chúng tôi đề cập cả cách cấu hình chạy ở chế độ phát triển (proxy ngược) và chế độ production (dùng static file service).

Yêu cầu trước khi bắt đầu

Đảm bảo bạn đã chuẩn bị:

1. Đã cài đặt ServBay thành công.
2. Đã cài và bật Node.js package trong ServBay (kiểm tra & cài đặt tại tab “Packages” của ServBay dashboard).
3. Có kiến thức cơ bản về Node.js, npm (hoặc Yarn/pnpm), một số lệnh terminal cơ bản.
4. (Khuyến nghị) Đã cài sẵn một editor như VS Code.

Tạo mới dự án Nuxt.js

Chúng ta sử dụng công cụ scaffold create-nuxt-app để khởi tạo nhanh dự án.

1. Mở Terminal, di chuyển đến thư mục web root của ServBay

   Thư mục web root mặc định trên ServBay là /Applications/ServBay/www. Đây là nơi lý tưởng để đặt các project phát triển local. Mở Terminal và chạy:

   cd /Applications/ServBay/www

2. Khởi tạo dự án Nuxt.js mới

   Dùng lệnh npx create-nuxt-app để khởi tạo project tên là servbay-nuxt-app. npx là tiện ích đi kèm npm 5.2+, cho phép chạy trực tiếp package mà không cần cài global.

   npx create-nuxt-app servbay-nuxt-app

   Làm theo hướng dẫn trong terminal để chọn option phù hợp. Ví dụ:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm         # Chọn trình quản lý gói, nên dùng Npm hoặc Yarn
   ? UI framework: None          # Chọn UI framework nếu muốn
   ? Nuxt.js modules: Axios      # Chọn module Nuxt.js nếu muốn
   ? Linting tools: ESLint       # Chọn công cụ lint nếu cần
   ? Testing framework: None     # Chọn framework test nếu dùng
   ? Rendering mode: Universal (SSR / SSG) # Chọn Universal để có cả SSR & SSG
   ? Deployment target: Server (Node.js hosting) # Chọn server cho local dev & deploy Node.js
   ? Development tools: jsconfig.json (Recommended for VS Code) # Chọn công cụ phát triển nếu cần

3. Cài đặt các dependency

   Vào thư mục dự án vừa khởi tạo và cài các gói phụ thuộc bằng công cụ bạn đã chọn:

   cd servbay-nuxt-app
   npm install
   # Hoặc dùng Yarn: yarn install
   # Hoặc pnpm: pnpm install

   Đợi quá trình cài đặt hoàn tất.

Sửa nội dung output của project

Để kiểm tra nhanh, chúng ta sẽ chỉnh homepage để hiển thị thông báo đơn giản.

1. Mở file pages/index.vue

   Dùng editor bạn yêu thích mở file pages/index.vue trong thư mục dự án.

2. Chỉnh sửa nội dung file

   Thay nội dung thành đoạn mã dưới để khi truy cập site sẽ hiện "Hello ServBay!":

   <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>

   Chú ý: Thêm thuộc tính scoped vào thẻ style để CSS chỉ áp dụng cho component này, đồng thời trang được làm đẹp đơn giản.

Chạy chế độ phát triển Nuxt.js trên ServBay

Nuxt.js development server sẽ chạy trên một port cục bộ. Để truy cập qua domain tùy chỉnh, SSL, port 80/443 qua ServBay, ta cấu hình proxy ngược.

1. Khởi chạy development server của Nuxt.js

   Trên thư mục gốc dự án, dùng lệnh sau để chạy server ở port 8585 (bạn có thể chọn port khác nếu muốn):

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run dev -- --port 8585
   # Hoặc với Yarn: yarn dev --port 8585
   # Hoặc pnpm: pnpm run dev --port 8585

   Server chạy xong sẽ thông báo URL: http://localhost:8585. Giữ terminal này mở để server luôn hoạt động.

2. Cấu hình Website trên ServBay (Proxy ngược)

   Vào ServBay dashboard, chọn tab "Website", bấm dấu + ở góc dưới để thêm site mới:

   • Tên (Name): Đặt tên dễ nhớ, ví dụ Nuxt.js Dev Site (Proxy).
   • Tên miền (Domain): Gõ domain bạn muốn dùng, ví dụ nuxt-dev.servbay.demo. Nên dùng hậu tố .servbay.demo để đồng bộ thương hiệu.
   • Loại website (Website Type): Chọn Reverse Proxy (Proxy ngược).
   • Địa chỉ IP: Gõ 127.0.0.1 (local).
   • Cổng (Port): Gõ port đã chọn ở trên, ví dụ 8585.

   Cấu hình xong thì "Add" hoặc "Save". ServBay sẽ tự cập nhật và kích hoạt cấu hình.

   Tham khảo chi tiết hơn tại Thêm website Node.js development.

3. Truy cập website phát triển

   Mở trình duyệt và vào domain bạn vừa cấu hình trên ServBay, ví dụ https://nuxt-dev.servbay.demo.

   Thông qua proxy ngược, bạn truy cập local Nuxt.js server với domain, SSL, cổng 80/443 giống hệt môi trường thật. ServBay sẽ tự tạo và gán chứng chỉ SSL (bởi ServBay User CA – nhớ đảm bảo máy bạn tin cậy CA này), rất thiết thực cho thử nghiệm Service Worker, context cần bảo mật,... như sản xuất thật.

Build & chạy phiên bản production

Khi hoàn tất phát triển và muốn "xuất bản" (hoặc preview bản production tại local), bạn cần build phiên bản production. Nếu sử dụng Universal mode, build tĩnh dùng lệnh nuxt generate (hoặc qua script npm run export).

1. Build và sinh file tĩnh

   Ở thư mục gốc project, chạy:

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

   Kết thúc, thư mục dist sẽ chứa toàn bộ các file HTML, asset tĩnh đã sinh sẵn.

2. Cấu hình website tĩnh trên ServBay

   Trên ServBay dashboard, tab "Website", bấm + thêm cấu hình mới:

   • Tên (Name): Đặt tên dễ nhớ, vd: Nuxt.js Prod Site (Static).
   • Tên miền (Domain): Tên miền cho bản production, vd: nuxt-prod.servbay.demo.
   • Loại website (Website Type): Chọn Static.
   • Thư mục gốc website (Website Root): Đường dẫn đến folder static vừa build – mặc định /Applications/ServBay/www/servbay-nuxt-app/dist.

   "Add" hoặc "Save" để áp dụng thay đổi.

3. Truy cập website production

   Dùng browser truy cập domain bản production, ví dụ: https://nuxt-prod.servbay.demo.

   Web server hiệu năng cao của ServBay (Caddy/Nginx tùy cấu hình) sẽ trực tiếp phục vụ các file tĩnh trong dist. Đây là cách tối ưu nhất để deploy website tĩnh local với tốc độ vượt trội. Bạn cũng sẽ được miễn phí SSL và đầy đủ custom domain.

Tổng kết

Nhờ ServBay, bạn dễ dàng quản lý các môi trường phát triển, preview local của dự án Nuxt.js. Sử dụng Node.js của ServBay để vận hành server phát triển, kết hợp website proxy ngược để thử nghiệm, debug trực tiếp dưới domain và HTTPS riêng. Sau khi hoàn thiện, chỉ cần build ra static file, cấu hình website tĩnh là có thể preview production local với hiệu năng cao. Quy trình tối ưu này tận dụng tối đa sự tiện lợi cũng như sức mạnh của ServBay, giúp quá trình phát triển và kiểm thử frontend local trở nên nhẹ nhàng và hiệu quả hơn. Hy vọng bài hướng dẫn này sẽ giúp bạn phát triển Nuxt.js với ServBay tốt hơn!