使用 Heroku 部署 React 应用程序 + 节点服务器答案

【问题标题】：Deploy a React app + Node server with Heroku使用 Heroku 部署 React 应用程序 + 节点服务器
【发布时间】：2020-04-18 14:04:12
【问题描述】：

我想部署一个项目（React 应用程序 + 节点服务器），但我是部署新手，

我想知道：我是否需要将 React 应用程序放在 Github 存储库中，而将 Node 服务器放在另一个库中，或者我可以将所有内容部署在一个库中？

目前，我有 1 个 Github 存储库，其中包含一个文件夹“前端”和另一个“后端”，

我想让我的 React 应用在 -> nameofmyapp.herokuapp.com 和节点服务器 -> api-nameofmyapp.herokuapp.com，

如果有人有想法...谢谢

【问题讨论】：

标签： node.js reactjs heroku deployment

【解决方案1】：

虽然理论上这不是问题，但我建议您考虑将事情保留在一个域上，原因是额外的延迟和连接问题以及您面临的路径问题。在我看来，理想情况下，您只想在应用程序名称前加上“后端”或类似名称，在这种情况下，我会考虑在我控制的域上设置子域，即 mydomain.com 和后端.mydomain.com。在 Heroku 上开发时，这个模型可能会被证明是棘手的，因为每个“站点”或应用程序都是独立的，并且实际上并不打算在它们最肯定可以一起工作的情况下一起工作。考虑在您的应用程序上为“后端”设置单独的路由和端点，类似于您的前端登录，然后当您完成应用程序的开发并且很高兴您可以注册您的域名并将其指向您的应用程序并指向一个子域，即后端.mysite.com 或 login.mysite.com 到 Heroku 上的端点，即 mysite.com/backend。除非您有特定的理由将它们分离到具有单独源代码控制和 url 的自己的存储库中，否则可能会使调试变得更加困难。抱歉，如果我错过了您的观点。大多数网络托管公司应该允许您免费或收费注册子域或虚域域，因为您拥有主域。只是一些考虑。

【讨论】：

我所说的结构和设计模型也是Philippe提到的那个。我认为这会让生活更轻松。
好吧，这就是我这样做的原因，但我仍然无法从生产中的服务器获取数据（本地一切正常）。网站：-> ofilms.herokuapp.com。回购 -> www.github.com/Versifiction/ofilms
你的 Heroku 日志告诉你什么？你的控制台呢？
您使用的是哪个数据库？如果 Mongo 允许访问您的 IP？
我在云中使用 MongoDB 数据库，所以我可以在任何地方访问，并且我将每个 IP 都列入了白名单，问题出在服务器上。在浏览器的控制台中，我看到我无法从服务器获取数据

【解决方案2】：

一切皆有可能，您只需要了解事情是如何运作的......我的建议是您从简单开始并拥有一个包含正面+背面的单一存储库，然后您可以将其部署为单个 heroku 应用程序。

一个应用程序只能有一个唯一的heroku url，所以你不能让你提到的nameofmyapp + api-nameofmyapp 由单个heroku 实例托管，这需要由两个不同的实例托管，这意味着来自两个实例的代码回购。

通常对于节点应用程序，您将创建一个由同一应用程序托管的/api 路由，因此您的前端在nameofmyapp.herokuapp.com 提供服务，您的api 在nameofmyapp.herokuapp.com/api 提供一些子路线，例如@ 987654326@.

您应该能够轻松地在网络上找到大量的 node/react/heroku 教程，只需使用它来进行实验并了解它们是如何协同工作的。

希望对您有所帮助。

【讨论】：

我在同一个仓库中部署了前端和后端，客户端正常但我无法从服务器获取数据，因为“尝试代理时发生错误”错误.. .
好吧，根据这么薄的描述，不能告诉你太多，你应该首先确保你的应用程序在本地运行良好，然后如果不能在 heroku 上运行，找出原因和差异。 ..
应用程序在本地运行良好，问题是本地我的服务器在端口 5000 上，客户端在端口 3000 上，但在生产中服务器不在端口 5000 上，我不知道是什么要做...你想让我展示一些东西吗？...
客户端不能在任何端口上，我认为你的意思是你有一个静态服务器用于端口 3000 上的前端和另一个用于端口 5000 上的 API。在 heroku 上，你的应用程序将只得到一个端口，这可能就是它不起作用的原因。同样，您应该做的是降低您的野心，并从一个非常基本的应用程序开始，该应用程序从单个节点应用程序运行静态客户端和 API，因此只需要一个端口即可运行。当您掌握更多机制时，您可以在 2 个 heroku 实例上前后拆分，但这会更加棘手......再次只是一个建议。
Philippe 的好建议，有如此多的文档和技术，让我们回归基础并从那里构建可以造福世界。一件事，你有没有在你的 .env 文件中设置任何端口？因为您无法为 Heroku 设置端口，所以它会自动分配给您的应用程序。另外，请记住您的主机应该在 Heroku 上设置为 0.0.0.0，127.0.0.1 只能在本地工作。可能与您的确切问题无关，但我最初在部署时不知道这两个设置。哦，app.set('trust proxy', 1); 有时也可以在 Heroku 等代理后面提供帮助。