如何将带有 django 的 react.js webpack 部署到 heroku？

Posted 2023-02-24

【中文标题】如何将带有 django 的 react.js webpack 部署到 heroku？

【英文标题】：How to deploy react.js webpack with django to heroku?

【发布时间】：2017-01-31 21:14:38

【问题描述】：

我有一个 django 后端和 react.js 前端以及 webpack。我已经根据此页面在本地设置了所有内容：http://owaislone.org/blog/webpack-plus-reactjs-and-django/ 并让我的开发服务器运行，一切都很顺利。对于我的生产 webpack 文件，我复制了与网站上完全相同的文件。

但是我想部署到heroku，这就是我卡住的地方。我是否需要在生产环境中用某种 express 服务器替换我的 webpack-dev-server？

我可以只运行 django 并提供静态 javascript 文件吗？要生成这些文件，我尝试运行：“webpack webpack-config.prod.js --progress -p” 但是我收到一堆“无法解析模块'fs'”错误，但我注意到它在资产/捆绑包中生成了一个 900kb 的 js 文件。

另外，如果我尝试在本地机器（没有开发服务器）上运行“webpack webpack-config.prod.js --progress -p”并转到 django 路由，我会在控制台中得到这个：

GET http://localhost:3000/assets/bundles/main-62ddfced1c44b3270fa7.jsnet::ERR_CONNECTION_REFUSED

我花了好几个小时才让它工作，设置开发环境要快得多。我在这里做错了什么？

【问题讨论】：

你绝对不应该在生产环境中使用 webpack-dev-server - 它实际上在 readme 中说了这么多。

【参考方案1】：

如果您使用--save-dev 标志安装了任何依赖项，就像您链接到的指南所建议的那样，那么它们将不会安装在heroku 上，因为它运行npm install 并设置了生产标志。因此，如果 fs 在您的 package.json 中的 devDependencies 下，它将不会被安装。

据我所知，这里有两种选择。您可以将生成的包置于版本控制之下，以便将其推送到 heroku 或，您可以仅使用 --save 标志安装您的依赖项。如果我要在 heroku 上发布，我个人更喜欢使用 --save，然后添加一个名为 heroku-postbuild 的 package.json 脚本，它运行 webpack 并构建包。

"scripts": 
    "heroku-postbuild": "npm run dist",
,

【讨论】：

'fs' 不在开发或生产的要求中。事实上，当我尝试做“webpack webpack.config.js”（非产品配置）时，我也会得到同样的“fs”错误。

你是从命令行运行的吗？因为那时试图要求 fs 的脚本将在全局范围内寻找它。如果你把它放在一个 npm 脚本中，它实际上会在本地 node_modules/ 文件夹中查找。

您使用的是什么版本的节点？如果它与 npm v3 一起提供，那么您安装的任何模块都将直接在 node_modules 中安装其依赖项（v2 将嵌套它们）。如果是这种情况，我们可能会重新将依赖项移出devDependencies。