[icon png文件在服务器上部署create-react-app时加载失败

问题描述 投票:0回答:2

网站:yeeplus.tk

错误消息:GEThttp://yeeplus.tk/logo192.png403(禁止)尝试使用清单中的以下图标时出错:http://yeeplus.tk/logo192.png(下载错误或资源不是有效的图像)

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

[C0之后,build192中存在logo192.png /

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

npm run build

index.html:

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

Nginx错误日志

<!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>

Yeeplus文件权限:

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"

源代码在:[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

html reactjs nginx assets
2个回答
1
投票

在您的nginx配置文件中更改https://github.com/WayneHo25/YeePlus/tree/master/frontend部分:

location

收件人:

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

并重新启动nginx:

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

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

systemctl restart nginx

0
投票

确保nginx对静态文件夹具有正确的权限。

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

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

© www.soinside.com 2019 - 2024. All rights reserved.