宝塔面板如何为Nuxt.js的服务端SSR项目配置持续长久运行_通过PM2启动程序并将其映射至外网真实域名

落瑶酱_7271

落瑶酱_7271

2026-04-12

942人浏览

原创

宝塔面板不直接管理Nuxt.js SSR进程,须用PM2启动守护.output/server/index.mjs并配置NUXT_HOST=0.0.0.0和NODE_ENV=production,再通过Nginx反向代理(含X-Forwarded-Proto等关键头)对外提供服务,缺任一环节将导致进程退出或无法访问。

宝塔面板如何为nuxt.js的服务端ssr项目配置持续长久运行_通过pm2启动程序并将其映射至外网真实域名

宝塔面板本身不直接管理 Nuxt.js 的 SSR 进程,必须靠 PM2 启动并守护 nuxt start(或 node .output/server/index.mjs),再用 Nginx 反向代理把域名流量导过去。漏掉任一环节,服务都会在终端关闭后退出,或无法被外网访问。

确认 Nuxt 项目已构建为 SSR 模式并生成 .output 目录

Nuxt 3 默认使用 nitro 构建器,SSR 输出路径是 .output,不是旧版的 .nuxt/dist/server。运行前必须先执行构建命令:

  • nuxt build(开发机上执行,生成 .output)
  • 上传整个项目目录(含 .output、package.json、nuxt.config.ts)到服务器,例如 /www/wwwroot/my-nuxt-app
  • 确保服务器已安装 Node.js(≥18.12.0)且版本与本地开发一致,否则 .output/server/index.mjs 可能因 ESM 语法报错
  • 不要上传 node_modules —— 宝塔的 PM2 管理器会自动根据 package.json 安装依赖,但需手动勾选“安装依赖”选项

用宝塔 PM2 管理器启动并守护 Nuxt SSR 进程

宝塔的 PM2 插件只是 UI 封装,底层仍调用 pm2 start。关键在于入口文件和环境变量:

  • 在 PM2 管理器中,“应用路径”填 /www/wwwroot/my-nuxt-app(项目根目录,不是 .output)
  • “启动脚本”填 .output/server/index.mjs(Nuxt 3.9+ 的标准 SSR 入口)
  • 务必在“环境变量”栏添加:NODE_ENV=production 和 NUXT_HOST=0.0.0.0(否则默认只监听 127.0.0.1,PM2 启动后外部无法连通)
  • “实例数”建议设为 1(SSR 不适合多进程共享端口,交由 Nginx 做负载)
  • 启动后检查 PM2 日志:若报 ERR! Cannot find module 'vue',说明 node_modules 缺失或未正确安装,需进终端手动 cd /www/wwwroot/my-nuxt-app && npm ci --omit=dev

Nginx 配置反向代理时必须透传 Host 和协议头

Nuxt SSR 依赖正确的 Host 和 X-Forwarded-Proto 头来生成绝对 URL(如 、跳转地址)。Nginx 默认不转发这些,会导致页面资源 404 或重定向循环:

arcgis-js
arcgis-js

提供 ArcGIS Maps SDK for JavaScript 开发辅助,涵盖 2D/3D 地图视图、图层管理、数据可视化、空间分析等功能模块的参考和示例指导。

下载
  • 在网站配置的「配置文件」中,定位到 location / { ... } 块
  • 替换为以下内容(注意端口要和 .output/server/options.mjs 中的 port 一致,默认是 3000):
location / {
  proxy_pass http://127.0.0.1:3000;
  proxy_http_version 1.1;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header X-Forwarded-Proto $scheme;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
}
  • 删掉所有其他 location 规则(比如旧的 PHP 或静态文件规则),避免冲突
  • 保存后点击「重载配置」,不要只点「保存」——否则 Nginx 不会生效

域名解析与 HTTPS 必须与 SSR 行为对齐

