I have deployed multiple reactapps using docker and nginx as reverse proxy.

My Docker file is same for seperate 3 react apps!!

FROM node:16-alpine
WORKDIR /app
COPY package.json ./
COPY package-lock.json ./
COPY ./ ./
RUN npm i
CMD ["npm", "run", "start"]

My nginx.conf

server {
listen 80;
return 301 https://$host$request_uri;
}

server {

listen 443 ssl default_server;
listen [::]:443 ssl default_server;

add_header 'Cache-Control' "public, max-age=31536000";
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";
add_header X-Content-Type-Options: "nosniff";

ssl_certificate /etc/nginx/conf.d/cert.crt;
ssl_certificate_key /etc/nginx/conf.d/ssl.key;

server_name <my-ip-address>;

location / {
proxy_pass http://172.17.0.5:3000;
#try_files $uri /index.html;
}

location /qae {
proxy_pass http://172.17.0.2:3001;
#try_files $uri /index.html;
}

location /qac {
proxy_pass http://172.17.0.4:3002;
#try_files $uri /index.html;
}
}

This code is running fine and my reactapps are opening on this, but when i login into my website and try reloading my page its redirecting to 404 error page.

When i remove the hashtag for try_files $uri /index.html; iam getting 500 internal server error.

Solution needed : When i refresh the reactapp it has to stay on the same page.

Iam using 3 different images for 3 reactapps and also nginx is seperate image and making proxy_pass for 3 containers.

CodePudding user response：

Hosting react files under nginx should just be a matter of copying all the files into the document root directory. Something like (loosely based on this article):

mkdir -p /var/www/my_site
cd /home/me/react1
npm run build
cp -r ./build/* /var/www/my_site/

mkdir -p /var/www/my_site/qae
cd /home/me/react2
npm run build
cp -r ./build/* /var/www/my_site/qae/

mkdir -p /var/www/my_site/qac
cd /home/me/react3
npm run build
cp -r ./build/* /var/www/my_site/qac/

Then in your nginx conf you would need different try_files rules for each subdirectory so that each one would use the correct index.html. (Loosely based on this answer):

root /var/www/my_site;

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

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

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