'How to serve multiple react applications with docker and nginx?
I want to run development env for local development processes. There will be 2 react apps with 2 backend servers and separated databases (so overall 6 containers). I have Nginx config
server {
listen 80;
location /auth {
proxy_pass http://account-service-frontend:3001;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $http_host;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
location / {
proxy_pass http://manager-frontend:3000;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $http_host;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
and docker-compose (below a part of code for front-end applications)
version: '3.8'
services:
nginx:
restart: unless-stopped
container_name: my-project-nginx
build:
dockerfile: Dockerfile.dev
context: ./nginx
networks:
- my-project-network
ports:
- '80:80'
depends_on:
- manager-frontend
- account-service-frontend
manager-frontend:
build:
dockerfile: Dockerfile.dev
context: ./manager-frontend
command: npm run start
container_name: my-project-manager-client-frontend
stdin_open: true
tty: true
volumes:
- ./manager-frontend:/app
environment:
- PORT=3000
restart: unless-stopped
networks:
- my-project-network
account-service-frontend:
build:
context: ./account-service-frontend
dockerfile: Dockerfile.dev
container_name: my-project-manager-account-service-frontend
command: npm run start
stdin_open: true
tty: true
volumes:
- ./account-service-frontend:/app
- ./volumes/config/account-service-frontend:/account-service-frontend/configs
environment:
- PORT=3001
restart: unless-stopped
networks:
- my-project-network
When I open localhost/ - it works fine for the manager-frontend container, but when I try to open /auth route and check my second frontend - It doesn't work. It's an empty blank without errors or smth else.
I want to run all containers using reverse proxy from Nginx and serve everything. There should be 2 separated front-ends and back-ends (with separated databases). And Nginx will process all elements, is it possible at all?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
