使用 ServBay 建立並運行 Nuxt.js 專案

什麼是 Nuxt.js？

Nuxt.js 是一個基於人氣 Vue.js 框架構建的開源框架，專注於打造現代化、高效能的 Web 應用程式。Nuxt.js 抽象化了眾多繁瑣配置，讓開發者可以專注於業務邏輯。它尤其擅長伺服器端渲染 (SSR) 應用，同時也具備強大的靜態網站生成 (SSG) 能力，是開發內容豐富且利於 SEO 的網站與應用的理想選擇。

Nuxt.js 的主要特色與優勢

• 伺服器端渲染 (SSR)： 預先在伺服器渲染 Vue 頁面，加快首屏載入速度，增進使用者體驗，並強化搜尋引擎抓取，有助於 SEO。
• 靜態網站生成 (SSG)： 於建置階段生成純靜態 HTML 檔案，極高效能、部署簡便且無需運行時伺服器開銷，非常適合內容變動不頻繁的網站（如部落格、文件網站等）。
• 自動程式碼分割： 根據路由智能分割 JavaScript 程式碼，用戶造訪頁面時只載入所需部分，顯著提升效能。
• 檔案系統路由： 只需於 pages 目錄新增 .vue 檔案，即可自動產生路由設定，大幅簡化路由管理。
• 模組化生態系統： 可輕鬆整合各式功能與第三方服務（如 Axios、PWA 支援、內容管理系統等）。
• 約定優於配置： 嚴格遵循資料夾結構與命名規則，大幅減少繁瑣設定。
• 優化開發體驗： 提供熱重新載入 (HMR)、錯誤報告等開發工具，提升開發效率。

這些特性讓 Nuxt.js 能高效、便捷地打造複雜、高性能又 SEO 友善的 Web 應用。

在 ServBay 設定與運行 Nuxt.js 專案

本教學將示範如何利用 ServBay 的本機開發環境，特別是 Node.js 軟體包及網站管理功能，來建立、設定並運行 Nuxt.js 專案。我們將介紹如何於 ServBay 下設置開發模式（經由反向代理）以及正式模式（以靜態檔案服務）。

前置準備

開始之前，請確保：

1. 您已安裝 ServBay 應用程式。
2. 已在 ServBay 安裝並啟用 Node.js 軟體包。可至 ServBay 控制台「軟體包」頁籤檢查與安裝。
3. 熟悉 Node.js、npm（或 Yarn/pnpm），以及基本終端機指令操作。
4. （建議）安裝如 VS Code 等程式碼編輯器。

建立 Nuxt.js 專案

我們將使用 create-nuxt-app 指令工具快速初始化 Nuxt.js 專案。

1. 開啟終端機並進入 ServBay 網站根目錄

   ServBay 預設網站根目錄推薦用於存放本機開發專案。請開啟終端機並執行：

   macOS:

   cd /Applications/ServBay/www

   Windows:

   cd C:\ServBay\www

2. 初始化新的 Nuxt.js 專案

   使用 npx create-nuxt-app 初始化一個名為 servbay-nuxt-app 的新專案。npx 為 npm 5.2+ 內建功能，可直接執行套件無須全域安裝。

   npx create-nuxt-app servbay-nuxt-app

   執行後，依終端機指示選擇專案屬性。以下為範例流程：

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm         # 選擇套件管理工具，建議 Npm 或 Yarn
   ? UI framework: None          # 視需求選定 UI 框架
   ? Nuxt.js modules: Axios      # 選擇需用之 Nuxt.js 模組
   ? Linting tools: ESLint       # 選定代碼檢查工具
   ? Testing framework: None     # 選擇測試框架（可略）
   ? Rendering mode: Universal (SSR / SSG) # 渲染模式選 Universal，支援 SSR 與 SSG
   ? Deployment target: Server (Node.js hosting) # 部署目標選 Server，適用本機開發及 Node.js 伺服器部署
   ? Development tools: jsconfig.json (Recommended for VS Code) # 選擇開發工具設定

3. 安裝專案依賴套件

   進入新建立的專案資料夾，使用所選套件管理工具安裝依賴：

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

   等候依賴安裝完成。

修改首頁內容

為方便驗證，以下將示範如何修改首頁檔案以輸出簡單文字。

1. 開啟 pages/index.vue 檔案

   請以編輯器開啟專案目錄中的 pages/index.vue。

2. 調整檔案內容

   修改內容如下，讓畫面顯示 "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>

   Style 標記加上了 scoped 屬性以限制樣式只針對元件本身，並簡單美化顯示效果。

