ReactJS：如何在本地服务器上部署

Question

我有一个使用NodeJS + Express + GraphQL + MongoDB后端和ReactJS + Apollo前端开发的Web应用程序。我想在本地 部署此应用程序。那有可能吗？

我遇到了数十种“如何部署到Heroku”，“如何部署到Digital Ocean”，“如何部署到Github”等等，但是没有一个解释如何在本地部署。

现在，我运行：nodemon server用于后端，npm start用于前端。我看到该应用程序在http://localhost:3000/上运行（我使用cors将前端连接到在端口3001上运行的服务器）。

我只想转到http://localhost:3000/并查看应用程序，而不必执行命令npm start和nodemon server。这可能吗？如果是这样，我该怎么做？

据我所知，我们的本地服务器不是WAMP服务器（尽管我们的操作系统是Windows）。 IT部门告诉我这是一个

  

[...]普通的常规旧服务器。该地址是localhost在   端口3000。如果需要，您可以在3001上打开另一个端口。只是   将您的东西放到C：驱动器上，您应该会很好。我有   从未听说过Node或React，所以如果您有任何疑问，我将无济于事。

有什么想法吗？在此先感谢您的帮助！

更新

我要寻找的东西似乎有些混乱。我正在尝试在本地部署它。

比方说，在您的本地计算机上（您在家中的笔记本电脑上），您在喜欢的浏览器上访问了localhost：3000。除非在那一刻不向localhost提供服务，否则它将显示“拒绝连接”或其他内容。我想要的是每当我访问localhost：3000时，我就能打开网络上的任何计算机，并且我的反应站点出现并起作用...是否更有意义？

我不希望这是开发模式。我想要在localhost上构建此项目...我开始认为这是不可能的。

Answer 1

据我了解，您希望将其部署在开发设备上的本地服务器上，而不是本地上。

  

我考虑过这样做...但是我不确定它始终运行会不会好起来...：（

如果服务器未运行，如何使用它？就像WAMP（运行apache）一样，或者无论您在那里滚动，它都必须正在运行。因此，只需像建议slawomir那样使其成为后台进程即可。

PS我认为您虽然不能正确理解节点服务器。 阅读this以了解为什么需要重新加载节点服务器。之后，您需要了解没有哪种热重装工具是完美的，并且您将需要不时地重新启动服务器。

PPS我不知道这意味着什么

  

[...]普通的常规旧服务器。该地址是在端口3000上运行的localhost。

如果有一台运行在3000上的服务器，则需要将服务器的端口更改为其他（最常见的是9000）

Answer 2

要解决该问题，您可以创建一个启动脚本，该脚本执行npm start和nodemon server。然后确保将其隐藏，以便您的服务器将始终运行。不过请记住，抛出的任何错误都会使您的服务器停止运行，除非您对其进行配置，否则服务器不会自行重新加载。

Answer 3

要解决该问题，首先需要创建一个扩展名为.bat or .cmd的批处理文件，并在该文件下添加以下2条命令

nodemon server npm start

然后按照以下步骤将其添加为Windows操作系统的启动脚本。

1. 创建批处理文件的快捷方式。
2. 创建快捷方式后，右键单击文件并选择 切。
3. 按“开始”按钮，然后键入“运行”，然后按Enter。
4. 在“运行”窗口中，键入shell：startup以打开“启动”文件夹。
5. 打开“启动”文件夹后，请单击 文件夹顶部，然后选择粘贴以将快捷方式粘贴到 文件夹。

例如，上述步骤是创建一个批处理文件并将其添加为Windows 8和10用户的启动脚本。 为了更好的说明或参考，请点击以下链接。reference-link

Answer 4

在保持服务器运行的同时，无法选择重新加载服务器。从技术上讲，您可以让您的“主”文件监视另一个文件的更改。这将是您实际上保留服务器程序的文件。然后，在更改时，您将放弃当前的逻辑并开始执行。也就是说，以这种方式进行操作将非常脆弱，而且是一种非常绕行的方式。它也无法修复您需要类似解决方案的前端。

相反，您可以加入您喜欢的编辑器的save事件，并运行这两个控制台命令，以便每次保存时，服务器都会自动启动。 （确保还清理现有服务器）

• Run on Save for VSCode
• save-commands for Atom

Answer 5

我会尝试以下操作：

1. 使用生产环境变量集构建您的应用
2. 从dist文件夹中获取所有文件，并将其部署在服务器中
3. 现在使用localhost /
访问您的应用

Answer 6

也许您正在寻找类似ngrok的东西，它创建了一个通往您的本地主机的袜子隧道，据我所知，它是从本地主机有效部署的，它允许您通过{{1} }，甚至是自定义子域（如果您要支付订阅费的话）。

如果我错了，请告诉我！

Answer 7

我知道这个帖子已经两年了。但是，我认为您第二个期望结果的解决方案是使用并发。 https://www.npmjs.com/package/concurrently。 这将使您可以执行一个NPM START来启动全部三个过程中的两个。

关于第一个问题，我认为解决方案是将Electron添加到您的应用程序中，以便您可以将其打包到可执行应用程序中。启动应用程序时，您的Express服务器将在后台开始运行。

大多数人可能不理解为什么需要这样做。在本地服务器（计算机）上运行允许访问本地文件系统，甚至可以在代理内部运行SQL查询，如果托管在外部服务器上，则需要IT参与。

Answer 8

据我所知，您希望将应用部署在本地服务器上，这意味着您希望将其部署在您所连接的网络上。

从命令提示符检查ip 要在本地部署它， 运行：HOST=ip npm run start

它将部署在您的本地服务器上。并且连接到服务器的每个人都可以访问该url

如果这对你有用，请点赞

Answer 9

您需要执行npm start，可能有其他启动方法，但是所有方法都相同。您可以在Freecodecamp上阅读有关在DigitalOcean上进行部署的文章。您可以将其操作到本地主机。应该没什么不同。FCC Tut on Deploying