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

什麼是 Nuxt.js？

Nuxt.js 是一個基於流行的 Vue.js 框架所構建的開源框架，專門用於打造現代化、高效能的 Web 應用程式。它簡化了許多繁複的設定，讓開發者能更專注於實際業務邏輯。Nuxt.js 特別適合構建伺服器端渲染（SSR）應用，同時也具備強大的靜態網站生成（SSG）能力，是打造內容豐富、SEO 友善網站與應用的理想工具。

Nuxt.js 的主要特色與優勢

• 伺服器端渲染（SSR）：在伺服器上預先渲染 Vue 頁面，加快首屏載入速度、提升使用者體驗，並增強搜尋引擎對內容的抓取能力，有助於 SEO 排名。
• 靜態網站生成（SSG）：於建構階段產生完整靜態 HTML 檔案，效能極佳，部署簡便且不需伺服器運行成本，非常適合如部落格或文件站這類內容較少變動的網站。
• 自動代碼拆分（Automatic Code Splitting）：Nuxt.js 根據路由自動拆分 JavaScript 代碼，讓用戶訪問頁面時僅載入必要內容，大幅優化應用效能。
• 基於檔案系統的路由（File-system Routing）：只需在 pages 目錄內建立 .vue 檔案，即自動生成對應路由，簡化路由管理。
• 高度模組化（Modular）：擁有豐富的模組生態，輕鬆整合各式功能與第三方服務（如 Axios、PWA 支援、內容管理系統整合等）。
• 約定優於設定（Convention over Configuration）：透過預設目錄架構與命名規則，大幅減少繁雜設定。
• 極佳開發體驗：支援熱模組重載（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 預設的網站根目錄為 /Applications/ServBay/www，建議將本地開發專案存放於此。請開啟您的終端程式，並執行下列指令進入這個目錄：

   cd /Applications/ServBay/www

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

   運行 npx create-nuxt-app 指令，初始化一個名為 servbay-nuxt-app 的新專案。npx 為 npm 5.2+ 版本自帶的工具，可直接執行 npm 套件的指令，無需全域安裝。

   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       # 依據需求選擇 Lint 工具
   ? 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>

   此處新增了 scoped 屬性到 style 標籤，確保樣式僅作用於當下元件，並美化了畫面顯示效果。

在 ServBay 運行開發模式

Nuxt.js 的開發伺服器一般會啟動在本機的特定埠號。若要透過 ServBay 自訂網域、SSL 憑證及統一的 80/443 埠訪問，我們會運用 ServBay 的網站功能，設置反向代理。

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

   在專案根目錄下執行下列指令來啟動 Nuxt.js 開發伺服器，這裡指定埠號 8585，亦可自行更換為其他未占用埠號。

   cd /Applications/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 控制台，切至「網站」分頁，並點擊左下角「+」按鈕新增一組網站設定：

   • 名稱 (Name)：輸入易辨識名稱，如 Nuxt.js Dev Site (Proxy)。
   • 網域 (Domain)：輸入您欲在瀏覽器訪問的自訂網域，例如 nuxt-dev.servbay.demo。建議使用 .servbay.demo 結尾以呼應 ServBay 品牌。
   • 網站類型 (Website Type)：選取 反向代理 (Reverse Proxy)。
   • IP 位址 (IP Address)：填寫 127.0.0.1，即本地主機位址。
   • 埠號 (Port)：輸入剛剛 Nuxt.js 開發伺服器啟動用的埠號，例如 8585。

   完成設定後點擊「新增」或「儲存」。ServBay 會自動更新設定並立即生效。

   如需進一步了解如何在 ServBay 新增 Node.js 開發網站（通常以反向代理設置），可參考新增 Node.js 開發型網站。

3. 訪問開發模式網站

   開啟您的網頁瀏覽器，訪問剛設定的網域，如 https://nuxt-dev.servbay.demo。

   經過 ServBay 反向代理，您可直接透過 ServBay 管理的網域及 HTTPS 埠訪問 Nuxt.js 開發伺服器。ServBay 會自動為您產生並配置 SSL 憑證（由 ServBay User CA 核發，請確認您的系統已信任該 CA），讓您在開發環境同樣能使用 HTTPS；這對於模擬正式環境、測試 Service Workers 或需要安全上下文的功能來說非常有用。

建構並運行生產版本

當 Nuxt.js 專案開發完成，準備部署（或需在本地模擬正式環境預覽）時，可建構專案的生產版本。若選擇 Universal 模式且欲產生靜態網站，通常會執行 nuxt generate（或經由 npm run export 腳本觸發）。

1. 建構生產版本與產生靜態檔案

   在專案根目錄執行下列指令：npm run build 會編譯專案，npm run export 依據路由產生靜態 HTML 檔案於輸出目錄（預設為 dist）。

   cd /Applications/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 控制台，切至「網站」分頁，並點擊左下方「+」新增網站：

   • 名稱 (Name)：輸入如 Nuxt.js Prod Site (Static) 的名稱。
   • 網域 (Domain)：填寫您希望用作正式版預覽的自訂網域，例如 nuxt-prod.servbay.demo。
   • 網站類型 (Website Type)：選擇 靜態 (Static)。
   • 網站根目錄 (Website Root)：輸入 Nuxt.js 產生靜態檔案的目錄，根據上述步驟應為 /Applications/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 軟體包運行開發伺服器，並以其網站功能設置反向代理，使您能在自訂網域及 HTTPS 下進行開發調試。開發完成後，建構專案並產生靜態檔案，再透過 ServBay 的靜態網站型態，進行高效能的本地預覽。這套工作流程充分發揮了 ServBay 的便利與強大，讓前端專案的本地開發與測試更高效、易管理。希望本指南能協助您更有效地依靠 ServBay 來進行 Nuxt.js 開發！