Nginx multiple server with different port

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:

Based on the configuration you provided, it looks like you are trying to serve two separate React front-ends on different ports (80 and 8080) using a single nginx server. The first front-end is being served on port 80 and is working as expected. However, the second front-end on port 8080 is not working. This could be due to several reasons. — Madvin, Dec 25 '22 at 06:32
One possible issue could be that the React front-end on port 8080 is not being built correctly. This could be due to errors in the source code or in the build process. You can try building the front-end on port 8080 separately and see if there are any issues. Another possibility is that there could be issues with the nginx configuration for the second front-end on port 8080. You can try checking the nginx logs to see if there are any errors being thrown that could be causing the issue. — Madvin, Dec 25 '22 at 06:33
It would also be helpful to see the contents of the package.json and package-lock.json files for the second front-end, as well as any error messages you are seeing in the browser or in the console. — Madvin, Dec 25 '22 at 06:33
Without more information, it's difficult to say for sure what is causing the issue with the second front-end on port 8080. However, the above suggestions should help you troubleshoot and identify the problem. — Madvin, Dec 25 '22 at 06:33
my main goal is serve 2 reactjs applications , the port numbers dosen't matter for me — Toufik Benkhelifa, Dec 25 '22 at 06:39
Please add "8080:8080" to your docker-compose in Nginx.ports ,After this line: - "80:80" — Madvin, Dec 25 '22 at 08:37

Bhagyesh Patel · Accepted Answer · 2022-12-25T09:21:11.337

0

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

edited Dec 25 '22 at 09:21

answered Dec 25 '22 at 06:11

Bhagyesh Patel

28
4

i tried it and it doesn't work – Toufik Benkhelifa Dec 25 '22 at 06:35
Please provide your docker-compose file – Bhagyesh Patel Dec 25 '22 at 06:43
i did now you can check now – Toufik Benkhelifa Dec 25 '22 at 06:49
https://www.linkedin.com/in/uzrnem/ meet me on linkedin, will solve it – Bhagyesh Patel Dec 25 '22 at 06:50
Yes, use custome host name, make that entry in /etc/hosts file and for frontend2 – Bhagyesh Patel Dec 25 '22 at 06:51
i tried it now and it didn't work – Toufik Benkhelifa Dec 25 '22 at 07:15

score 0 · Answer 2 · answered Dec 25 '22 at 11:12

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:

Nginx multiple server with different port

2 Answers2