25
Re:Nuxt 100 天練習曲
Day 25

向世界展示你的作品 (部署)

Day 25·網站部署·上線發布

部署您的 Nuxt 專案,就像是決定要用哪種方式提供您的「料理」。主要有三種選擇,您可以根據您的需求和專案類型來挑選。

方式一:開一間自己的餐廳 (部署在 Node.js 伺服器)

這就像是租一個店面,自己架設廚房,經營一間完整的餐廳。您擁有最高的控制權,但同時也要負擔較多的管理責任。

適用情境

您有自己的雲端主機 (VPS) 或公司內部伺服器,需要完全控制環境。

部署步驟

1

在您的專案中執行 npx nuxt build

2

將產生的整個 .output 資料夾上傳到您的主機。

3

在主機上執行 node .output/server/index.mjs 來啟動服務。

方式二:準備好外帶餐盒 (部署在靜態主機)

這就是我們昨天學的 Prerendering/SSG。這就像是預先把所有料理都做成精緻的便當,您不需要一間餐廳,只需要一個小攤位(甚至自動販賣機)就能販售。

適用情境

內容不常變動的網站,例如部落格、文件、公司形象網站。這是最簡單、最便宜、效能也最好的部署方式之一。

部署步驟

1

在您的專案中執行 npx nuxt generate

2

將產生的 .output/public 資料夾,直接上傳或部署到任何靜態託管服務,如 Netlify、Vercel、GitHub Pages 等。

方式三:交給雲端廚房 (部署在現代化託管平台) - 推薦!

這就像是與 Uber Eats Kitchens 這樣的雲端廚房合作。您只需要提供食譜(您的程式碼),他們會幫您處理好廚房、出餐、尖峰時段的擴展等所有事情。

適用情境

這是現代 Nuxt 開發最推薦的方式。它兼具了 Node.js 伺服器的彈性與靜態網站的效能,並且能自動擴展。

部署步驟 (以 Vercel/Netlify 為例)

1

將您的 Nuxt 專案上傳到 GitHub (或其他 Git 平台)。

2

在 Vercel 或 Netlify 網站上,註冊帳號並授權存取您的 GitHub。

3

選擇您的 Nuxt 專案,點擊「部署」。

4

完成! 平台會自動偵測到這是 Nuxt 專案,然後執行 nuxt build,並幫您處理好所有後續部署細節。

零設定威力:您幾乎什麼都不用設定,這就是 Nuxt 的 Nitro 引擎與現代化平台結合的威力。

主流部署平台比較

平台優點適用場景價格
Vercel• 零設定部署
• 自動 HTTPS
• 全球 CDN
個人專案
中小型網站
免費額度豐富
Netlify• 強大的表單處理
• 函數功能
• A/B 測試
靜態網站
JAMstack 應用
免費開始
Cloudflare Pages• 極快的速度
• 無限頻寬
• 安全性佳
高流量網站
全球用戶
完全免費
GitHub Pages• 與 GitHub 完美整合
• 簡單易用
開源專案
文檔網站
免費

今日總結

今天我們認識了三種主要的部署策略:傳統伺服器、靜態託管、以及現代化平台。

Node.js 伺服器部署:完全控制但需要管理

適合需要完全控制環境的企業級應用

靜態網站部署:最簡單、最便宜、效能最好

適合內容型網站如部落格、文檔、形象網站

現代化託管平台:最推薦的部署方式

兼具彈性與效能,零設定自動化部署

建議方案

對於您的《人類補完計劃》專案,我會強烈建議您嘗試第三種方式。將專案放在 GitHub 上,並連結到 Vercel 或 Netlify。您會驚訝於整個過程是如此的無痛和自動化。

恭喜您,現在您已經走完了從「建立專案」到「部署上線」的完整流程!您已經具備了打造一個完整 Web 應用程式的能力!