Heroku 在通过 Django 部署之前构建 React 应用程序

Posted 2023-02-24

【中文标题】Heroku 在通过 Django 部署之前构建 React 应用程序

【英文标题】：Heroku build React app before deploying through Django

【发布时间】：2020-02-26 14:28:36

【问题描述】：

我成功地将我的 Django 项目部署到 Heroku。但我希望能够在部署之前自动构建 React。

React 应用程序是通过 Django 提供的，所以我的模板和 Django 应用程序的静态文件夹中有 React 的捆绑文件。

项目结构如下所示：

react/
  build/
  components/
  App.js
  package.json
  ...
django/
  templates/
  static/
  ...
Procfile
requirements.txt
Pipfile

我在同一个存储库中同时拥有 React 和 Django 项目，我想在部署 Django 之前自动运行 npm run build。

我设置了构建脚本以将捆绑的文件从 React 移动到 Django。

根据我的阅读，我需要添加 NodeJS buildpack，但我不知道如何将其设置为在 Python buildpack 之前运行。

基本上，NodeJS 进程应该只是构建我的 React 应用程序然后终止。之后，Python 进程应该启动并部署 Django 项目。

一种解决方案是使用 Docker 并将该映像部署到 Heroku。 但是，有没有更简单的方法？

【参考方案1】：

您可以在 heroku 中添加索引构建包。查看 here 为您的项目添加多个构建包。

我写了一个关于如何deploy a React + Django app to Heroku 的简单教程。有兴趣的可以看看。在您的情况下，您只需要添加构建包的说明。

$ heroku buildpacks:add --index 1 heroku/nodejs
$ heroku buildpacks:add --index 2 heroku/python

您不需要设置任何额外的命令来构建React 应用程序。 Heroku 会自动从您的 package.json 文件（如果它在项目根目录中）安装并运行 build 脚本。

【讨论】：

我在 react/ 文件夹中有 package.json，所以它不在项目根目录中。我可以告诉 Heroku nodejs buildpack 的工作目录吗？如果没有，我可能会尝试更改结构，以便 package.json 在根目录中

您可以通过修改Procfile 来实现这一点。 This 可能会对您有所帮助。

【参考方案2】：

我找到了一种方法。 我将 nodejs buildpack 添加为第一个，然后在根目录中创建了一个 package.json 文件：

  "name": "myapp",
  "version": "1.0.0",
  "scripts": 
    "build": "cd react && npm install && npm run build"
  ,
  "dependencies": ,
  "devDependencies": ,
  "cacheDirectories": [
    "node_modules",
    "react/node_modules"
  ]

Heroku 在 root 目录中寻找 package.json 并自动运行 build 命令。