尝试从已部署的 create-react-app 中的公用文件夹中获取 json 文件时出现 404 错误

Question

我的反应项目公共文件夹中有一个这样的 json 文件

public
|
|___Data
    |   test.json

在我的 .tsx 文件中，我像这样引用文件

fetch(`${process.env.PUBLIC_URL}/Data/test.json`,
    {
     headers : {
         'Content-Type': 'application/json',
         'Accept': 'application/json'
     }
})
 .then(response => response)
        

这在开发以及在本地构建和提供应用程序时工作正常（npm run build）。但是当我尝试部署到我的 Azure Web 应用应用服务时，该站点会针对该文件引发 404 错误。

我还可以在 Kudu 调试控制台中看到该文件，因此我知道它正在与项目一起部署。

将process.env.PUBLIC_URL 打印到控制台会产生一个空字符串。我是否需要使用环境变量将此值设置为某个值？我的应用服务配置是否还有其他遗漏？

我查看了其他类似的问题，即this one，但该解决方案也不适用于我。

Answer 1

最新

React 客户端项目本质上是下载一段代码在客户端浏览器上运行，不会与 Azure 应用设置相关。所以它的 process.env 无法读取任何 azure 环境变量。

最新更新的答案可以作为您的选择。经过大量测试，发现在react项目中，.tsx文件中的process.env和全局的不一样。

import * as React from 'react';
const {env} = process;
...
public getJsonDataStr = () => {
    const urlBy: string = this.props.urlBy!;
    const url = this.state.url + urlBy + env.REACT_APP_PUBLIC_URL;
    this.setState({ url });
};

更多详情，you can download my sample code。

1. 在项目中创建.env 文件。

2. npm 运行构建，并部署构建文件夹。

3. 测试一下。

私人

方法一

您可以在门户上的Application settings 中设置PUBLIC_URL。

测试步骤：

1. 在门户上配置。

2. 打开scm站点，点击Environment。

3. 打开 ssh，运行命令。

方法二

尝试使用process.env.WEBSITE_HOSTNAME 而不是process.env.PUBLIC_URL。