How to realise multiple Blazor WASM applications with docker-compose

Viewed 202

For our project we want to host two Blazor WASM applications in their own docker container and use a nginx image to act as a reverse proxy. The docker-compose file looks similar to this:

version: "3.8"

services: 
  wasmapp1:
    volumes:   
      - ./config/wasmapp1/certs.d:/etc/ssl
      - ./config/wasmapp1/nginx/nginx.conf:/etc/nginx/nginx.conf
    build:
      context: build/context     
    networks: 
      - network1
    expose:
      - 80
  wasmapp2:
    volumes:   
      - ./config/wasmapp2/certs.d:/etc/ssl
      - ./config/wasmapp2/nginx/nginx.conf:/etc/nginx/nginx.conf
    build:
      context: build/context
    networks: 
      - network1
    expose:
      - 80
  proxy:
    image: nginx
    volumes:   
      - ./config/nginx/certs.d:/etc/ssl
      - ./config/nginx/nginx.conf:/etc/nginx/nginx.conf
    ports:
      - "80:80"
      - "443:443"
    networks:
      - network1
  networks:
    network1:
      driver: bridge 

The nginx config for the proxy looks like this:

events { }  
http {  
    include mime.types;  

    server {
        listen 80 default_server;
        return 301 https://$host$request_uri;

    }
  
    server {  
        listen 443 ssl;

        ssl_certificate /etc/ssl/cert.crt;
        ssl_certificate_key /etc/ssl/cert.key;
        ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
        ssl_ciphers         HIGH:!aNULL:!MD5;

        server_name wasmserver;

        access_log /var/log/nginx/nginx.vhost.access.log;

        error_log /var/log/nginx/nginx.vhost.error.log;          

        location /wasmapp1{
            proxy_http_version 1.1;
            proxy_set_header   Upgrade $http_upgrade;
            proxy_set_header   Connection keep-alive;
            proxy_set_header   Host $host;
            proxy_cache_bypass $http_upgrade;
            proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header   X-Forwarded-Proto $scheme;
            proxy_redirect      off;
            proxy_pass https://wasmapp1;
        }

        location /wasmapp2{
            proxy_http_version 1.1;
            proxy_set_header   Upgrade $http_upgrade;
            proxy_set_header   Connection keep-alive;
            proxy_set_header   Host $host;
            proxy_cache_bypass $http_upgrade;
            proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header   X-Forwarded-Proto $scheme;
            proxy_redirect      off;
            proxy_pass https://wasmapp2;
        }
    }
} 

The problem we are facing is that when we call localhost/wasmapp1, blazor tries to load all the js and css files from localhost/ directly and not from localhost/wasmapp1. It seems like the inital GET gets to localhost/wasmapp1 but the following calls do not.

Browser window

Browser network output

How do we have to configure nginx and the blazor apps to make this work?

0 Answers
Related