如何将MERN Stack应用部署至生产环境？寻求合适的生产部署平台

生产级部署平台推荐 #

• Vercel：对React前端支持极佳，同时兼容Node.js后端部署，可一键关联Git仓库实现自动构建。MERN栈可分开部署前后端，也能利用Vercel Serverless Functions整合后端，适合小到中流量的生产场景。
• Render：全托管平台，支持Node.js后端、React前端部署，可搭配外部MongoDB Atlas或自身托管的数据库，免费版即可满足小流量生产需求，部署流程简单直观。
• DigitalOcean App Platform：性能稳定的全栈部署平台，可搭配DigitalOcean托管的MongoDB，按资源使用计费，适合有一定流量规模的生产项目，支持自定义配置。
• AWS Elastic Beanstalk：适合需要高度自定义配置的中大型项目，可部署Node.js后端，前端托管在S3+CloudFront，AWS生态完善，能满足复杂业务的扩展需求。

Heroku部署React应用的修复步骤 #

如果是前后端分离的React项目，按以下流程操作：

1. 安装静态文件服务器依赖：npm install --save serve
2. 修改package.json中的脚本，添加构建和启动命令：

   "scripts": {
     "start": "serve -s build",
     "build": "react-scripts build",
     "heroku-postbuild": "npm run build"
   }
   

3. 在项目根目录创建Procfile，内容为：web: npm start
4. 执行部署命令：

   heroku create
   git add .
   git commit -m "Deploy React app"
   git push heroku main
   

如果是前后端同项目的MERN应用，需确保后端服务器能托管前端静态文件：

1. 在后端server.js中添加静态文件托管逻辑：

   const path = require('path');
   app.use(express.static(path.join(__dirname, 'client/build')));
   app.get('*', (req, res) => {
     res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
   });
   

2. 修改package.json脚本，让Heroku先构建前端：

   "scripts": {
     "start": "node server.js",
     "heroku-postbuild": "cd client && npm install && npm run build"
   }
   

3. 再执行上述部署命令即可。

内容的提问来源于stack exchange，提问作者daniel kalenga