Не удалось загрузить файл icon png при развертывании create-реагировать на приложение на сервере - PullRequest
Новая
       4

Не удалось загрузить файл icon png при развертывании create-реагировать на приложение на сервере

0 голосов
/ 09 февраля 2020

веб-сайт: yeeplus.tk

сообщение об ошибке:
GET http://yeeplus.tk/logo192.png 403 (запрещено)
Ошибка при попытке использовать следующий значок из манифеста: http://yeeplus.tk/logo192.png (Ошибка загрузки или ресурс не является допустимым изображением)

Это реагирующее приложение работает правильно, когда в npm start. Однако после развертывания этого приложения файл png значка не может быть правильно доступен.

После npm run 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

Ответы [ 2 ]

1 голос
/ 09 февраля 2020

В вашем nginx изменении файла конфигурации location раздел: 

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

Кому: 

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

И перезапустите nginx: 

systemctl restart nginx

Также убедитесь, что nginx имеет разрешения для вашей папки stati c: 

chown -R :www-data /var/www/frontend/build
0 голосов
/ 09 февраля 2020

Убедитесь, что nginx имеет правильные разрешения для папки stati c. 

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 - группа пользователей.

...