反向代理多个 angular 应用程序使用 Nginx

Question

I have two different angular applications (lets say alpha and beta) which runs in two docker nginx based containers where I need to route to the angular app based on the subdomain. There I have used another nginx instance in docker which used as a reverse proxy.There i want to use SSL too. The initial routing works fine. But when I refresh the browser it gives 404. I tried try_files $uri $uri/ /index.html; but it didn't work. Can someone plz help me here.

Basically there are 3 containers running. Two for angualr apps and one for proxy. All runs in a single docker host.

The mentioned angular apps runs in nginx containers and they use below nginx configuration.

Alpha version uses:

server {
    listen  5100;
    server_name  localhost;

    location / {
        root    /usr/share/nginx/html;
    }
}

Beta version uses:

server {
    listen  5200;
    server_name  localhost;

    location / {
        root    /usr/share/nginx/html;
    }
}

They both running in two different ports other than port 80;

Below is the nginx reverse proxy configuration that I wrote.

upstream valpha {
    server alpha:5100;
}

upstream vbeta {
    server beta:5200;
}

server {
    listen       80;
    server_name  *.mydomain.com;
    return       301 https://$host$request_uri;
}

server {
    listen  443 ssl;
    server_name  subdomainalpha.mydomain.com;

    ssl_certificate /etc/ssl/mydomain.com.crt;
    ssl_certificate_key /etc/ssl/mydomain.com.key;

    location / {
        proxy_pass http://valpha;
    }
}

server {
    listen  443 ssl;
    server_name  subdomainbeta.mydomain.com;

    ssl_certificate /etc/ssl/mydomain.com.crt;
    ssl_certificate_key /etc/ssl/mydomain.com.key;

    location / {
        proxy_pass http://vbeta;
    }
}

Thanks in advance.

Answer 1

You are using the same root for both of them. You should be doing something like below

location / {
  alias /var/www/html/app_one/dist/;
  try_files $uri$args $uri$args/ /app_one/index.html;
}

And the other server should use some different folder like alias /var/www/html/app_two/dist/ ;

Answer 2

I achieved my what I wanted to do by overriding nginx configuration of the angular docker image (not the reverse proxy).

file - Dockerfile

FROM nginx:alpine
COPY /www /usr/share/nginx/html
COPY default.conf /etc/nginx/conf.d

file - default.conf

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}

I achieved it by running each angular container with default port 80 and used the container name inside as proxy_pass. Since all containers in the same bridge network I could access them by name. With above configuration I cloud achieve the reloading issue.