在React应用程序中运行时访问后端服务器端点

Question

我有一个从 ngnix 服务器提供服务的 React 应用程序。该应用程序访问 apache 后端服务器来获取数据并使用该数据创建 UI。

我为我的应用程序配置了两个端点：dev nginx 和 prod nginx。现在我想要的是，当这个应用程序从 dev nginx 服务器获得服务时，我希望它选择后端 tomcat 服务器的开发端点，当它由 prod nginx 服务器提供服务时，我希望它选择生产 tomcat 服务器端点。

如何在我的 React 应用程序中注入此后端服务器端点。

Answer 1

你有很多选择。下面是一些比较简单的：

1. 大概您至少有一个 HTML 文件是您的应用程序的登录页面。您可以生成两组 HTML 文件：一组用于开发，一组用于生产。每组 HTML 文件都会包含一个指示环境的 JS 变量。

2. 您可以在启动 nginx 服务器之前运行一个脚本，该脚本会修改 HTML 文件并注入带有环境信息的变量（或者实际上只是变量的值）。

3. 如果您不想动态修改 HTML 文件，您可以创建一个简单的 JS 文件，仅使用环境信息将变量分配给全局范围。然后，您的 HTML 文件可以在加载应用程序的其余部分之前加载此内容（通过

   <script>

   标签）。

4. 您可以根据 nginx 主机名猜测 Apache 主机名（例如，通过

   window.location.host

   ）。

Answer 2

此问题的最佳解决方案是https://webpack.js.org/plugins/define-plugin/