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

Question

我有一个 Flask 应用程序，它也通过从/build我运行时生成的文件夹中提供文件来为 React 前端提供服务npm run build。

我的目录结构：

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

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

这有效，但这绝对是一种痛苦。当我们创建 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在您的项目根目录中创建一个（与 server/ 和 client/ 同级）。其中，添加（其他内容package.json省略）：

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

Heroku 将自动选取该构建脚本并运行指定的命令。它还将在 client/ 目录中缓存 node_modules。与此相关的文档有点稀少，但您可以在此处和此处找到相关信息。

您还需要从 Git 中删除并忽略 JS 构建目录，因为不再需要它们。只需确保在 Heroku 运行 postbuild 脚本时存在用于存储 JS 构建工件的目录（/ies）。

我在这里写了一个更深入的指南。