部署

Nuxt 應用程式可以部署在 Node.js 伺服器上，為靜態託管預渲染，或部署到無伺服器或邊緣（CDN）環境。

Node.js 伺服器

瞭解 Nitro 的 Node.js 伺服器預設，以部署到任何 Node 託管。

• 如果沒有指定或自動檢測，則為預設輸出格式
  
• 僅載入所需塊以渲染請求，以實現最佳冷啟動時間
  
• 適用於將 Nuxt 應用程式部署到任何 Node.js 託管

入口點

當使用 Node 伺服器預設執行 nuxt build 時，結果將是一個啟動即用型 Node 伺服器的入口點。

node .output/server/index.mjs

這將啟動您的生產 Nuxt 伺服器，預設情況下在埠 3000 上監聽。

它遵守以下執行時環境變數

• NITRO_PORT 或 PORT（預設為 3000）
• NITRO_HOST 或 HOST（預設為 '0.0.0.0'）
• NITRO_SSL_CERT 和 NITRO_SSL_KEY - 如果兩者都存在，這將以 HTTPS 模式啟動伺服器。在絕大多數情況下，除了測試之外，不應使用此功能，並且 Nitro 伺服器應在像 nginx 或 Cloudflare 這樣的反向代理後面執行，由其終止 SSL。

PM2

PM2（Process Manager 2）是用於在您的伺服器或 VM 上託管 Nuxt 應用程式的快速簡便的解決方案。

要使用 pm2，請使用 ecosystem.config.cjs

module.exports = {
  apps: [
    {
      name: 'NuxtAppName',
      port: '3000',
      exec_mode: 'cluster',
      instances: 'max',
      script: './.output/server/index.mjs',
    },
  ],
}

叢集模式

您可以使用 NITRO_PRESET=node_cluster 來利用 Node.js 的多程序效能叢集模組。

預設情況下，工作負載以輪詢策略分配給工作程序。

瞭解更多

靜態託管

有兩種方法可以將 Nuxt 應用程式部署到任何靜態託管服務

• 使用 ssr: true 的靜態站點生成 (SSG) 在構建時預渲染應用程式的路由。（這是執行 nuxt generate 時的預設行為。）它還將生成 /200.html 和 /404.html 單頁應用回退頁面，這些頁面可以在客戶端渲染動態路由或 404 錯誤（儘管您可能需要在靜態主機上配置此功能）。
• 或者，您可以使用 ssr: false（靜態單頁應用）預渲染您的站點。這將生成帶有空 <div id="__nuxt"></div> 的 HTML 頁面，您的 Vue 應用程式通常會在此處渲染。您將失去預渲染站點的許多 SEO 優勢，因此建議您使用 <ClientOnly> 來包裝您站點中無法在伺服器端渲染的部分（如果有）。

僅客戶端渲染

如果您不想預渲染路由，另一種使用靜態託管的方法是在 nuxt.config 檔案中將 ssr 屬性設定為 false。然後，nuxt generate 命令將輸出 .output/public/index.html 入口點和 JavaScript 包，就像經典的客戶端 Vue.js 應用程式一樣。

export default defineNuxtConfig({
  ssr: false,
})

託管服務提供商

Nuxt 可以部署到多個雲提供商，只需少量配置

預設

除了 Node.js 伺服器和靜態託管服務，Nuxt 專案還可以通過幾個經過充分測試的預設和最少的配置進行部署。

您可以在 nuxt.config.ts 檔案中顯式設定所需的預設

export default defineNuxtConfig({
  nitro: {
    preset: 'node-server',
  },
})

... 或者在執行 nuxt build 時使用 NITRO_PRESET 環境變數

NITRO_PRESET=node-server nuxt build

🔎 檢視Nitro 部署以獲取所有可能的部署預設和提供商。

CDN 代理

在大多數情況下，Nuxt 可以使用非 Nuxt 生成或建立的第三方內容。但有時此類內容可能會導致問題，尤其是 Cloudflare 的“縮小和安全選項”。

因此，您應該確保在 Cloudflare 中取消選中/停用以下選項。否則，不必要的重新渲染或水合錯誤可能會影響您的生產應用程式。

1. 速度 > 最佳化 > 內容最佳化 > 停用“Rocket Loader™”
2. 速度 > 最佳化 > 影像最佳化 > 停用“Mirage”
3. 抓取防護 > 停用“電子郵件地址混淆”

透過這些設定，您可以確保 Cloudflare 不會將可能導致意外副作用的指令碼注入您的 Nuxt 應用程式。