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

Question

网站：yeeplus.tk

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

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

npm run build之后，build/

中存在logo192.png

我使用 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

Answer 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

Answer 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是一个用户组。

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

Icon png file failed to load when create-react-app deploy on server

html

assets

nginx

reactjs