向世界展示你的作品 (部署)
部署您的 Nuxt 專案,就像是決定要用哪種方式提供您的「料理」。主要有三種選擇,您可以根據您的需求和專案類型來挑選。
方式一:開一間自己的餐廳 (部署在 Node.js 伺服器)
這就像是租一個店面,自己架設廚房,經營一間完整的餐廳。您擁有最高的控制權,但同時也要負擔較多的管理責任。
適用情境
您有自己的雲端主機 (VPS) 或公司內部伺服器,需要完全控制環境。
部署步驟
在您的專案中執行 npx nuxt build
。
將產生的整個 .output
資料夾上傳到您的主機。
在主機上執行 node .output/server/index.mjs
來啟動服務。
方式二:準備好外帶餐盒 (部署在靜態主機)
這就是我們昨天學的 Prerendering/SSG。這就像是預先把所有料理都做成精緻的便當,您不需要一間餐廳,只需要一個小攤位(甚至自動販賣機)就能販售。
適用情境
內容不常變動的網站,例如部落格、文件、公司形象網站。這是最簡單、最便宜、效能也最好的部署方式之一。
部署步驟
在您的專案中執行 npx nuxt generate
。
將產生的 .output/public
資料夾,直接上傳或部署到任何靜態託管服務,如 Netlify、Vercel、GitHub Pages 等。
方式三:交給雲端廚房 (部署在現代化託管平台) - 推薦!
這就像是與 Uber Eats Kitchens 這樣的雲端廚房合作。您只需要提供食譜(您的程式碼),他們會幫您處理好廚房、出餐、尖峰時段的擴展等所有事情。
適用情境
這是現代 Nuxt 開發最推薦的方式。它兼具了 Node.js 伺服器的彈性與靜態網站的效能,並且能自動擴展。
部署步驟 (以 Vercel/Netlify 為例)
將您的 Nuxt 專案上傳到 GitHub (或其他 Git 平台)。
在 Vercel 或 Netlify 網站上,註冊帳號並授權存取您的 GitHub。
選擇您的 Nuxt 專案,點擊「部署」。
完成! 平台會自動偵測到這是 Nuxt 專案,然後執行 nuxt build
,並幫您處理好所有後續部署細節。
零設定威力:您幾乎什麼都不用設定,這就是 Nuxt 的 Nitro 引擎與現代化平台結合的威力。
主流部署平台比較
平台 | 優點 | 適用場景 | 價格 |
---|---|---|---|
Vercel | • 零設定部署 • 自動 HTTPS • 全球 CDN | 個人專案 中小型網站 | 免費額度豐富 |
Netlify | • 強大的表單處理 • 函數功能 • A/B 測試 | 靜態網站 JAMstack 應用 | 免費開始 |
Cloudflare Pages | • 極快的速度 • 無限頻寬 • 安全性佳 | 高流量網站 全球用戶 | 完全免費 |
GitHub Pages | • 與 GitHub 完美整合 • 簡單易用 | 開源專案 文檔網站 | 免費 |
今日總結
今天我們認識了三種主要的部署策略:傳統伺服器、靜態託管、以及現代化平台。
Node.js 伺服器部署:完全控制但需要管理
適合需要完全控制環境的企業級應用
靜態網站部署:最簡單、最便宜、效能最好
適合內容型網站如部落格、文檔、形象網站
現代化託管平台:最推薦的部署方式
兼具彈性與效能,零設定自動化部署
建議方案
對於您的《人類補完計劃》專案,我會強烈建議您嘗試第三種方式。將專案放在 GitHub 上,並連結到 Vercel 或 Netlify。您會驚訝於整個過程是如此的無痛和自動化。
恭喜您,現在您已經走完了從「建立專案」到「部署上線」的完整流程!您已經具備了打造一個完整 Web 應用程式的能力!