CentOS Question posted in
The official documentation can be found here.

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

website: yeeplus.tk

error message:
GET http://yeeplus.tk/logo192.png 403 (Forbidden)
Error while trying to use the following icon from the Manifest: http://yeeplus.tk/logo192.png (Download error or resource isn’t a valid image)

This react app runs correctly when in npm start. However, after deploying this app, icon png file cannot correctly be accessed.

After npm run build, logo192.png exists in build/

I used Nginx as HTTP server. config file: 

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 error log

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 file permission:

[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

Source code is in: https://github.com/WayneHo25/YeePlus/tree/master/frontend

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Make sure that nginx have the correct permissions to the static folder.

    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 is the current user in AWS instance, and nginx is a user group.


  2. 0

    In your nginx config file change location section:

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

    To:

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

    And restart nginx:

    systemctl restart nginx

    Also make sure that nginx have permissions to your static folder:

    chown -R :www-data /var/www/frontend/build
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search