Question

我有一个 React 应用，其中包含从API提取的内容。我有一个有效的dockerfile。

如何为生产中的所有提取配置基本URL？

最后，我将在 Azure App Services 上部署 React 应用。我在proxy中使用了标签package.json，但这仅用于开发。提取示例信息如下：（必须在“ / evaluations”之前放置基本网址）

    fetch(`/evaluations?onlyactiveones=true`, this.credentials)
        .then(response => response.text())
        .then(data => {
            this.setState({ evaluations: data });
            console.log(data);
        });

Answer 1

看起来您正在对相对网址进行调用。因此，默认情况下，它将以基本URL的形式调用您的域。例如，在这种情况下，http://yourdomain.com/evluations，但是最有可能您要致电http://someotherdomain.com/api/evaluations。为此，您需要在azure网站（或任何其他托管服务器）中配置反向代理。

在azure网站中，您可以按照以下链接中的建议配置反向代理： https://ppolyzos.com/2015/10/26/reverse-proxy-functionality-in-azure-web-sites/

Answer 2

我现在已经解决了这个问题。我所做的事情：

为基本网址定义一个env变量，例如：process.env.REACT_APP_API_PROXY

使用此env变量替换所有提取。对于上面的示例：

    fetch(`${process.env.REACT_APP_API_PROXY}/evaluations?onlyactiveones=true`, this.credentials)
    .then(response => response.text())
    .then(data => {
        this.setState({ evaluations: data });
        console.log(data);
    });

根据需要定义env变量。 env变量必须在构建react应用之前放置，不能在运行时替换。

如何在docker的部署中为React App配置获取基本URL？

2 个答案: