1

I have django and angular app both as a container. it works fine when I run the two apps via nginx in different ports like below.

worker_processes 1;

events { worker_connections 1024; }

http {

  # Django config
  upstream django-api {
    ip_hash;
    server django-api:8000;
  }

  # Angular config
  upstream angular-apache2 {
    ip_hash;
    server angular-apache2:80;
  }
  
  #Angular config
  server {
    location / {
          proxy_pass http://angular-apache2/;
      }
    listen 80;
    server_name localhost;
  }


  #Django config
  server {
    location / {
          proxy_pass http://django-api/;
      }
    listen 8000;
    server_name localhost;
  }

but when I try to run in on the same port, Im getting this error message http://localhost/runtime-es2015.js net::ERR_ABORTED 404 (Not Found)

"/etc/nginx/html/runtime-es2015.js" failed (2: No such file or directory), client: 192.168.16.1, server: localhost, request: "GET /runtime-es2015.js HTTP/1.1", host: "localhost", referrer: "http://localhost/web/

worker_processes 1;

events { worker_connections 1024; }

http {

  # Django config
  upstream django-api {
    ip_hash;
    server django-api:8000;
  }

  # Angular config
  upstream angular-apache2 {
    ip_hash;
    server angular-apache2:80;
  }
  
  server {
    location /web/ {
        proxy_pass http://angular-apache2/;
    }

    location /api {
        proxy_pass http://django-api/api/v1;
    }        

    listen 80;
    server_name localhost;
  }

here is my docker-compose

version: "3"

services:

  reverse-proxy:
    build:
      context: ./nginx
    container_name: ${PROJECT_NAME}--nginx
    ports:
      - '8000:8000'
      - '80:80'
    # volumes:
    #   - ./nginx/django.conf:/etc/nginx/conf.d
    depends_on:
      - django-api
      - angular-apache2

  angular-apache2:
    build:
      context: ./angular
    container_name: ${PROJECT_NAME}--angular
    ports:
      - '80'
    volumes:
      - ./angular/dist/ng7:/var/www/html
      - ./config/apache/angular-000-default.conf:/etc/apache2/sites-available/000-default.conf

  django-api:
    build:
      context: ./django
    command: gunicorn data_tracker.wsgi:application --bind 0.0.0.0:8000
    #command: systemctl restart apache2
    container_name: ${PROJECT_NAME}--django
    ports:
      - '8000'
    volumes:
      - ./django:/django
      - ./config/apache/django-000-default.conf:/etc/apache2/sites-available/000-default.conf
koukou
  • 65
  • 1
  • 7
  • Does this answer your question? [NGINX Run multiple application on same port with different route path](https://stackoverflow.com/questions/62759181/nginx-run-multiple-application-on-same-port-with-different-route-path) – Ivan Shatsky Oct 10 '20 at 15:03
  • The reason is that your angular app generate assets links like `/runtime-es2015.js` which won't be captured by `location /web/ { ... }` block thus leading for 404 error. – Ivan Shatsky Oct 10 '20 at 15:06
  • it turned that the reason it was not working was because of this. https://stackoverflow.com/questions/60104991/angular-production-build-cant-load-loading-module-was-blocked-because-of-a-di – koukou Oct 11 '20 at 16:55

0 Answers0