Html 在服务器上创建react app deploy时无法加载图标png文件
网站：yeeplus.tk 错误消息：Html 在服务器上创建react app deploy时无法加载图标png文件,html,reactjs,nginx,assets,Html,Reactjs,Nginx,Assets,网站：yeeplus.tk 错误消息： 获取403（禁止） 尝试使用清单中的以下图标时出错：（下载错误或资源不是有效图像） 在npm start中，此react应用程序可以正确运行。但是，部署此应用程序后，无法正确访问图标png文件 在npm运行构建之后，logo192.png存在于构建中/ 我使用Nginx作为HTTP服务器。配置文件： server { listen 80; server_name www.yeeplus.tk yeeplus.tk; root /v
获取403（禁止）
尝试使用清单中的以下图标时出错：（下载错误或资源不是有效图像） 在
npm startnpm运行构建之后server {
listen 80;
server_name www.yeeplus.tk yeeplus.tk;
root /var/www/Yeeplus;
index index.html index.htm;
location / {
try_files $uri $uri/ /index.html;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" sizes="192x192" href="%PUBLIC_URL%/logo192.png" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<!-- Fonts and icons -->
<link
rel="stylesheet"
type="text/css"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"
/>
<link
href="https://use.fontawesome.com/releases/v5.0.10/css/all.css"
rel="stylesheet"
/>
<meta
name="description"
content="An open source project about personal controller for Yeelight smart lighting devices. A minimal forum board application. Built on top of React-Redux frontend, Spring framework backend and MySQL databse."
/>
<title>YeePlus Controller</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
[centos@ip-172-26-5-176 Yeeplus]$ ls -al
total 108
drwxr-xr-x. 3 centos nginx 264 Feb 8 15:25 .
drwxr-xr-x. 6 root root 68 Feb 9 02:39 ..
-rw-r--r--. 1 centos nginx 990 Feb 8 15:25 asset-manifest.json
-rw-r--r--. 1 centos nginx 6148 Feb 8 15:25 .DS_Store
-rw-r--r--. 1 centos nginx 24838 Feb 8 15:25 favicon.ico
-rw-r--r--. 1 centos nginx 2600 Feb 8 15:25 index.html
-rw-------. 1 centos nginx 11910 Feb 8 15:25 logo192.png
-rw-------. 1 centos nginx 34013 Feb 8 15:25 logo512.png
-rw-r--r--. 1 centos nginx 496 Feb 8 15:25 manifest.json
-rw-r--r--. 1 centos nginx 938 Feb 8 15:25 precache-manifest.650936d21819374ee8e68586017bbb14.js
-rw-r--r--. 1 centos nginx 67 Feb 8 15:25 robots.txt
-rw-r--r--. 1 centos nginx 1041 Feb 8 15:25 service-worker.js
drwxr-xr-x. 5 centos nginx 40 Feb 9 02:36 static
源代码位于：您的nginx配置文件更改
位置：位置/{
try_files$uri$uri//index.php？$query_string；
}
位置/{
尝试使用文件$uri/index.html；
}
systemctl重启nginx
chown-R:www-data/var/www/frontend/build
sudo chown -R centos:nginx /var/www/Yeeplus/
sudo find /var/www/Yeeplus/ -type f -exec chmod 644 {} \;
sudo find /var/www/Yeeplus/ -type d -exec chmod 755 {} \;
centos是AWS实例中的当前用户，nginx是一个用户组。如果您授予了nginx的root访问权限，服务器现在无法访问文件，因为权限不正确。这确实是Nginx的权限问题。
sudo chown -R centos:nginx /var/www/Yeeplus/
sudo find /var/www/Yeeplus/ -type f -exec chmod 644 {} \;
sudo find /var/www/Yeeplus/ -type d -exec chmod 755 {} \;