5月28日 02:27

Nuxt.js 应用如何部署和托管？有哪些推荐的部署方案？

Nuxt.js 部署方式取决于渲染模式：SSR 需要 Node.js 运行时，SSG/SPA 只需静态托管。推荐 Vercel（零配置 SSR + 自动预览）和 Docker + Nginx + PM2（自建服务器可控），中小项目上 Vercel，企业级走容器化。

三种渲染模式对应不同部署策略

Nuxt.js 支持 SSR、SSG、SPA 三种渲染模式，部署架构差异显著：

SSR（服务端渲染）：nuxt build 产出 Node.js 服务，必须运行在服务器上。启动命令 node .output/server/index.mjs，需配合进程管理器（PM2）和反向代理（Nginx）。

SSG（静态站点生成）：nuxt generate 产出纯静态文件到 .output/public，部署到任何静态托管平台即可，无需服务器运行时。适合博客、文档站、企业官网。

SPA（单页应用）：nuxt.config.ts 中设置 ssr: false，构建后部署方式同 SSG。适合不需要 SEO 的后台管理系统。

Nuxt 3+ 基于 Nitro 服务引擎，构建产物自包含（内联依赖、无 node_modules），且支持 routeRules 实现混合渲染——同一应用中不同路由可分别使用 SSR 和 SSG。

Vercel 部署：零配置 SSR 首选

Vercel 是 Nuxt 官方推荐平台，原生支持 SSR/SSG/混合渲染：

项目推送到 GitHub/GitLab
Vercel 导入仓库，框架自动识别 Nuxt
环境变量在 Dashboard → Settings → Environment Variables 配置
每次 push 自动构建部署，PR 自动生成预览 URL

SSR 模式下 Vercel 将服务自动部署到 Serverless Functions 或 Edge Runtime。免费额度（100GB 带宽/月）适合中小项目，高流量场景注意计费。Nuxt 4 已适配 Vercel 的 NITRO_PRESET=vercel-edge，可启用边缘渲染。

自建服务器：Docker + Nginx + PM2

生产环境自建推荐 Docker 容器化，多阶段构建控制镜像体积：

dockerfile
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:20-alpine
WORKDIR /app
COPY --from=builder /app/.output .output
ENV HOST=0.0.0.0 PORT=3000
EXPOSE 3000
CMD ["node", ".output/server/index.mjs"]

Nginx 反向代理 + 静态资源缓存配置：

nginx
server {
    listen 80;
    server_name example.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    server_name example.com;
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

    location /_nuxt/ {
        proxy_pass http://127.0.0.1:3000;
        expires 365d;
        add_header Cache-Control "public, immutable";
    }

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

PM2 集群模式：pm2 start .output/server/index.mjs --name nuxt-app -i max，自动利用多核 CPU 并提供进程守护。

静态托管：Cloudflare Pages / Netlify / GitHub Pages

SSG 产物可零成本部署到静态托管平台：

Cloudflare Pages：免费额度高（500次构建/月、无限带宽），全球 CDN，npx wrangler pages deploy .output/public 一行命令部署
Netlify：自动部署 + 表单处理 + Functions 扩展，适合需要后端能力的静态站
GitHub Pages：完全免费，配合 GitHub Actions 自动构建，适合文档站和博客

面试追问

Q: SSR 和 SSG 如何选择？ 内容更新频繁（电商、社交动态）选 SSR；内容稳定（博客、文档）选 SSG。也可用 routeRules 混合渲染：routeRules: { '/': { prerender: true }, '/api/**': { ssr: true } }，首页预渲染 + 接口页实时渲染。

Q: Nuxt 3 的 Nitro 和 Nuxt 2 的部署有什么区别？ Nuxt 2 构建产物依赖 node_modules，需完整上传；Nuxt 3 Nitro 产物自包含，体积小 70%+。Nitro 支持 20+ 部署预设（Vercel、Cloudflare Workers、AWS Lambda、Deno Deploy），通过 NITRO_PRESET 环境变量一键切换，无需改代码。

Q: 如何管理环境变量避免泄露？ nuxt.config.ts 中用 runtimeConfig 区分公开和私密变量：public.xxx 暴露给客户端，根级变量仅服务端可用。部署时在平台面板注入，不写 .env 提交到仓库。Vercel/Docker 均支持运行时注入。

标签：Nuxt.js