news 2026/6/23 3:48:32

Nuxt 4 生产环境部署指南 (Node.js + Nginx)

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Nuxt 4 生产环境部署指南 (Node.js + Nginx)

本指南适用于 Nuxt 4 项目在 Linux (CentOS/Ubuntu) 环境下的 SSR(服务端渲染)部署。

📋 前置要求

服务器环境

  • 操作系统:Linux (Ubuntu 20.04+ / CentOS 7+ / Debian 11+)
  • Node.js:>= 20.10.0 (Nuxt 4 强依赖高版本 Node)
  • Nginx:>= 1.18
  • PM2:Node.js 进程管理工具
  • 硬件建议:内存 >= 2GB,磁盘 >= 10GB 可用空间

⚙️ 配置 API 地址与环境变量

Nuxt 4 默认使用 Nitro 引擎。部署前需区分SSR 端调用浏览器端调用

修改 ecosystem.config.cjs (推荐)

在项目根目录创建或编辑此文件,通过环境变量注入配置:

module.exports={apps:[{name:'nuxt-app',port:3000,host:'127.0.0.1',script:'./.output/server/index.mjs',exec_mode:'cluster',// 开启集群模式instances:'max',// 根据 CPU 核心数启动实例env:{NODE_ENV:'production',// SSR 模式下服务器访问后端接口的基准地址NUXT_PUBLIC_API_BASE:'https://api.yourdomain.com',}}]}

注意:NUXT_PUBLIC_API_BASE对应代码中的useRuntimeConfig().public.apiBase


🔧 部署步骤

1. 本地构建 (Local)

在开发机器执行,确保构建产物是最新的:

# 构建 Nuxt 4 项目pnpmbuild# 压缩打包产物 (减少传输时间)tar-czf release.tar.gz .output ecosystem.config.cjs

2. 上传与解压 (Server)

将压缩包上传到服务器/var/www/nuxt-app目录:

# 示例:使用 scp 上传scprelease.tar.gz user@your-server-ip:/var/www/nuxt-app/# 登录服务器解压cd/var/www/nuxt-apptar-xzf release.tar.gz

3. 启动应用 (PM2)

首次部署需安装 PM2 并启动:

# 全局安装 PM2npminstall-g pm2# 启动应用pm2 start ecosystem.config.cjs# 设置开机自启pm2 startup pm2 save

🌐 Nginx 核心配置

针对 CentOS/Ubuntu 系统,建议创建独立的配置文件:/etc/nginx/conf.d/nuxt.conf。该配置实现了动静分离API 转发

# 定义 Node 应用的上游 upstream nuxt_backend { server 127.0.0.1:3000; keepalive 64; } server { listen 80; server_name yourdomain.com; # 换成实际域名 # 1. 静态资源直接由 Nginx 响应 (提升性能) # 对应 Nuxt 打包后的 JS/CSS location /_nuxt/ { alias /var/www/nuxt-app/.output/public/_nuxt/; expires 365d; add_header Cache-Control "public, max-age=31536000, immutable"; access_log off; } # 2. 业务 API 转发 # 解决浏览器端访问 /api 时的跨域问题 location /api/ { proxy_pass http://api.internal-server.com/; # 转发到真实后端 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } # 3. 主程序入口 location / { # 尝试直接读取 public 下的静态文件 (favicon.ico 等) root /var/www/nuxt-app/.output/public; try_files $uri $uri/ @ssr; } # 4. SSR 渲染出口 location @ssr { proxy_pass http://nuxt_backend; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_cache_bypass $http_upgrade; client_max_body_size 20m; } }

🔄 自动化更新脚本 (deploy.sh)

在本地根目录准备deploy.sh,实现一键发布:

#!/bin/bash# 配置项SERVER_USER="root"SERVER_IP="1.2.3.4"DEPLOY_PATH="/var/www/nuxt-app"echo"🚀 开始构建..."pnpmbuildecho"📦 正在打包..."tar-czf release.tar.gz .output ecosystem.config.cjsecho"📤 上传服务器..."scprelease.tar.gz$SERVER_USER@$SERVER_IP:$DEPLOY_PATHecho"🔄 重启服务..."ssh$SERVER_USER@$SERVER_IP"cd$DEPLOY_PATH&& tar -xzf release.tar.gz && pm2 reload nuxt-app"echo"✨ 部署完成!"

⚠️ 常见故障排查 (CentOS 专项)

1. Nginx 502 错误 (SELinux 问题)

在 CentOS 上,SELinux 默认禁止 Nginx 连接本地端口。

# 检查是否因为权限被拦sudogetsebool httpd_can_network_connect# 开启权限sudosetsebool -P httpd_can_network_connect1

2. 静态资源 403 Forbidden

确保 Nginx 用户(通常是nginxwww-data)对项目目录有读取权限。

sudochmod-R755/var/www/nuxt-app

3. PM2 日志查看

如果应用运行不正常,通过日志定位:

pm2 logs nuxt-app --lines100

🔒 HTTPS 配置 (使用 Certbot)

sudodnfinstallcertbot python3-certbot-nginxsudocertbot --nginx -d yourdomain.com

📂 目录结构参考

/var/www/nuxt-app/ ├── .output/ # 构建产物 (SSR 入口 & 静态资源) │ ├── server/ # Nitro Server 逻辑 │ └── public/ # 浏览器访问的静态文件 ├── ecosystem.config.cjs # PM2 配置文件 └── release.tar.gz # 备份/传输包
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/23 5:16:15

设备数据采集效率提升300%?看这家头部企业Agent部署实战

第一章:工业互联网 Agent 的设备管理在工业互联网架构中,Agent 作为边缘侧的核心组件,承担着设备接入、状态监控与指令执行的关键职责。它运行于工业网关或本地控制器之上,实现物理设备与云端平台之间的双向通信与数据同步。设备注…

作者头像 李华
网站建设 2026/6/23 18:27:17

【dz-996】物联网的家居环境预警监测系统

摘要 随着城市化进程的加快和居民安全意识的提升,家居环境的安全监测与智能预警对保障家庭生命财产安全具有重要意义。传统的家居安全管理多依赖人工检查和独立报警设备,存在监测不全面、响应滞后、联动性差等问题,难以满足现代化家居的安全…

作者头像 李华
网站建设 2026/6/23 18:23:59

【dz-998】导盲犬多功能喂食器的设计与实现

摘要 导盲犬作为视障人士的重要辅助伙伴,其健康状况与饮食管理密切相关。传统的喂食方式依赖人工操作,存在喂食时间不规律、食物和水量把控不准、环境不适影响健康等问题,难以满足导盲犬科学养护的需求。​ 基于 STM32F103C8T6 单片机的导盲…

作者头像 李华
网站建设 2026/6/23 18:20:05

终极Windows动态桌面指南:打造个性化视频壁纸的完整教程

终极Windows动态桌面指南:打造个性化视频壁纸的完整教程 【免费下载链接】DreamScene2 一个小而快并且功能强大的 Windows 动态桌面软件 项目地址: https://gitcode.com/gh_mirrors/dr/DreamScene2 厌倦了单调的静态桌面背景?想要让你的电脑桌面真…

作者头像 李华
网站建设 2026/6/23 8:20:56

Mem Reduct系统优化评测:告别卡顿的智能性能管家

Mem Reduct系统优化评测:告别卡顿的智能性能管家 【免费下载链接】memreduct Lightweight real-time memory management application to monitor and clean system memory on your computer. 项目地址: https://gitcode.com/gh_mirrors/me/memreduct 还在为电…

作者头像 李华
网站建设 2026/6/23 6:15:07

Luckysheet单元格数据验证功能深度解析:从入门到实战完整指南

还在为表格数据混乱、格式错误而烦恼吗?你是否遇到过员工填写表单时输入无效的手机号,或者财务报表中出现不合理的数值范围?这些问题不仅影响数据质量,还会给后续的数据分析带来巨大困扰。Luckysheet的数据验证功能正是解决这些问…

作者头像 李华