Nginx Reverse Proxy Issue with Multiple Angular Applications in Docker - Stack Overflow

admin管理员组

文章数量:1350072

I have some trouble running multiple Nginx containers in a Docker environment to serve different versions of an Angular application. The setup includes:

• mobile-v1: An older AngularJS application served on port 8090.
• mobile-v2: A new Angular version served on port 8091.
• A reverse proxy Nginx container to manage domain-based routing on port 80.

While I can successfully ping the containers and make direct curl requests (curl -I http://mobile-v2:8091), accessing the applications through the reverse proxy (curl -I http://localhost) returns a 403 Forbidden error.

Docker-Compose Configuration:
services:
  mobile-v1:
    build:
      context: ../staging/cplan-v1-mobile-frontend
      dockerfile: ../../cplan-docker-compose/dockerfiles/staging/mobile-v1.Dockerfile
    container_name: mobile-v1
    ports:
      - "8090:8090"
    volumes:      
      - ./nginx/staging/front-services/cplan-mobile-v1.conf:/etc/nginx/conf.d/default.conf
      - ./logs/staging/nginx:/var/log/nginx
      - /etc/timezone:/etc/timezone:ro
      - /etc/localtime:/etc/localtime:ro
    networks:
      - app-network
    restart: always

  mobile-v2:
    build:
      context: ../staging/cplan-v2-mobile-frontend
      dockerfile: ../../cplan-docker-compose/dockerfiles/staging/mobile-v2.Dockerfile
    container_name: mobile-v2
    ports:
      - "8091:8091"
    volumes:
      - ./nginx/staging/front-services/cplan-mobile-v2.conf:/etc/nginx/conf.d/default.conf
      - ./logs/staging/nginx:/var/log/nginx
      - /etc/timezone:/etc/timezone:ro
      - /etc/localtime:/etc/localtime:ro
    networks:
      - app-network    
    restart: always

networks:
  app-network:
    driver: bridge

Reverse Proxy Nginx Configuration:

server {
    listen 80;
    listen [::]:80;
    server_name mobile-v1.xxx.fr;

    location / {
        proxy_pass http://mobile-v1:8090;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

server {
    listen 80;
    listen [::]:80;
    server_name mobile-v2.xxx.fr;

    location / {
        proxy_pass http://mobile-v2:8091;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Nginx Configuration for mobile-v2:

server {
    listen 8091;
    listen [::]:8091;

    server_name mobile-v2;

    root /usr/share/nginx/html/mobile-v2;
    index index.html;

    access_log /var/log/nginx/access-mobile-v2.log;
    error_log /var/log/nginx/error-mobile-v2.log;

    location / {
        try_files $uri /index.html;
    }
    error_page 404 /index.html;
}

Tests Conducted (From host container nginx proxy)

• ping mobile-v2 → Success
• curl -I http://mobile-v2:8091 → Success (Returns HTTP 200 OK)
• curl -I http://localhost → Fails with HTTP 403 Forbidden

I've built the mobile app using Docker's multi-stage build feature. Previously, I explored sharing a volume between the Nginx proxy and the Angular app. It worked, but it wasn’t very convenient for recompiling the app.

If anybody have an idea it will be helpful

I have some trouble running multiple Nginx containers in a Docker environment to serve different versions of an Angular application. The setup includes:

• mobile-v1: An older AngularJS application served on port 8090.
• mobile-v2: A new Angular version served on port 8091.
• A reverse proxy Nginx container to manage domain-based routing on port 80.

While I can successfully ping the containers and make direct curl requests (curl -I http://mobile-v2:8091), accessing the applications through the reverse proxy (curl -I http://localhost) returns a 403 Forbidden error.

Docker-Compose Configuration:
services:
  mobile-v1:
    build:
      context: ../staging/cplan-v1-mobile-frontend
      dockerfile: ../../cplan-docker-compose/dockerfiles/staging/mobile-v1.Dockerfile
    container_name: mobile-v1
    ports:
      - "8090:8090"
    volumes:      
      - ./nginx/staging/front-services/cplan-mobile-v1.conf:/etc/nginx/conf.d/default.conf
      - ./logs/staging/nginx:/var/log/nginx
      - /etc/timezone:/etc/timezone:ro
      - /etc/localtime:/etc/localtime:ro
    networks:
      - app-network
    restart: always

  mobile-v2:
    build:
      context: ../staging/cplan-v2-mobile-frontend
      dockerfile: ../../cplan-docker-compose/dockerfiles/staging/mobile-v2.Dockerfile
    container_name: mobile-v2
    ports:
      - "8091:8091"
    volumes:
      - ./nginx/staging/front-services/cplan-mobile-v2.conf:/etc/nginx/conf.d/default.conf
      - ./logs/staging/nginx:/var/log/nginx
      - /etc/timezone:/etc/timezone:ro
      - /etc/localtime:/etc/localtime:ro
    networks:
      - app-network    
    restart: always

networks:
  app-network:
    driver: bridge

Reverse Proxy Nginx Configuration:

server {
    listen 80;
    listen [::]:80;
    server_name mobile-v1.xxx.fr;

    location / {
        proxy_pass http://mobile-v1:8090;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

server {
    listen 80;
    listen [::]:80;
    server_name mobile-v2.xxx.fr;

    location / {
        proxy_pass http://mobile-v2:8091;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Nginx Configuration for mobile-v2:

server {
    listen 8091;
    listen [::]:8091;

    server_name mobile-v2;

    root /usr/share/nginx/html/mobile-v2;
    index index.html;

    access_log /var/log/nginx/access-mobile-v2.log;
    error_log /var/log/nginx/error-mobile-v2.log;

    location / {
        try_files $uri /index.html;
    }
    error_page 404 /index.html;
}

Tests Conducted (From host container nginx proxy)

• ping mobile-v2 → Success
• curl -I http://mobile-v2:8091 → Success (Returns HTTP 200 OK)
• curl -I http://localhost → Fails with HTTP 403 Forbidden

I've built the mobile app using Docker's multi-stage build feature. Previously, I explored sharing a volume between the Nginx proxy and the Angular app. It worked, but it wasn’t very convenient for recompiling the app.

If anybody have an idea it will be helpful

• angular
• docker
• nginx
• curl
• docker-compose

Share Improve this question Follow asked Apr 2 at 6:26 JEKESJEKES 31111 gold badge33 silver badges1414 bronze badges 2

• You don't have anything in your reverse proxy config that handles request for the server_name localhost. What do you expect will happen when you do curl -I http://localhost? Try setting the Host header list this curl -H 'Host: mobile-v2' -I http://localhost. – Hans Kilian Commented Apr 2 at 9:01
• Hello Thanks for you reply. You're right I've mentionned this because I've thought it can give some input – JEKES Commented 2 days ago

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Sorry, I'm just a noob, I've fot to add a port 80:80 on my nginx proxy

本文标签： Nginx Reverse Proxy Issue with Multiple Angular Applications in DockerStack Overflow