reactjs - 在 Heroku 中运行 npm run build 来为 Flask 后端 react 前端应用程序提供服务

Question

我有一个 Flask 应用程序，它也通过提供来自 /build 的文件来提供 React 前端。运行时生成的文件夹 npm run build .
我的目录结构:

.
|-client/
|  |build/
|    |static/
|
|-server/
|  |main.py

为了将我的应用程序部署到 Heroku，我必须...

cd 进入客户端

运行 npm run build 以生成 React 应用程序的新静态构建

将更改提交到 git

这有效，但这绝对是一种痛苦。当我们创建 PR 时，它会在 Github 中产生巨大的差异。
我想知道，是否可以运行 npm run build在 Heroku 管道中？我认为 Procfile 是要走的路。我已经尝试了一些事情，比如添加

npm: cd client && npm run build
web: flask db upgrade; gunicorn wsgi:app

无济于事。

Answer 1

这更像是 Heroku 问题而不是 Flask 问题。
是的，可以运行 npm run build作为部署的一部分。
确保您的应用程序使用 Node.js buildpack 和 Python buildpack。然后创建一个 package.json在您的项目根目录中(服务器/和客户端/的兄弟)。其中，添加(package.json的其他内容省略):

{
  "cacheDirectories": [
    "client/node_modules"
  ],
  "scripts": {
    "heroku-postbuild": "cd client && npm install && npm run build"
  }
}

Heroku 将自动选取该构建脚本并运行指定的命令。它还将在 client/目录中缓存 node_modules。围绕这个的文档有点稀少，但你可以找到相关信息 here和 here .
您还需要从 Git 中删除并忽略 JS 构建目录，因为不再需要它们。只需确保在 Heroku 运行 postbuild 脚本时存在用于存储 JS 构建工件的目录(/ies)。
我在 here 上写了一篇关于此的更深入的指南。 .