【问题标题】:React/Node : Dynamic host and port (client & server) for current run-time environmentReact/Node:当前运行时环境的动态主机和端口(客户端和服务器)
【发布时间】:2016-05-17 20:12:14
【问题描述】:

反应 ^0.14.0

节点^5.0.0

表达^4.0.0

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

因为现在我将在将服务器部署在云中或在本地运行之间切换 - 所以我需要为客户端应用程序创建一种方法来确定它的动态主机和端口,以便正确地发出 http 请求服务器的端点(本地或网络)。

由于所有请求都与服务器“同源”,因此我认为有两种设置方法。

1)(简单的方法)客户端:在客户端初始化时或在每次请求之前获取“位置”。

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

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

我认为有经验的团队知道实现这一目标的常见约定,但没有很多在线生产级示例 - 我喜欢 ¯\_(ツ)_/¯

【问题讨论】:

    标签: node.js reactjs


    【解决方案1】:

    服务器端:

    使用 webpack,尤其是 webpack define plugin,您可以在捆绑应用程序时注入正确的主机和端口。权利&主机来自passing environment dependent variables。选择一个或另一个取决于脚本参数(例如production)。它对我有用。这是我的堆栈:

    我根据我的需要(生产、云、本地...)创建具有不同端口和主机的配置文件。 我使用rc 导入它。 在我的 webpack 配置中导入时,我在 webpack 配置中有一个节点:

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

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

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

    在 webpacking 的时候会被替换成它的值

    希望得到帮助:)

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2011-09-02
      • 1970-01-01
      • 2020-11-20
      • 2012-05-19
      • 2017-05-26
      • 2014-05-29
      • 1970-01-01
      • 2023-03-23
      相关资源
      最近更新 更多