Nginx Reverse proxy configuration for angular micro front end

I want to configure a microfrontend architecture behind nginx as a reverse proxy

I am having problems with routing the subpaths correctly

# compose
services:
fe:
build:
context: .
args:
APP_NAME: microfe-monorepo
PORT_NUMBER: 4200
target: dev
container_name: fe
ports:
- '4200:4200'
environment:
- APP_NAME=microfe-monorepo
- PORT_NUMBER=4200
users:
build:
context: .
args:
APP_NAME: users
PORT_NUMBER: 4201
target: dev
container_name: users
ports:
- '4201:4201'
environment:
- APP_NAME=users
- PORT_NUMBER=4201
gateway:
image: nginx:1.27.3-alpine
container_name: gateway
ports:
- '80:80'
volumes:
- ./gateway.nginx.conf:/etc/nginx/conf.d/default.conf
links:
- fe
- users


My dockerfile is as follows

# Dockerfile
# Base stage
FROM node:23-alpine as base
ARG APP_NAME
RUN mkdir -p /app
WORKDIR /app
COPY ["decorate-angular-cli.js", "package*.json", "/app/"]
RUN npm ci
COPY . /app

# Dev stage
FROM node:23-alpine as dev
ARG APP_NAME
ARG PORT_NUMBER
RUN mkdir -p /app
WORKDIR /app
COPY --from=base /app /app
RUN npm ci
EXPOSE ${PORT_NUMBER}
CMD npx nx serve $APP_NAME --port=$PORT_NUMBER --host=0.0.0.0

# Build stage
FROM node:23-alpine as build
ARG APP_NAME
RUN mkdir -p /app
WORKDIR /app
COPY --from=base /app /app
RUN npx nx build ${APP_NAME} --configuration=development --base-href /${APP_NAME}/

# Production stage
FROM nginx:1.22.0-alpine as production
ARG APP_NAME
RUN rm -rf /usr/share/nginx/html/*
COPY --from=build /app/dist/apps/${APP_NAME} /usr/share/nginx/html/
COPY nginx.default.conf /etc/nginx/conf.d/default.conf


And my nginx config


map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}

server {
include mime.types;
types
{
application/javascript mjs;
}

listen 80;
listen [::]:80;
server_name localhost;

root /usr/share/nginx/html;
index index.html;

location / {
proxy_pass http://fe:4200/;

}

location /ng-cli-ws {
proxy_pass http://fe:4200;
proxy_set_header Host $host;
proxy_http_version 1.1;
proxy_cache_bypass $http_upgrade;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}

location /users/ {
proxy_pass http://users:4201/;
}

# default proxy settings
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

}


Now if I hit http://localhost I can see the result is being served from http://fe If I hist http://localhost/users I would expect to see the result being served from http://users

But I don't. I see the content from fe served again and the following error in DevTools

ERROR RuntimeError: NG04002: Cannot match any routes. URL Segment: 'users'

It looks to me like the /users segment is being forward to fe and the location block for /users is not working

Can anyone help?

Continue reading...