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?

what's the request url of your nginx server and your upstream server — David Zhang
– David Zhang, Commented Jan 6, 2019 at 9:23
Could you post the complete URL for the css files which your browser is trying to fetch? You can try to curl those requests and see what is the response. — hazardous
– hazardous, Commented Jan 17, 2019 at 5:57

Nagesh Bhad · Accepted Answer · 2019-01-21 14:06:46Z

2

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!

answered Jan 21, 2019 at 14:06

Nagesh Bhad

212 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nikko Khresna · Accepted Answer · 2019-01-18 16:09:26Z

try using this config to build the docker

# build environment
FROM node:9.6.1 as builder
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install [email protected] -g --silent
COPY . /usr/src/app
RUN npm run build

# production environment
FROM nginx:1.13.9-alpine
COPY --from=builder /usr/src/app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

never had any problem using this script. U might miss some nginx config or forgot to copy recursively, who knows if u didnt post the Dockerfile

*note: i didnt make it
credit: https://mherman.org/blog/dockerizing-a-react-app/

Boris Traljić · Accepted Answer · 2019-01-21 19:22:29Z

1

I think this is an elegant solution for nginx reverse proxy cofiguration.

/etc/nginx/sites-available/app2.conf

server {
    listen 80;
    listen [::]:80;

    server_name example.com www.example.com;

    location / {
            proxy_pass http://localhost:3001;

            # recommended settings
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
    }
}

Don't forget symbolic link:

sudo ln -s /etc/nginx/sites-available/app2.conf /etc/nginx/sites-enabled/

answered Jan 21, 2019 at 19:22

Boris Traljić

9561 gold badge10 silver badges17 bronze badges

Collectives™ on Stack Overflow

Deploy React with Nginx failed to load resources

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related