Deploy React with Nginx failed to load resources

user_9114126 0
Viewed 10309

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?

reactjs nginx
3 Answers
user_109451830

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/

user_105113860

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/
user_76686200
Related