Nginx multiple server with different port-CodePudding

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:

CodePudding user response：

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

CodePudding user response：

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: