Angular Azure Kubernetes Service, Docker, and Nginx - Routing for Microfrontends

Question

I am currently trying to set up a multi-microfrontend deployment hosted in AKS & served with nginx inside of a Docker container.

The Angular application is using / as base href, currently & the compiled JS is linked in the index.html at the root:

i.e.

<script src="compiled.js" />

I have set up a couple of ingress controllers in AKS to handle the routing for this.

Essentially, the primary ingress has a root:

  rules:
    - host: myhost.com
      http:
        paths:
          - path: /(.*)
            pathType: ImplementationSpecific
            backend:
              service:
                name: host-mfe-service
                port:
                  number: 8080

and one where it directs to the individual MFE's compiled output:

    - host: myhost.com
      http:
        paths:
          - path: /src/mferoot(/|$)(.*)
            pathType: ImplementationSpecific
            backend:
              service:
                name: host-mfe-service
                port:
                  number: 8080

I have confirmed the deployment is correct.

My root url at https://myhost.com/ - correctly serves my index.html. However, all of my JS, CSS, and /assets/ items are attempting to be fetched from the root.

i.e. https://myhost.com/compiled.js' - instead of https://myhost.com/src/mferoot/compiled.js`

I have confirmed that my compiled output is served correctly to https://myhost.com/src/mferoot/compiled.js - when adjusting the base href in my index.html to src/mferoot the page serves correctly & I am able to access the application.

However, the src/{microfrontend} setup is to maintain permanent, direct paths that the host can utilize to load in remoteEntry.js from other microfrontends.

I would like to be able to set this to point all JS, CSS, and other content that is referenced relative to the root back to the src/{microfrontend} on the backend & preserve the routing tree from the empty base href.

I have spent a while now messing with the nginx routing rules & proxying but have more or less reverted those at this point. Here is my current nginx.conf file

http {

   add_header X-Frame-Options SAMEORIGIN;
   add_header X-Content-Type-Options nosniff;
   add_header X-XSS-Protection "1; mode=block";
   add_header Referrer-Policy "strict-origin-when-cross-origin";
   add_header X-Permitted-Cross-Domain-Policies none;
   add_header Strict-Transport-Security "max-age=31536000; includeSubDomains";


   error_log logs/error.log debug;
   access_log logs/access.log;

    server {
        listen 80;
        server_name  localhost;

        root   /usr/share/nginx/html;
        index  index.html src/index.html;
        include /etc/nginx/mime.types;

        rewrite .*\.js.* /src/shell/$1 last;

        gzip on;
        gzip_min_length 1000;
        gzip_proxied expired no-cache no-store private auth;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;


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


        location ~* \.(eot|ttf|woff|woff2|js|json)$ {
            add_header Access-Control-Allow-Origin *;
        }
    }
}

This is the most recent attempt at a fix rewrite .*\.js.* /src/shell/$1 last;

Angular Azure Kubernetes Service, Docker, and Nginx - Routing for Microfrontends

0 Answers0