Nuxt 在 SSR 阶段就生成 HTML,如果域名解析未生效或 HTTPS 强制跳转配置不当,用户会看到空白页或混合内容警告:

  • 确保域名已解析到服务器 IP,且宝塔「网站」列表里该站点状态为「已启动」
  • 申请 SSL 证书时勾选「强制 HTTPS」,但必须等 Nginx 配置生效、PM2 进程稳定运行后再启用——否则 301 跳转会把健康检查请求也重定向,导致 PM2 误判进程异常
  • 若使用泛域名(如 *.example.com),Nuxt 配置中需显式设置 app.baseURL = 'https://example.com',否则 useRouter().currentRoute.value.fullPath 可能返回错误路径
  • 检查浏览器开发者工具 Network 标签页:首屏 HTML 返回状态码应为 200,且响应头含 x-powered-by: Nitro,而非 x-powered-by: Express(后者说明你误用了开发服务器 nuxt dev)

最常被忽略的是 NUXT_HOST=0.0.0.0 和 proxy_set_header X-Forwarded-Proto 这两项。前者让进程监听所有网卡,后者让 Nuxt 知道当前是 HTTPS 请求——缺一不可,否则 SEO 友好链接和第三方登录回调大概率失败。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

js 宝塔面板

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
nginx 重启
nginx 重启

nginx重启对于网站的运维来说是非常重要的,根据不同的需求,可以选择简单重启、平滑重启或定时重启等方式。本专题为大家提供nginx重启的相关的文章、下载、课程内容,供大家免费下载体验。

2023.07.27

423

5

nginx 配置详解
nginx 配置详解

Nginx的配置是指设置和调整Nginx服务器的行为和功能的过程。通过配置文件,可以定义虚拟主机、HTTP请求处理、反向代理、缓存和负载均衡等功能。Nginx的配置语法简洁而强大,允许管理员根据自己的需要进行灵活的调整。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2023.08.04

3867

6

nginx配置详解
nginx配置详解

NGINX与其他服务类似,因为它具有以特定格式编写的基于文本的配置文件。本专题为大家提供nginx配置相关的文章,大家可以免费学习。

2023.08.04

6665

6

tomcat和nginx有哪些区别
tomcat和nginx有哪些区别

tomcat和nginx的区别:1、应用领域;2、性能;3、功能;4、配置;5、安全性;6、扩展性;7、部署复杂性;8、社区支持;9、成本;10、日志管理。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.02.23

601

5

nginx报404怎么解决
nginx报404怎么解决

当访问 nginx 网页服务器时遇到 404 错误,表明服务器无法找到请求资源,可以通过以下步骤解决:1. 检查文件是否存在且路径正确;2. 检查文件权限并更改为 644 或 755;3. 检查 nginx 配置,确保根目录设置正确、没有冲突配置等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.07.09

1496

5

Nginx报404错误解决方法
Nginx报404错误解决方法

解决方法:只需要加上这段配置:try_files $uri $uri/ /index.html;即可。想了解更多Nginx的相关内容,可以阅读本专题下面的文章。

2024.08.07

3978

3

nginx部署php项目教程汇总
nginx部署php项目教程汇总

本专题整合了nginx部署php项目教程汇总,阅读专题下面的文章了解更多详细内容。

2026.01.13

122

12

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

2026.01.13

537

23

Nginx跨平台安装实操指南:Windows、macOS与Linux环境快速搭建
Nginx跨平台安装实操指南:Windows、macOS与Linux环境快速搭建

本指南详解Nginx在Windows、macOS及Linux系统的安装全流程。涵盖官方包解压、Homebrew一键部署、APT/YUM源配置及Docker容器化方案。无论新手或开发者,均可快速搭建运行环境,掌握跨平台核心指令,为后续配置与调优奠定坚实基础。

2026.03.16

179

12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WEB前端教程【HTML5+CSS3+JS】
WEB前端教程【HTML5+CSS3+JS】

共101课时 | 21.2万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 4.9万人学习