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?

seems you have some problem when packet the react app, can you provide your webpack config file? — Narro, Mar 17 '20 at 09:15
take a look at this: https://webpack.js.org/guides/public-path/ — Narro, Mar 17 '20 at 09:20
so how do you build your react app? the build script is in package.json. — Narro, Mar 18 '20 at 00:57
this is the command in package.json: "build": "react-scripts build" — Mauro Sala, Mar 18 '20 at 10:33
this article helps you to find webpack config, and replace publicPath `/` with `.` https://stackoverflow.com/a/48395890/5760975 — Narro, Mar 19 '20 at 06:23

score 0 · Answer 1 · answered Apr 05 '22 at 18:00

0

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

answered Apr 05 '22 at 18:00

Ganeshprasad Shenoy

46
4

multiple react app with docker nginx reverse proxy

1 Answers1