ServBay

Tiếng Việt

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Tiếng Việt

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Appearance

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ục pages, 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 đã:

  1. Đã cài đặt thành công ứng dụng ServBay.
  2. Đã 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.
  3. Có kiến thức cơ bản về Node.js, npm (hoặc Yarn/pnpm) và các lệnh terminal.
  4. (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.

  1. 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:

    bash
    cd /Applications/ServBay/www

    Windows:

    bash
    cd C:\ServBay\www

  2. Khở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ên servbay-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.

    bash
    npx create-nuxt-app servbay-nuxt-app

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

  3. Cà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:

    bash
    cd servbay-nuxt-app
npm install
# Hoặc Yarn: yarn install
# Hoặc pnpm: pnpm install

    Đợ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.

  1. Mở file pages/index.vue

    Dùng editor để mở file pages/index.vue trong thư mục dự án.

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

    Ở đâ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.

  1. 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:

    bash
    cd /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

    Windows:

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

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

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

  3. 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).

  1. 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òn npm run export sinh ra các file HTML tĩnh trong thư mục (mặc định là dist):

    macOS:

    bash
    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

    Windows:

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

    Sau khi hoàn tất, thư mục dist sẽ chứa tất cả các file tĩnh đã xuất.

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

    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.

  3. 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!