Tạo và chạy 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 dựa trên Vue.js, giúp phát triển các ứng dụng web hiện đại và hiệu năng cao. Nuxt.js đơn giản hóa nhiều cấu hình phức tạp, giúp lập trình viên tập trung vào logic kinh doanh. Framework này nổi bật với khả năng render phía server (SSR), đồng thời hỗ trợ mạnh mẽ việc tạo các website tĩnh (SSG), lý tưởng để xây dựng các trang web giàu nội dung và thân thiện SEO.
Những đặc điểm & ưu điểm nổi bật của Nuxt.js
- Render phía server (SSR): Tiền render các trang Vue trên server, tăng tốc độ tải trang đầu tiên, cải thiện trải nghiệm người dùng và tối ưu hóa khả năng SEO nhờ việc nội dung dễ được các công cụ tìm kiếm thu thập.
- Tạo trang tĩnh (SSG): Khi build, Nuxt.js tạo ra các file HTML hoàn toàn tĩnh. Giải pháp này đạt hiệu năng tối đa, triển khai đơn giản và không yêu cầu server runtime, cực kỳ thích hợp cho blog hoặc trang tài liệu cập nhật không thường xuyên.
- Tự động tách code: Nuxt.js tự động chia nhỏ code JavaScript theo từng route, chỉ tải những phần cần thiết khi người dùng truy cập từng trang, giúp tối ưu hiệu năng.
- Routing dựa trên hệ thống file: Chỉ cần tạo các file
.vue
trong thư mụcpages
, các route sẽ được cấu hình tự động, giảm bớt công sức quản lý route. - Hệ sinh thái module phong phú: Có thể dễ dàng tích hợp nhiều tính năng hoặc dịch vụ bên thứ ba như Axios, PWA, CMS,...
- Ưu tiên quy ước hơn cấu hình: Tuân thủ cấu trúc thư mục và quy tắc đặt tên nhất định, giúp giảm thời gian cấu hình thủ công.
- Trải nghiệm lập trình tối ưu: Hỗ trợ hot-reload, báo lỗi chi tiết, và nhiều tiện ích giúp tăng hiệu suất phát triển.
Nhờ những tính năng trên, Nuxt.js giúp việc xây dựng ứng dụng web phức tạp, hiệu năng cao, tối ưu SEO trở nên thuận tiện và nhanh chóng.
Cấu hình và chạy dự án Nuxt.js với ServBay
Hướng dẫn này sẽ giúp bạn tận dụng môi trường phát triển local mạnh mẽ do ServBay cung cấp, đặc biệt là gói phần mềm Node.js và tính năng quản lý website, để tạo, cài đặt và chạy dự án Nuxt.js. Chúng ta sẽ tìm hiểu cách thiết lập chế độ phát triển (proxy ngược) và chế độ sản xuất (dịch vụ tĩnh).
Yêu cầu chuẩn bị
Trước khi bắt đầu, hãy đảm bảo bạn đã:
- Đã cài đặt thành công ứng dụng ServBay.
- Đã cài đặt và kích hoạt gói phần mềm Node.js trong ServBay. Kiểm tra tại tab “Phần mềm” trong bảng điều khiển ServBay.
- Có kiến thức cơ bản về Node.js, npm (hoặc Yarn/pnpm) và các lệnh terminal.
- (Khuyến nghị) Đã cài một trình soạn thảo mã như VS Code.
Khởi tạo dự án Nuxt.js
Chúng ta sẽ sử dụng công cụ create-nuxt-app
để tạo nhanh một dự án Nuxt.js.
Mở terminal và chuyển vào thư mục gốc website của ServBay
Thư mục gốc website của ServBay là nơi lý tưởng để lưu trữ các dự án phát triển local. Mở terminal và chạy lệnh sau để chuyển vào thư mục này:
macOS:
bashcd /Applications/ServBay/www
1Windows:
bashcd C:\ServBay\www
1Khởi tạo dự án Nuxt.js mới
Sử dụng lệnh
npx create-nuxt-app
để tạo dự án mới tênservbay-nuxt-app
.npx
có sẵn từ npm phiên bản 5.2 trở lên, cho phép chạy trực tiếp các gói thực thi mà không cần cài đặt toàn hệ thống.bashnpx create-nuxt-app servbay-nuxt-app
1Làm theo hướng dẫn hiển thị trên terminal và lựa chọn cấu hình phù hợp. Ví dụ một số tuỳ chọn sẽ như sau:
bash? Project name: servbay-nuxt-app ? Programming language: JavaScript ? Package manager: Npm # Chọn trình quản lý, nên dùng Npm hoặc Yarn ? UI framework: None # Chọn framework UI tuỳ nhu cầu ? Nuxt.js modules: Axios # Chọn module Nuxt.js cần dùng ? Linting tools: ESLint # Chọn công cụ kiểm tra mã nguồn ? Testing framework: None # Chọn framework kiểm thử tuỳ nhu cầu ? Rendering mode: Universal (SSR / SSG) # Chế độ render hỗ trợ SSR và SSG ? Deployment target: Server (Node.js hosting) # Phù hợp cho phát triển local và deploy lên Node.js ? Development tools: jsconfig.json (Recommended for VS Code) # Chọn tuỳ chọn dành cho phát triển
1
2
3
4
5
6
7
8
9
10Cài đặt các phụ thuộc của dự án
Chuyển vào thư mục dự án vừa tạo và cài đặt phụ thuộc với manager đã chọn:
bashcd servbay-nuxt-app npm install # Hoặc Yarn: yarn install # Hoặc pnpm: pnpm install
1
2
3
4Đợi quá trình cài đặt hoàn tất.
Chỉnh sửa nội dung hiển thị của dự án
Để kiểm tra nhanh, ta sẽ thay đổi trang chủ để in ra một dòng chữ đơn giản.
Mở file
pages/index.vue
Dùng editor để mở file
pages/index.vue
trong thư mục dự án.Chỉnh sửa nội dung file
Thay nội dung file bằng đoạn mã sau để hiển thị "Hello ServBay!":
html<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22Ở đây, thuộc tính
scoped
được thêm vào thẻ style nhằm giới hạn style chỉ áp dụng cho component hiện tại, đồng thời giúp giao diện trang chủ đẹp hơn.
Chạy chế độ phát triển với ServBay
Máy chủ phát triển của Nuxt.js thường chạy ở một cổng local xác định. Để truy cập nó thông qua tên miền tùy chỉnh, chứng chỉ SSL và cổng HTTP/HTTPS chuẩn do ServBay cung cấp, ta sẽ thiết lập proxy ngược trên ServBay.
Khởi động máy chủ phát triển Nuxt.js
Ở thư mục gốc dự án, chạy lệnh sau để khởi động server ở cổng
8585
(hoặc thay thế bằng cổng chưa sử dụng khác):macOS:
bashcd /Applications/ServBay/www/servbay-nuxt-app npm run dev -- --port 8585 # Hoặc Yarn: yarn dev --port 8585 # Hoặc pnpm: pnpm run dev --port 8585
1
2
3
4Windows:
bashcd C:\ServBay\www\servbay-nuxt-app npm run dev -- --port 8585 # Hoặc Yarn: yarn dev --port 8585 # Hoặc pnpm: pnpm run dev --port 8585
1
2
3
4Sau khi khởi động, máy chủ thường sẽ chạy tại
http://localhost:8585
. Hãy giữ cửa sổ terminal này bật để server luôn hoạt động.Cấu hình website proxy ngược trên ServBay
Vào bảng điều khiển ServBay, chuyển sang tab ‘Website’. Nhấn nút
+
ở góc dưới để tạo mới website:- Tên (Name): Điền tên dễ nhận biết, ví dụ
Nuxt.js Dev Site (Proxy)
. - Tên miền (Domain): Nhập tên miền tùy chỉnh, ví dụ
nuxt-dev.servbay.demo
(đặt hậu tố.servbay.demo
là chuẩn branding ServBay). - Loại website (Website Type): Chọn
Proxy ngược (Reverse Proxy)
. - Địa chỉ IP (IP Address): Điền
127.0.0.1
(localhost). - Cổng (Port): Nhập cổng máy chủ Nuxt.js, ví dụ
8585
.
Sau khi cấu hình, nhấn ‘Thêm’ hoặc ‘Lưu’. ServBay sẽ tự cập nhật cấu hình và kích hoạt website.
Tham khảo thêm hướng dẫn chi tiết tại Thêm website phát triển Node.js.
- Tên (Name): Điền tên dễ nhận biết, ví dụ
Truy cập website chế độ phát triển
Mở trình duyệt và truy cập tên miền bạn vừa tạo, ví dụ
https://nuxt-dev.servbay.demo
.Với proxy ngược của ServBay, bạn có thể truy cập máy chủ phát triển Nuxt.js qua tên miền quản lý bởi ServBay, trên cổng HTTPS. ServBay tự động sinh và cấu hình chứng chỉ SSL (do ServBay User CA cấp – hãy đảm bảo bạn tin cậy CA này trên máy). Việc dùng HTTPS ở môi trường dev rất hữu ích để kiểm thử môi trường sản xuất, Service Worker, hoặc các tính năng cần không gian an toàn.
Build và chạy bản sản xuất
Khi dự án hoàn tất hoặc cần thử nghiệm môi trường sản xuất local, bạn có thể tạo bản build sản xuất. Nếu chọn chế độ Universal và muốn tạo trang tĩnh, thường sẽ chạy nuxt generate
(hoặc thông qua script npm run export
).
Build sản xuất và xuất tĩnh
Ở thư mục gốc dự án, chạy các lệnh sau.
npm run build
giúp biên dịch dự án, cònnpm run export
sinh ra các file HTML tĩnh trong thư mục (mặc định làdist
):macOS:
bashcd /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
1
2
3
4
5Windows:
bashcd C:\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
1
2
3
4
5Sau khi hoàn tất, thư mục
dist
sẽ chứa tất cả các file tĩnh đã xuất.Cấu hình ServBay website – dịch vụ tĩnh
Vào ServBay, chuyển sang tab ‘Website’ và nhấn nút
+
để thêm website mới:- Tên (Name): Đặt tên dễ nhận biết, ví dụ
Nuxt.js Prod Site (Static)
. - Tên miền (Domain): Đặt tên miền truy cập cho bản sản xuất, ví dụ
nuxt-prod.servbay.demo
. - Loại website (Website Type): Chọn
Tĩnh (Static)
. - Thư mục gốc (Website Root): Đường dẫn đến file tĩnh Nuxt.js vừa export...
- macOS:
/Applications/ServBay/www/servbay-nuxt-app/dist
- Windows:
C:\ServBay\www\servbay-nuxt-app\dist
- macOS:
Nhấn ‘Thêm’ hoặc ‘Lưu’ để hoàn tất, ServBay sẽ tự động cập nhật và kích hoạt cấu hình website.
- Tên (Name): Đặt tên dễ nhận biết, ví dụ
Truy cập website bản sản xuất
Mở trình duyệt và truy cập tên miền cho bản sản xuất, ví dụ
https://nuxt-prod.servbay.demo
.ServBay sử dụng máy chủ web hiệu năng cao (Caddy hoặc Nginx tùy cấu hình) để phục vụ nhanh chóng các file tĩnh trong thư mục
dist
. Cách triển khai này tối ưu tốc độ truy cập cho website tĩnh. Đồng thời, bạn vẫn được hỗ trợ chứng chỉ SSL miễn phí và tên miền tùy chỉnh do ServBay sinh.
Tổng kết
Với ServBay, bạn có thể quản lý dễ dàng môi trường phát triển và preview local cho dự án Nuxt.js. Sử dụng gói Node.js để chạy máy chủ phát triển, kết hợp với proxy ngược để truy cập qua tên miền và HTTPS giúp quy trình dev & debug trở nên chuyên nghiệp. Sau khi hoàn thành, xuất các file tĩnh và cài đặt website tĩnh trên ServBay để trải nghiệm local preview hiệu năng vượt trội. Quy trình này khai thác tối đa sự tiện lợi và sức mạnh của ServBay, đơn giản hóa việc phát triển và kiểm thử frontend local. Hy vọng hướng dẫn này sẽ giúp bạn tận dụng ServBay hiệu quả cho dự án Nuxt.js!