React应用在Heroku无法运行，如何不使用付费dynos完成部署？

针对2022年11月Heroku免费Eco Dynos规则变更后React应用无法正常运行的问题，以下是几种无需付费的部署方案：

1. 采用静态站点部署（推荐） #

React项目构建后生成的build目录包含纯静态资源，无需运行Node.js服务，适配Eco Dynos的限制：

• 在项目根目录创建static.json配置文件，内容如下：

  {
    "root": "build/",
    "clean_urls": false,
    "routes": {
      "/**": "index.html"
    }
  }
  

• 设置Heroku静态Buildpack：

  heroku buildpacks:set heroku/static
  

• 提交代码并部署：

  git add .
  git commit -m "配置静态站点部署"
  git push heroku main
  

2. 优化Node.js服务启动流程（若需配合后端） #

如果你的React应用依赖Node.js后端，需优化启动速度避免触发Eco Dynos的启动超时：

• 修改package.json的脚本，确保启动命令直接运行编译后的静态资源，而非实时构建：

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

• 安装serve依赖：

  npm install serve --save
  

• 确保Heroku使用Node.js Buildpack，启动流程需控制在30秒内完成。

3. 合理利用免费额度 #

Eco Dynos每月提供550小时免费运行时长，单个应用仅部署1个dyno时，可通过以下方式控制时长：

• 开启Dyno自动休眠（默认已开启）：应用1小时无访问会自动休眠，再次访问时唤醒，减少无效运行时长。

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