Deploy React with Nginx failed to load resources

Question

I'm trying to deploy a react app with nginx reverse proxy.

My server configuration block (/etc/nginx/sites-available/app2.conf) is as follow:

server {
  listen 80;
  listen[::]:80;
  root/srv/app2/build;
  index index.html index.html;
  server_name _;

  location / {
    proxy_pass http://localhost:3001/;
    try_files $uri $uri/ =404;
  }
}

I'm using a docker to run the react app with port 3001 exposed. I tried to use curl to see if it works. The curl command works as expected.

curl http://localhost:3001

However, when i tried to run in my web browser i got the following error:

Failed to load resource: the server responded with a status of 404 (Not Found) main.8ea061ea.chunk.css

Failed to load resource: the server responded with a status of 404 (Not Found) main.dcd07bc1.chunk.js

Failed to load resource: the server responded with a status of 404 (Not Found) 1.a6f3a221.chunk.js

Failed to load resource: the server responded with a status of 404 (Not Found) main.dcd07bc1.chunk.js

Failed to load resource: the server responded with a status of 404 (Not Found) main.8ea061ea.chunk.css

It seems that it failed to load all the static files (.css & .js) files. Does anybody know how to resolve this?

Answer 1

Please check this https://docs.nginx.com/nginx/admin-guide/web-server/serving-static-content/

You have to specify the way static files are to served depending upon the url requested for static files.

Hope it helps!