multiple react app with docker nginx reverse proxy

Question

I have 2 container with 2 react app (react app published using this guide https://medium.com/greedygame-engineering/so-you-want-to-dockerize-your-react-app-64fbbb74c217 ) and 1 container with nginx, all container are on the same server with ip address 192.168.1.10

• ermes app listen on port 3000
• hydra app listen on port 4000

this is my nginx orchestrator file

server {
    listen       80;
    server_name  localhost;
    location /ermes {
        proxy_pass http://ermes:3000;
    }
    location /hydra {
        proxy_pass http://hydra:4000;
    }
}

and this is the nginx file for react app (this is ermes, on hydra only change port to 4000)

server {
    listen       3000;
    server_name  localhost;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri /index.html;
    }
}

in my docker-compose I have set the alias for ermes and hydra The problem is this: I surf to http://192.168.1.10/ermes I get the app "ermes", but my static files points on

http://192.168.1.10/static/css/main.1fd1236d.chunk.css

it remove the folder, it should be

http://192.168.1.10/ermes/static/css/main.1fd1236d.chunk.css

this is my Dockerfile for React App

FROM node:10 as react-build
WORKDIR /app
COPY publish/ .
RUN npm install && npm run build
FROM nginx:alpine
COPY publish/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=react-build /app/build /usr/share/nginx/html
EXPOSE 3000
CMD ["nginx", "-g", "daemon off;"]

in the publish folder there are

• src folder
• public folder
• package.json file

how can I force this?

Answer 1

If you need your files to point to /ermes/static/... add a .env file in your root react project with the following

PUBLIC_URL=ermes