React / Node：当前运行时环境的dynamic主机和端口（客户端和服务器）

反应^ 0.14.0

节点^ 5.0.0

Express ^ 4.0.0

我正在开发一个React应用程序，我不能再为我的客户端硬编码主机和端口。

因为现在我将在将服务器部署在云中或在本地运行服务器之间进行切换 – 所以我需要为客户端应用程序创build一个方法来确定它是dynamic主机和端口，以便将http请求发送到正确的端点服务器（本地或在networking上）。

由于所有的请求都是与服务器“相同的来源”，所以我有两种方法来设置它。

1）（简单的方法）客户端：在客户端初始化的时候，或者在每个请求之前，抓住“位置”。

2）服务器端：在服务器端渲染期间，使用服务器的configuration来确定主机和端口，并将它们作为初始状态的一部分发送。

第一种方法肯定是破解一些可行的最简单的方法，但是我觉得如果我有更多的经验部署服务器和在不同的环境之间切换，我会发现第二种方法更合理。

我认为经验丰富的团队知道共同的习惯，但是没有很多在线的生产水平的例子 – 我就像¯\_(ツ)_/¯

Answer 1

服务器端：

使用webpack，尤其是webpack定义插件 ，您可以在捆绑应用程序时注入正确的主机和端口。 右侧和主机来自通过环境因variables 。 而select一个或另一个取决于脚本参数（例如production ）。它为我工作。 这是我的堆栈：

我根据自己的需求（生产，云，本地，…）创build一个configuration文件与不同的端口和主机。 我使用rc导入它。 当在我的webpackconfiguration中导入时，我在webpackconfiguration中有一个节点：

 .... plugins: [ new dwebpack.DefinePlugin({ __LOCATION__: production ? rcConfig.location1 : rcConfig.location2 }) ], .... 

然后我可以在我的javascript代码中编写__LOCATION__ ：

 <a href={__LOCATION__+"/api/todo"}>see todo</a> 

它将被网页包装的价值取代

希望这个帮助:)