如何在Heroku上部署支持实时数据更新的动态React应用？

问题概述 #

• 部署React应用到Heroku时，原教程推荐的create-react-app专属Buildpack已过时，不支持heroku-22堆栈
• 改用node-js-buildpack部署，Procfile中配置命令为web: npm install -g serve && serve -s build，仅能提供静态页面，无法实现数据更新后的页面动态刷新

相关配置 #

• package.json中的React脚本配置：

"scripts": { 
  "start": "react-scripts start", 
  "build": "react-scripts build", 
  "test": "react-scripts test", 
  "eject": "react-scripts eject" 
},

• 开发环境使用yarn作为包管理器

应用动态更新逻辑 #

1. PostgreSQL设置触发器，当特定表的数据被插入或修改时，通知API服务器并告知被修改的表名
2. 同时作为WebSocket服务器的Node.js API服务器接收该通知，将被修改的表名通过通道发送给客户端
3. React客户端根据收到的表名，重新获取对应表的更新数据并刷新页面

当前状态 #

• 通过serve指令可以正常访问网站，但线上版本无法像本地环境那样，在收到新数据时自动更新页面内容
• 浏览器开发者工具的网络标签显示，客户端已成功与WebSocket建立连接

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