在生产服务器上使用 React 定义 API 目的地答案

【问题标题】：Define API destination with React on Production Server在生产服务器上使用 React 定义 API 目的地
【发布时间】：2018-10-02 08:17:55
【问题描述】：

我有一个与 REST API 配合使用的 React 应用程序，该应用程序与 React 应用程序部署在同一台机器上。

React 应用程序部署在端口 80 上（使用 Apache Http Server）
REST API 是一个基于 Flask 的应用程序，部署在端口 5000 上。

目前，作为一种解决方法，我将生产服务器设置为在主机 X.Y.W.Z 上运行，因此我在 React 文件中对 API 目标进行了硬编码：

const API_HOST = 'http://X.Y.W.Z:5000'

如果我希望它与 React 应用程序位于同一主机但在不同的端口上，那么设置 API 目标的最佳做法是什么？（看到一些关于它的帖子，但没有人有解决方案，例如here 和here）

也许将请求从 React Router 转发到 WebServer 并在那里设置一个反向代理？如何配置？

在开发服务器上，我使用了 package.json 中的 proxy 属性（如 here）来转发请求 - 但它在特定的开发服务器上，它仍然应该是硬编码的。

（我认为定义不应该依赖于部署的主机（明天我可以将主机更改为不同的服务器 - 所以我应该始终设置 API 目标？）

【问题讨论】：

标签： reactjs react-router-v4

【解决方案1】：

根据节点环境改变API_HOST。

const API_HOST = process.env.NODE_ENV === 'production' ? 'http://X.Y.W.Z' : 'http://X.Y.W.Z:5000';.

如果您使用代理作为开发服务器，那么您可以使用将API_HOST 指定为

const API_HOST = process.env.NODE_ENV === 'production' ? 'http://X.Y.W.Z' : '';

【讨论】：

嗯...它似乎仍在对其进行硬编码，但在 package.json 文件中。据我了解，webpack 在运行时以某种方式将环境变量注入应用程序。是否有某种主机名环境变量？没有找到类似的东西。

【解决方案2】：

const API_HOST = process.env.NODE_ENV === 'production' ? 'http://X.Y.W.Z' : 
                                                         'http://X.Y.W.Z:5000';

如果您使用代理作为开发服务器，那么您可以将 API_HOST 指定为：

const API_HOST = process.env.NODE_ENV === 'production' ? 'http://X.Y.W.Z' : '';

【讨论】：