WebSocket STOMP connection 404 through NGINX + Angular frontend container

[Zikou]

Hi all,

I have an Angular frontend container served with Nginx, and a Spring Cloud Gateway backend exposing a WebSocket endpoint (/api/v1/notification/ws).

My Angular environment:
apiUrl = ‘http://vm-ip:8222/api/v1’;
wsUrl = ‘/notification/ws’;

Dockerfile

FROM node:18 AS build

# Set working directory
WORKDIR /app

# Copy package.json and package-lock.json first to leverage Docker cache
COPY package*.json ./

# Install dependencies
RUN npm install --legacy-peer-deps

# Copy the rest of the application
COPY . .

# Build the Angular application
RUN npm run build -- --configuration=development

# Stage 2: Serve the application with Nginx
FROM nginx:alpine

#Copy Nginx configuration
COPY nginx.conf /etc/nginx/conf.d/default.conf

# Copy the built application from the previous stage
COPY --from=build /app/dist/demo2/browser /usr/share/nginx/html



# Expose port 80
EXPOSE 80

# Start Nginx
CMD ["nginx", "-g", "daemon off;"]

nginx.conf
server {
listen 80;
server_name _;
root /usr/share/nginx/html;

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

}

Spring Cloud Gateway configuration:

spring:
  application:
    name: gateway-service
  cloud:
    gateway:
      discovery:
        locator:
          enabled: true
      routes:
        - id: notification-service
          uri: lb:ws://NOTIFICATION-SERVICE
          predicates:
            - Path=/api/v1/notification/ws/**
          filters:
            - RewritePath=/api/v1/notification/ws/(?<segment>.*), /ws/${segment}

When the frontend tries to open a STOMP WebSocket connection, I get:

GET http://vm-ip:8222/api/v1/notification/ws/info 404 (Not Found)

what is the issue and how to solve it?

[alessandro]

Hi @Zikou!

Your NGINX config is quite simple, and in its current iteration, is doing little beyond checking that there is a file within your default location (which in turn would be checking for files within your root directory). Angular also seems to have gone EoL so I sadly don’t know how much help either us or Angular will be able to provide.

I do have a couple questions before trying to help further:

1. Did you check that the Angular frontend is fully functional when being served by NGINX? I have traditionally seen Angular apps being served within a node server, with NGINX acting as a proxy/entrypoint into the node server. Depending on the complexity of the Angular app, this might be something worth looking into.

2. To enable Websocket connections, you will need to configure NGINX to support them (see WebSocket proxying for more info). That being said, if you want the Websocket connection to actually go through NGINX, you will need to change your Angular configuration to route the request back to NGINX which in turn will route it back to your Spring gateway. Deploying Angular in its own node server per 1. might provide an easier route to accomplish this on your end.