文章目录一、构建命令二、Node.js 部署PM2 管理Docker 部署三、Vercel 部署四、Netlify 部署五、静态托管GitHub Pages六、Serverless 部署阿里云函数计算腾讯云函数AWS Lambda七、Edge 部署Cloudflare WorkersVercel Edge八、环境变量九、健康检查十、日志与监控日志监控十一、部署检查清单总结个人网站代码写完了怎么部署Nuxt 支持多种部署目标Node.js、Serverless、Edge、静态托管……选择合适的部署方案能让你的应用更快、更稳定、更省钱。今天学习 Nuxt 的部署最佳实践。一、构建命令# 开发环境pnpmdev# 构建pnpmbuild# 预览构建结果pnpmpreview# 生成静态站点pnpmgeneratepnpm build会生成.output/ ├── public/ # 静态资源 └── server/ # 服务端代码 └── index.mjs二、Node.js 部署最传统的方式适合有服务器的情况# 构建pnpmbuild# 运行node.output/server/index.mjsPM2 管理pnpmadd-gpm2创建ecosystem.config.jsmodule.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}}]}pm2 start ecosystem.config.js pm2 save pm2 startupDocker 部署创建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 --frombuilder /app/.output ./.output ENV NODE_ENVproduction ENV NUXT_HOST0.0.0.0 ENV PORT3000 EXPOSE 3000 CMD [node, .output/server/index.mjs]dockerbuild-tnuxt-app.dockerrun-p3000:3000 nuxt-app三、Vercel 部署最简单的部署方式适合 SSR 应用连接 GitHub 仓库自动检测 Nuxt 项目一键部署或用 CLIpnpmadd-gvercel vercel配置vercel.json{buildCommand:pnpm build,outputDirectory:.output/public,framework:nuxtjs}四、Netlify 部署适合静态站点 函数pnpmadd-gnetlify-cli netlify deploy--prod配置netlify.toml[build] command pnpm build publish .output/public [[redirects]] from /* to /.netlify/functions/server/:splat status 200五、静态托管如果不需要 SSR可以生成静态站点// nuxt.config.tsexportdefaultdefineNuxtConfig({ssr:false,// 或nitro:{prerender:{routes:[/,/about,/contact]}}})pnpmgenerate输出到.output/public可以部署到GitHub PagesCloudflare Pages阿里云 OSS腾讯云 COSGitHub Pages# .github/workflows/deploy.ymlname:Deploy to GitHub Pageson:push:branches:[main]jobs:build-and-deploy:runs-on:ubuntu-lateststeps:-uses:actions/checkoutv4-uses:pnpm/action-setupv2with:version:8-uses:actions/setup-nodev4with:node-version:20cache:pnpm-run:pnpm install-run:pnpm generate-uses:peaceiris/actions-gh-pagesv3with:github_token:${{secrets.GITHUB_TOKEN}}publish_dir:./.output/public六、Serverless 部署阿里云函数计算// nuxt.config.tsexportdefaultdefineNuxtConfig({nitro:{preset:alibaba}})pnpmbuild# 部署 .output 到函数计算腾讯云函数exportdefaultdefineNuxtConfig({nitro:{preset:tencent}})AWS LambdaexportdefaultdefineNuxtConfig({nitro:{preset:aws-lambda}})七、Edge 部署边缘部署让应用离用户更近Cloudflare WorkersexportdefaultdefineNuxtConfig({nitro:{preset:cloudflare-pages}})Vercel EdgeexportdefaultdefineNuxtConfig({nitro:{preset:vercel-edge}})八、环境变量创建.env文件NUXT_PUBLIC_API_BASEhttps://api.example.com DATABASE_URLpostgres://user:passhost:5432/db JWT_SECRETyour-secret-key在代码中使用// 服务端constdbUrlprocess.env.DATABASE_URL// 客户端 服务端constapiBaseuseRuntimeConfig().public.apiBase配置// nuxt.config.tsexportdefaultdefineNuxtConfig({runtimeConfig:{// 服务端私有databaseUrl:process.env.DATABASE_URL,jwtSecret:process.env.JWT_SECRET,// 公开public:{apiBase:process.env.NUXT_PUBLIC_API_BASE}}})九、健康检查// server/api/health.tsexportdefaultdefineEventHandler((){return{status:ok,timestamp:newDate().toISOString(),version:process.env.npm_package_version}})十、日志与监控日志// server/middleware/logger.tsexportdefaultdefineEventHandler((event){conststartDate.now()event.node.res.on(finish,(){constdurationDate.now()-startconsole.log({method:getMethod(event),url:getRequestURL(event).pathname,status:event.node.res.statusCode,duration:${duration}ms})})})监控集成 Sentrypnpmaddsentry/nuxt// nuxt.config.tsexportdefaultdefineNuxtConfig({modules:[sentry/nuxt],sentry:{dsn:process.env.SENTRY_DSN}})十一、部署检查清单上线前检查环境变量配置正确数据库连接正常API 接口可用静态资源加载正常错误页面友好日志记录完整监控告警配置HTTPS 证书有效CDN 加速配置备份策略就绪总结部署方案对比方案特点适用场景Node.js完全控制、可定制有服务器、需要复杂后端Vercel简单、自动部署个人项目、快速上线Netlify静态函数博客、文档站点Serverless按需付费、弹性伸缩流量波动大Edge极低延迟全球用户、性能敏感静态托管便宜、快速纯静态内容下一篇聊聊性能优化让你的网站飞起来。相关文章入门篇三Nuxt4组件自动导入写代码少敲一半字入门篇二Nuxt 4路由自动生成告别手动配置路由的日子延伸阅读nuxt4完整系列持续更新中。。欢迎来逛逛内容有帮助点赞、收藏、关注三连评论区等你