部署
一個 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) 是一個快速且簡單的解決方案,可將您的 Nuxt 應用程式託管在伺服器或 VM 上。
要使用 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 cluster 模組的多進程效能。
預設情況下,工作負載會使用循環分配策略分配給工作者。
了解更多
靜態託管
有兩種方法可將 Nuxt 應用程式部署到任何靜態託管服務
- 使用
ssr: true
進行靜態網站生成 (SSG) 會在建置時預先渲染應用程式的路由。(這是執行nuxi generate
時的預設行為。)它也會產生/200.html
和/404.html
單頁應用程式回退頁面,這些頁面可以在用戶端渲染動態路由或 404 錯誤(儘管您可能需要在靜態主機上進行設定)。 - 或者,您可以使用
ssr: false
(靜態單頁應用程式)預先渲染您的網站。這將產生包含空<div id="__nuxt"></div>
的 HTML 頁面,您的 Vue 應用程式通常會在其中渲染。您將失去預先渲染網站的許多 SEO 優勢,因此建議改用<ClientOnly>
來包裝網站中任何無法伺服器渲染的部分。
僅限用戶端渲染
如果您不想預先渲染路由,使用靜態託管的另一種方法是在 nuxt.config
檔案中將 ssr
屬性設定為 false
。nuxi 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 中取消選取/停用以下選項。否則,不必要的重新渲染或水合錯誤可能會影響您的生產環境應用程式。
- 速度 > 優化 > 內容優化 > 停用「Rocket Loader™」
- 速度 > 優化 > 影像優化 > 停用「Mirage」
- 刮除防護 > 停用「電子郵件地址混淆」
透過這些設定,您可以確保 Cloudflare 不會在您的 Nuxt 應用程式中注入可能會導致不必要副作用的指令碼。