进阶篇五 Nuxt4 部署方案：从开发到生产

文章目录

- 一、构建命令
- [二、Node.js 部署](#二、Node.js 部署)
- - [PM2 管理](#PM2 管理)
  - [Docker 部署](#Docker 部署)
- [三、Vercel 部署](#三、Vercel 部署)
- [四、Netlify 部署](#四、Netlify 部署)
- 五、静态托管
- - [GitHub Pages](#GitHub Pages)
- [六、Serverless 部署](#六、Serverless 部署)
- - 阿里云函数计算
  - 腾讯云函数
  - [AWS Lambda](#AWS Lambda)
- [七、Edge 部署](#七、Edge 部署)
- - [Cloudflare Workers](#Cloudflare Workers)
  - [Vercel Edge](#Vercel Edge)
- 八、环境变量
- 九、健康检查
- 十、日志与监控
- - 日志
  - 监控
- 十一、部署检查清单
- 总结

个人网站
代码写完了，怎么部署？Nuxt 支持多种部署目标：Node.js、Serverless、Edge、静态托管......选择合适的部署方案，能让你的应用更快、更稳定、更省钱。今天学习 Nuxt 的部署最佳实践。

一、构建命令

bash 复制代码

# 开发环境
pnpm dev

# 构建
pnpm build

# 预览构建结果
pnpm preview

# 生成静态站点
pnpm generate

pnpm build 会生成：

复制代码

.output/
├── public/      # 静态资源
└── server/      # 服务端代码
    └── index.mjs

二、Node.js 部署

最传统的方式，适合有服务器的情况：

bash 复制代码

# 构建
pnpm build

# 运行
node .output/server/index.mjs

PM2 管理

bash 复制代码

pnpm add -g pm2

创建 ecosystem.config.js：

js 复制代码

module.exports = {
  apps: [{
    name: 'nuxt-app',
    script: '.output/server/index.mjs',
    instances: 'max',
    exec_mode: 'cluster',
    env: {
      NODE_ENV: 'production',
      PORT: 3000,
      NUXT_HOST: '0.0.0.0'
    }
  }]
}

bash 复制代码

pm2 start ecosystem.config.js
pm2 save
pm2 startup

Docker 部署

创建 Dockerfile：

dockerfile 复制代码

# 构建阶段
FROM node:20-alpine AS builder

WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN npm install -g pnpm && pnpm install --frozen-lockfile

COPY . .
RUN pnpm build

# 运行阶段
FROM node:20-alpine

WORKDIR /app
COPY --from=builder /app/.output ./.output

ENV NODE_ENV=production
ENV NUXT_HOST=0.0.0.0
ENV PORT=3000

EXPOSE 3000

CMD ["node", ".output/server/index.mjs"]

bash 复制代码

docker build -t nuxt-app .
docker run -p 3000:3000 nuxt-app

三、Vercel 部署

最简单的部署方式，适合 SSR 应用：

连接 GitHub 仓库
自动检测 Nuxt 项目
一键部署

或用 CLI：

bash 复制代码

pnpm add -g vercel
vercel

配置 vercel.json：

json 复制代码

{
  "buildCommand": "pnpm build",
  "outputDirectory": ".output/public",
  "framework": "nuxtjs"
}

四、Netlify 部署

适合静态站点 + 函数：

bash 复制代码

pnpm add -g netlify-cli
netlify deploy --prod

配置 netlify.toml：

toml 复制代码

[build]
  command = "pnpm build"
  publish = ".output/public"

[[redirects]]
  from = "/*"
  to = "/.netlify/functions/server/:splat"
  status = 200

五、静态托管

如果不需要 SSR，可以生成静态站点：

ts 复制代码

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: false,  // 或
  nitro: {
    prerender: {
      routes: ['/', '/about', '/contact']
    }
  }
})

bash 复制代码

pnpm generate

输出到 .output/public，可以部署到：

GitHub Pages
Cloudflare Pages
阿里云 OSS
腾讯云 COS

GitHub Pages

yaml 复制代码

# .github/workflows/deploy.yml
name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - uses: pnpm/action-setup@v2
        with:
          version: 8
          
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'
          
      - run: pnpm install
      - run: pnpm generate
      
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./.output/public

六、Serverless 部署

阿里云函数计算

ts 复制代码

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    preset: 'alibaba'
  }
})

bash 复制代码

pnpm build
# 部署 .output 到函数计算

腾讯云函数

ts 复制代码

export default defineNuxtConfig({
  nitro: {
    preset: 'tencent'
  }
})

AWS Lambda

ts 复制代码

export default defineNuxtConfig({
  nitro: {
    preset: 'aws-lambda'
  }
})

七、Edge 部署

边缘部署让应用离用户更近：

Cloudflare Workers

ts 复制代码

export default defineNuxtConfig({
  nitro: {
    preset: 'cloudflare-pages'
  }
})

Vercel Edge

ts 复制代码

export default defineNuxtConfig({
  nitro: {
    preset: 'vercel-edge'
  }
})

八、环境变量

创建 .env 文件：

env 复制代码

NUXT_PUBLIC_API_BASE=https://api.example.com
DATABASE_URL=postgres://user:pass@host:5432/db
JWT_SECRET=your-secret-key

在代码中使用：

ts 复制代码

// 服务端
const dbUrl = process.env.DATABASE_URL

// 客户端 + 服务端
const apiBase = useRuntimeConfig().public.apiBase

配置：

ts 复制代码

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    // 服务端私有
    databaseUrl: process.env.DATABASE_URL,
    jwtSecret: process.env.JWT_SECRET,
    
    // 公开
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE
    }
  }
})

九、健康检查

ts 复制代码

// server/api/health.ts
export default defineEventHandler(() => {
  return {
    status: 'ok',
    timestamp: new Date().toISOString(),
    version: process.env.npm_package_version
  }
})

十、日志与监控

日志

ts 复制代码

// server/middleware/logger.ts
export default defineEventHandler((event) => {
  const start = Date.now()
  
  event.node.res.on('finish', () => {
    const duration = Date.now() - start
    console.log({
      method: getMethod(event),
      url: getRequestURL(event).pathname,
      status: event.node.res.statusCode,
      duration: `${duration}ms`
    })
  })
})

监控

集成 Sentry：

bash 复制代码

pnpm add @sentry/nuxt

ts 复制代码

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@sentry/nuxt'],
  sentry: {
    dsn: process.env.SENTRY_DSN
  }
})

十一、部署检查清单

上线前检查：

总结

部署方案对比：

方案	特点	适用场景
Node.js	完全控制、可定制	有服务器、需要复杂后端
Vercel	简单、自动部署	个人项目、快速上线
Netlify	静态+函数	博客、文档站点
Serverless	按需付费、弹性伸缩	流量波动大
Edge	极低延迟	全球用户、性能敏感
静态托管	便宜、快速	纯静态内容

下一篇聊聊性能优化，让你的网站飞起来。

入门篇三：Nuxt4组件自动导入：写代码少敲一半字

入门篇二：Nuxt 4路由自动生成：告别手动配置路由的日子