[英]404 Error when trying to fetch json file from public folder in deployed create-react-app
I have a json file in my react project public folder like this我的反应项目公共文件夹中有一个 json 文件,如下所示
public
|
|___Data
| test.json
In my.tsx file I'm referencing the file like this在 my.tsx 文件中,我正在引用这样的文件
fetch(`${process.env.PUBLIC_URL}/Data/test.json`,
{
headers : {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
})
.then(response => response)
This works fine in development and when building and serving the app locally (npm run build).这在开发以及在本地构建和提供应用程序(npm run build)时工作正常。 But when I try deploy to my Azure web app app service, the site throws a 404 error for that file.
但是,当我尝试部署到我的 Azure web 应用程序服务时,该站点会为该文件引发 404 错误。
I can also see the file in the Kudu debug console so I know it's getting deployed with the project.我还可以在 Kudu 调试控制台中看到该文件,因此我知道它正在与项目一起部署。
Printing process.env.PUBLIC_URL
to console yields an empty string.将
process.env.PUBLIC_URL
打印到控制台会产生一个空字符串。 Do I need to set this value to something using environment variables?我是否需要使用环境变量将此值设置为? Is there something else that I'm missing with my app service configuration?
我的应用服务配置还缺少其他内容吗?
I've looked at other similar questions, namely this one and the solution did not work for me either.我看过其他类似的问题,即这个问题和解决方案对我也不起作用。
NEWEST最新
The React client side project essentially downloads a piece of code to run on the client browser, and will not be related to azure application settings. React 客户端项目本质上是下载一段代码在客户端浏览器上运行,不会与 azure 应用设置相关。 So its process.env cannot read any azure environment variables.
所以它的 process.env 无法读取任何 azure 环境变量。
The latest updated answer can be your alternative.最新更新的答案可以是您的选择。 After a lot of testing, it is found that in the react project, the process.env in the.tsx file is different from the global one.
经过大量测试,发现在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 });
};
For more details , you can download my sample code .更多详细信息,您可以下载我的示例代码。
Create .env
file in project.在项目中创建
.env
文件。
npm run build, and deploy build folder. npm 运行构建,并部署构建文件夹。
Test it.测试一下。
PRIVIOUS私人的
You can set PUBLIC_URL
in Application settings
on portal.您可以在门户的
Application settings
中设置PUBLIC_URL
。
Test Step:测试步骤:
configure on portal.在门户上配置。
Open scm site, click Environment
.打开 scm 站点,单击
Environment
。
open ssh, run command.打开 ssh,运行命令。
Try to use process.env.WEBSITE_HOSTNAME
instead of process.env.PUBLIC_URL
.尝试使用
process.env.WEBSITE_HOSTNAME
而不是process.env.PUBLIC_URL
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.