Nginx multiple server with different port - docker

Question

I'm trying to serve : one django back-end , 2 reactjs front-end .
the back-end work well but for the front-ends only one of theme work .
this is my nginx and front-end Dockerfile :
FROM node:lts-alpine3.12 as build1
WORKDIR /frontend
COPY ./frontend/package.json ./
COPY ./frontend/package-lock.json ./
RUN npm install
COPY ./frontend/ ./
RUN npm run build
FROM node:lts-alpine3.12 as build2
WORKDIR /frontend2
COPY ./frontend2/package.json ./
COPY ./frontend2/package-lock.json ./
RUN npm install
COPY ./frontend2/ ./
RUN npm run build
FROM nginx:1.18.0-alpine
COPY ./webserver/default.conf /etc/nginx/conf.d/default.conf
COPY --from=build1 /frontend/build /usr/share/nginx/html/frontend1
COPY --from=build2 /frontend2/build /usr/share/nginx/html/frontend2
this is my default.conf:
upstream api {
server backend:8000;
}
server {
listen 80;
server_name "localhost";
root /usr/share/nginx/html/frontend1;
location / {
try_files $uri /index.html;
}
location /api/ {
proxy_pass http://api;
}
}
server {
listen 8080 ;
server_name "localhost";
root /usr/share/nginx/html/frontend2;
location / {
try_files $uri /index.html;
}
location /api/ {
proxy_pass http://api;
}
}
and this is the results for port 80 :
and this is the result for port 8080:
Update :
this is my docker-compose :
version: "3.9"
services:
backend:
build:
context: ./backend
ports:
- "8000:8000"
command: gunicorn server.wsgi:application --bind 0.0.0.0:8000
volumes:
- staticfiles:/backend/staticfiles
nginx:
build:
context: .
dockerfile: ./webserver/Dockerfile
restart: always
volumes:
- staticfiles:/staticfiles
ports:
- "80:80"
depends_on:
- backend
volumes:
staticfiles:

Answer 1

use different server names for frontend other localhost,
Use this default.conf
upstream api {
server backend:8000;
}
server {
listen 80;
server_name myapp.loc;
root /usr/share/nginx/html/frontend1;
location / {
try_files $uri /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
server {
listen 80;
server_name newapp.loc;
root /usr/share/nginx/html/frontend2;
location / {
try_files $uri /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
/etc/hosts
127.0.0.1 newapp.loc
127.0.0.1 myapp.loc

Answer 2

As I see in your docker-compose, you didn't connect your container port 8080 to your local port 8080.
So when you open localhost:8080 in your browser, you get connection error, because this port isn't open now.
please use this docker-compose, and let me know if you have any problem with it:
version: "3.9"
services:
backend:
build:
context: ./backend
ports:
- "8000:8000"
command: gunicorn server.wsgi:application --bind 0.0.0.0:8000
volumes:
- staticfiles:/backend/staticfiles
nginx:
build:
context: .
dockerfile: ./webserver/Dockerfile
restart: always
volumes:
- staticfiles:/staticfiles
ports:
- "80:80"
- "8080:8080"
depends_on:
- backend
volumes:
staticfiles: