在 Heroku 上部署 React 和 Django

Posted 2023-02-22

【中文标题】在 Heroku 上部署 React 和 Django

【英文标题】：Deploying React and Django on Heroku

【发布时间】：2017-05-06 02:16:46

【问题描述】：

一段时间以来，我一直在努力解决这个问题，但似乎无法弄清楚。我正在尝试将 Django 应用程序部署到前端使用 react 的 heroku。我对反应很陌生，所以我可能在这里遗漏了一些基本的东西。

我现在有一个 heroku 应用程序，它有两个 buildpacks（heroku/nodejs 和 heroku/python）。为了在本地运行应用程序，我在端口 3000 上使用 python manage.py runserver 和 node server.js。我知道 Heroku 只允许一个端口接收 HTTP 请求，所以我认为问题就在那里。

我的主要问题是：要在 Heroku 应用程序上使用 Django 和 React，我需要有两个单独的应用程序（一个用于 django，一个用于 react）还是我可以只维护一个应用程序？

我一直在搜索this repository，似乎只使用了一个应用程序。但是我看不到节点服务器是如何工作的。

感谢任何澄清或推动正确的方向！如果我需要澄清我的问题，请告诉我。

编辑： 我尝试过的其他几件事：

关注this tutorial 将heroku-postbuild 脚本添加到启动节点服务器的package.json 文件中。这会阻止构建过程继续启动 django 应用程序。 我也遇到了this blog post，但我似乎得到了关于应用程序是否可以在同一个 Heroku 应用程序中或必须不同（如 #1 中的教程）的相互矛盾的信息。

【问题讨论】：

我只在一个应用程序中实现了 React 和 Django，使用 Django Rest Framework 进行前端 API 调用。正如@taylorc93 所说，您只需要Node 进行服务器端渲染。

嘿，你发现了吗？我仍然有问题...

【参考方案1】：

除非您计划实现服务器端渲染（如果您不熟悉反应，则不建议这样做），您只需要一台服务器。

您缺少的是一种生成包含所有反应代码的 javascript 包的方法。然后，您可以像处理任何其他 html/CSS/JS 文件一样将该捆绑包发送到客户端。

尝试使用webpack 之类的工具来生成 javascript 包。如果可能，将其放在heroku-postbuild 步骤中，如果没有，只需在部署更新之前生成捆绑包

【讨论】：

感谢您的回复！我目前正在使用 webpack 和 django-webpack-loader。捆绑包已生成，但我认为我没有正确地为它们提供服务。

嗯...您是否收到任何错误消息？你能发布你的 webpack 配置 + 相关的 django 设置（owaislone.org/blog/webpack-plus-reactjs-and-django/#settings-py）吗？

是否提供其他静态文件？如果您只是将一个带有console.log("hello world") 的javascript 文件放入并尝试在您的HTML 中提供该文件会怎样。它有效吗？如果不是，则问题可能与 Django 如何提供静态文件有关。

如果你最终做服务器端渲染，你仍然只需要一台服务器。我写了一篇博客文章概述了这一点：blog.victorpontis.com/server-side-react