Deploy React with Nginx failed to load resources - reactjs

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!

Answer 2

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 react-scripts#1.1.1 -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/

Answer 3

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/