如何在Heroku部署Create React App生成的build文件夹？无需云端构建

这完全可行，具体操作步骤如下：

1. 本地生成build文件夹 #

先在本地执行构建命令生成完整的静态文件目录：

npm run build

确认build/目录下包含index.html、css/、js/等所有静态资源文件。

2. 配置Heroku静态文件规则 #

在项目根目录创建static.json文件，内容如下（适配单页应用路由，非SPA场景可简化配置）：

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

该文件用于指定Heroku以build/为网站根目录，并处理单页应用的路由跳转问题，避免刷新页面出现404错误。

3. 让Git跟踪build文件夹 #

打开项目根目录的.gitignore文件，删除build/这一行（如果存在），确保Git会将build文件夹纳入版本控制，后续能同步到Heroku。

4. 设置Heroku静态资源Buildpack #

通过Heroku CLI指定使用静态文件专用的Buildpack，彻底跳过云端构建流程：

heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git

5. 两种部署方式 #

本地部署 #

将build文件夹提交到Git并推送到Heroku：

git add build/
git commit -m "Add pre-built static files for deployment"
git push heroku main

点击Heroku「部署」按钮部署 #

确保你的GitHub仓库中已包含build/文件夹、static.json文件，并且已配置好上述Buildpack。此时点击Heroku的「部署」按钮，平台会直接使用仓库中的预构建文件，不会在云端执行构建步骤。

内容的提问来源于stack exchange，提问作者Isak La Fleur