如何在Heroku上部署React+Strapi+MongoDB架构的全栈应用？

双文件夹结构的Heroku适配性 #

你当前根目录拆分client和server的结构无法直接在Heroku部署，Heroku默认单应用仅支持运行一个服务进程，无法同时启动React前端和Strapi后端两个服务，可选择两种调整方式：

• 拆分双应用部署：前端、后端分别创建独立的Heroku应用部署，前端生产构建时将接口请求地址指向后端应用的公开域名即可
• 单应用合并部署：将React打包后的静态产物全部移入Strapi的public目录，由Strapi同时提供静态资源访问和后端接口服务，仅需要部署一个Strapi应用即可，适合低流量的小型项目使用

Strapi非持久化存储的解决方案 #

你了解到的限制是完全准确的：

如果将后端部署到类似Heroku这类不提供服务器持久化存储的服务商处，Strapi默认的本地服务器上传功能将无法正常使用，因为服务器上的文件会被定期自动清理。

要解决这个问题不需要调整整体部署架构，直接替换Strapi的上传存储逻辑即可：

• 安装Strapi官方兼容的云存储适配器，替换默认的本地存储实现
• 在Strapi后台插件配置中填入对应对象存储服务的访问凭证、存储桶配置
• 后续所有用户上传的资源都会直接存储到第三方对象存储服务中，不受Heroku实例文件定期清理的影响

最佳部署方案推荐 #

根据项目规模可以选择不同的部署策略：

• 个人开发/小流量项目：
  1. MongoDB直接使用云托管的MongoDB服务，不需要在Heroku本地部署数据库
  2. 配置好Strapi的云存储适配器后，将Strapi后端部署到Heroku
  3. React前端可以单独部署为另一个Heroku应用，也可以打包后合并到Strapi部署降低成本
• 中大型/高流量项目：
  1. 前后端拆分独立部署，前端生产构建后走CDN加速分发，降低后端服务压力
  2. 数据库、对象存储均使用独立的云服务实例，按需扩容配置
  3. 可根据访问量灵活调整各模块的资源配比，扩展性更强

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