透過 100 多個技巧來學習 Nuxt!

部署

了解如何將您的 Nuxt 應用程式部署到任何託管服務供應商。

一個 Nuxt 應用程式可以部署在 Node.js 伺服器上、預先渲染以進行靜態託管,或部署到無伺服器或邊緣 (CDN) 環境。

如果您正在尋找支援 Nuxt 3 的雲端供應商列表,請參閱主機供應商章節。

Node.js 伺服器

探索使用 Nitro 的 Node.js 伺服器預設配置,以部署到任何 Node 主機。

  • 預設輸出格式,如果未指定或自動偵測到
  • 僅載入渲染請求所需的區塊,以實現最佳的冷啟動時間
  • 適用於將 Nuxt 應用程式部署到任何 Node.js 主機

進入點

當使用 Node 伺服器預設配置執行 nuxt build 時,結果將是一個啟動可立即運行的 Node 伺服器的進入點。

終端機
node .output/server/index.mjs

這將啟動您的生產環境 Nuxt 伺服器,預設監聽 3000 連接埠。

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

  • NITRO_PORTPORT (預設為 3000)
  • NITRO_HOSTHOST (預設為 '0.0.0.0')
  • NITRO_SSL_CERTNITRO_SSL_KEY - 如果兩者都存在,這將以 HTTPS 模式啟動伺服器。在絕大多數情況下,除了測試之外,不應使用此設定,並且 Nitro 伺服器應在反向代理(例如 nginx 或 Cloudflare)之後運行,該反向代理會終止 SSL。

PM2

PM2 (Process Manager 2) 是一個快速且簡單的解決方案,可將您的 Nuxt 應用程式託管在伺服器或 VM 上。

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

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 cluster 模組的多進程效能。

預設情況下,工作負載會使用循環分配策略分配給工作者。

了解更多

請在Nitro 文件中閱讀有關 node-server 預設配置的更多資訊
觀看 Daniel Roe 關於此主題的簡短影片。

靜態託管

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

  • 使用 ssr: true 進行靜態網站生成 (SSG) 會在建置時預先渲染應用程式的路由。(這是執行 nuxi generate 時的預設行為。)它也會產生 /200.html/404.html 單頁應用程式回退頁面,這些頁面可以在用戶端渲染動態路由或 404 錯誤(儘管您可能需要在靜態主機上進行設定)。
  • 或者,您可以使用 ssr: false(靜態單頁應用程式)預先渲染您的網站。這將產生包含空 <div id="__nuxt"></div> 的 HTML 頁面,您的 Vue 應用程式通常會在其中渲染。您將失去預先渲染網站的許多 SEO 優勢,因此建議改用 <ClientOnly> 來包裝網站中任何無法伺服器渲染的部分。
請在Nuxt 預先渲染中閱讀更多資訊。

僅限用戶端渲染

如果您不想預先渲染路由,使用靜態託管的另一種方法是在 nuxt.config 檔案中將 ssr 屬性設定為 falsenuxi generate 命令接著會輸出一個 .output/public/index.html 進入點和 JavaScript 套件,就像典型的用戶端 Vue.js 應用程式一樣。

nuxt.config.ts
export default 
defineNuxtConfig
({
ssr
: false
})

主機供應商

Nuxt 可以部署到多個雲端供應商,只需最少的設定

請在部署中閱讀更多資訊。

預設配置

除了 Node.js 伺服器和靜態託管服務之外,Nuxt 專案還可以通過多個經過良好測試的預設配置和最少的設定進行部署。

您可以在 nuxt.config.ts 檔案中明確設定所需的預設配置

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 應用程式中注入可能會導致不必要副作用的指令碼。

它們在 Cloudflare 儀表板上的位置有時會變更,因此請隨意瀏覽。