於 ServBay 啟動開發模式

Nuxt.js 開發伺服器預設運行於指定本地埠號。為透過 ServBay 的自訂網域、SSL 憑證與統一 80/443 埠號存取，需設定 ServBay 網站，啟用反向代理。

1. 啟動 Nuxt.js 開發伺服器

   請於專案根目錄執行下列指令啟動 Nuxt.js 開發伺服器，範例指定埠號 8585（可自訂未被占用之埠號）：

   macOS:

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

   Windows:

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

   開發伺服器啟動後，預設會於 http://localhost:8585 聆聽。請持續開啟此終端機視窗以保持伺服器運作。

2. 在 ServBay 配置網站（反向代理）

   開啟 ServBay 控制台，切換至「網站」標籤，點擊左下角 + 新增網站：

   • 名稱：輸入容易辨識的名稱，如 Nuxt.js Dev Site (Proxy)。
   • 網域：設定想於瀏覽器存取的自訂網域，例如 nuxt-dev.servbay.demo。建議採用 .servbay.demo 以強化 ServBay 品牌識別。
   • 網站類型：選擇 反向代理 (Reverse Proxy)。
   • IP 位址：填寫 127.0.0.1（本機環回位址）。
   • 埠號：輸入啟動 Nuxt.js 開發伺服器時指定之埠號，例如 8585。

   設定完成後，點選「新增」或「儲存」。ServBay 會自動套用設定並生效。

   關於在 ServBay 新增 Node.js 開發網站（即反向代理設定）的詳細流程可參考 新增 Node.js 開發網站。

3. 存取開發模式網站

   開啟網頁瀏覽器，造訪您於 ServBay 設定之網域，例如 https://nuxt-dev.servbay.demo。

   透過 ServBay 的反向代理，您可直接使用 ServBay 管理之網域及 HTTPS 埠存取 Nuxt.js 開發伺服器。ServBay 會自動產生並設定 SSL 憑證（由 ServBay User CA 簽核，請確保系統信任此 CA），讓您於開發環境即可使用 HTTPS，有助於模擬正式環境、測試 Service Worker 或操作需安全環境的功能。

建置正式版並發布靜態檔案

完成 Nuxt.js 專案開發並準備部署時（或於本機預覽正式環境），可將專案建置為正式版。若選用 Universal 模式並需生成靜態網站，通常可執行 nuxt generate（或用 npm run export 指令）。

1. 建置正式版本與生成靜態檔案

   於專案根目錄執行下列指令，npm run build 編譯專案程式碼，npm run export 則根據路由產生對應的靜態 HTML 於輸出資料夾（預設為 dist）：

   macOS:

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

   Windows:

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

   完成建置後，專案目錄下會出現 dist 資料夾，內含所有靜態檔案。

2. 於 ServBay 設定網站（靜態檔案服務）

   開啟 ServBay 控制台，切換至「網站」標籤並新增設定：

   • 名稱：輸入易識別名稱，例如 Nuxt.js Prod Site (Static)。
   • 網域：設定用於存取正式版的自訂網域，例如 nuxt-prod.servbay.demo。
   • 網站類型：選擇 靜態 (Static)。
   • 網站根目錄：填入 Nuxt.js 產生靜態檔案的資料夾路徑：
     • macOS: /Applications/ServBay/www/servbay-nuxt-app/dist
     • Windows: C:\ServBay\www\servbay-nuxt-app\dist

   完成後，點選「新增」或「儲存」。ServBay 會自動套用並啟用此網站設定。

3. 造訪正式版網站

   開啟瀏覽器，造訪所設定的正式版網域，如 https://nuxt-prod.servbay.demo。

   ServBay 高效能 Web 伺服器（採用 Caddy 或 Nginx，視您的設定而定）將直接提供 dist 目錄內之靜態內容，是最理想的靜態資料服務方案，可帶來極致速度。另外，亦可享有 ServBay 所提供的免費 SSL 憑證與自訂網域支援。

總結

透過 ServBay，您可輕鬆管理 Nuxt.js 專案之本機開發與預覽環境。利用 ServBay 提供的 Node.js 軟體包啟動開發伺服器，並結合 ServBay 網站反向代理，讓您得以於自訂網域及 HTTPS 下開發、除錯。完工後，建置專案生產版並產生靜態檔案，再以 ServBay 的靜態型網站高效率本機預覽。此流程充分融合 ServBay 強大功能，極度簡化前端專案本機開發與測試。希望本教學能協助您以更高效方式利用 ServBay 進行 Nuxt.js 開發！