在服务器上部署 create-react-app 时图标 png 文件无法加载答案

【问题标题】：Icon png file failed to load when create-react-app deploy on server在服务器上部署 create-react-app 时图标 png 文件无法加载
【发布时间】：2020-02-09 06:29:08
【问题描述】：

网站：yeeplus.tk

错误信息：
GET http://yeeplus.tk/logo192.png 403（禁止）
尝试使用清单中的以下图标时出错：http://yeeplus.tk/logo192.png（下载错误或资源不是有效图像）

这个反应应用程序在npm start 中运行正常。但是，部署此应用后，图标 png 文件无法正确访问。

npm run build之后，logo192.png存在于build/

我使用 Nginx 作为 HTTP 服务器。配置文件：

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;
    }
}

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>

Nginx 错误日志

2020/02/09 07:03:14 [error] 5137#0: *4 open() "/var/www/Yeeplus/logo192.png" failed (13: Permission denied), client: 121.211.67.70, server: www.yeeplus.tk, request: "GET /logo192.png HTTP/1.1", host: "yeeplus.tk", referrer: "http://yeeplus.tk/"
2020/02/09 07:03:14 [error] 5137#0: *4 open() "/var/www/Yeeplus/logo192.png" failed (13: Permission denied), client: 121.211.67.70, server: www.yeeplus.tk, request: "GET /logo192.png HTTP/1.1", host: "yeeplus.tk"
2020/02/09 07:03:14 [error] 5137#0: *4 open() "/var/www/Yeeplus/logo512.png" failed (13: Permission denied), client: 121.211.67.70, server: www.yeeplus.tk, request: "GET /logo512.png HTTP/1.1", host: "yeeplus.tk"
2020/02/09 07:03:33 [error] 5137#0: *4 open() "/var/www/Yeeplus/logo192.png" failed (13: Permission denied), client: 121.211.67.70, server: www.yeeplus.tk, request: "GET /logo192.png HTTP/1.1", host: "yeeplus.tk", referrer: "http://yeeplus.tk/"
2020/02/09 07:03:33 [error] 5137#0: *4 open() "/var/www/Yeeplus/logo192.png" failed (13: Permission denied), client: 121.211.67.70, server: www.yeeplus.tk, request: "GET /logo192.png HTTP/1.1", host: "yeeplus.tk"
2020/02/09 07:03:34 [error] 5137#0: *4 open() "/var/www/Yeeplus/logo512.png" failed (13: Permission denied), client: 121.211.67.70, server: www.yeeplus.tk, request: "GET /logo512.png HTTP/1.1", host: "yeeplus.tk"

Yeeplus 文件权限：

[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

源码在：https://github.com/WayneHo25/YeePlus/tree/master/frontend

【问题讨论】：

你是否给了 nginx 的 root 访问权限，由于权限不合适，服务器现在无法访问文件

标签： html reactjs nginx assets

【解决方案1】：

在您的 nginx 配置文件中更改 location 部分：

location / {
    try_files $uri $uri/ /index.php?$query_string;
}

收件人：

location / {
    try_files $uri /index.html;
}

然后重启 nginx：

systemctl restart nginx

还要确保 nginx 对您的静态文件夹具有权限：

chown -R :www-data /var/www/frontend/build

【讨论】：

谢谢。这确实是 Nginx 的权限问题。

【解决方案2】：

确保 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 {} \;

centos是AWS实例中的当前用户，nginx是一个用户组。

【讨论】：