如何在Windows版Plesk中部署MERN应用？React部署、路由及环境变量问题求解

我之前在Plesk Windows版上部署MERN栈应用时，也碰到过几乎一模一样的问题，给你分享下亲测有效的解决步骤：

1. 部署React应用到Plesk #

Plesk并没有专门的"React应用"添加选项，不过可以通过静态资源托管或者和后端整合的方式部署：

• 本地先完成React项目的生产构建：运行npm run build，会生成一个build文件夹，里面是所有静态资源
• 如果想单独托管React：在Plesk创建Node.js应用后，找到文档根目录设置，把路径改成你的项目根目录下的build文件夹（比如你的项目放在httpdocs/my-react-app，那文档根就设为my-react-app/build），保存后Plesk会自动用nginx托管这些静态文件
• 如果想把React和Node.js后端部署在同一个应用下：把React的build文件夹复制到后端项目的public目录里，然后在后端入口文件（比如server.js）里添加代码，用Express托管静态资源：

  const path = require('path');
  app.use(express.static(path.join(__dirname, 'public/build')));
  

  这样访问根路由就能看到React应用，接口路由用/api前缀区分

2. 设置MongoDB Atlas的自定义环境变量 #

Plesk Windows版的环境变量设置藏得有点深，两种方法都能搞定：

• 方法一：在Node.js应用的设置页面，找到**"应用程序设置"**（有些版本叫"高级设置"），里面有"环境变量"板块，直接添加键值对，比如键为MONGODB_URI，值就是你的MongoDB Atlas连接字符串（记得替换用户名、密码和集群名称）
• 方法二：如果找不到环境变量选项，直接在后端项目根目录创建.env文件，写入连接字符串：

  MONGODB_URI=mongodb+srv://<你的用户名>:<你的密码>@cluster0.mongodb.net/你的数据库名?retryWrites=true&w=majority
  

  然后确保后端代码里用dotenv加载这个文件（生产环境要先安装依赖：npm install dotenv，然后在server.js顶部加require('dotenv').config()）
• 注意：如果用.env文件，要在Plesk的文件管理器里给这个文件设置正确的权限，让Node.js进程能读取它

3. 修复Node.js路由无法访问的问题 #

只有根路由能运行，其他路由404，大概率是nginx反向代理规则没配置对：

• 先确认后端代码的路由定义没问题，比如接口路由用/api/xxx的格式，本地测试能正常访问
• 在Plesk的"网站与域名"页面，找到你的域名，点击**"Apache & nginx设置"**，在"附加nginx指令"里添加以下规则：

  # 处理React路由（同域名部署时用）
  location / {
    try_files $uri $uri/ /index.html;
  }
  # 转发所有/api开头的请求到Node.js后端
  location /api/ {
    proxy_pass http://localhost:你的Node.js端口;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
  

  替换你的Node.js端口为Plesk里Node.js应用设置的端口（一般在"应用程序设置"里能看到）
• 保存配置后重启nginx和Node.js应用，然后测试接口路由，应该就能正常访问了
• 如果还是不行，去Plesk的Node.js应用设置里查看日志，看有没有端口占用、路由错误之类的报错信息

按照这些步骤来，应该就能顺利部署你的MERN应用了。

内容的提问来源于stack exchange，提问作者Abhishek Kokate