My docker compose container is serving the nginx default html instead of my angular app

I have made a MEAN stack application and want to containerize it using docker for publishing on azure app services. To do so i created 3 service, the client, the server and the nginx for handling the reverse proxy. as per my compose.yaml file:

services:

nginx:
build:
context: ./proxy
dockerfile: Dockerfile # Custom Nginx Dockerfile
container_name: proxy
image: jeroenp98/waresy-proxy:latest
ports:
- "80:80" # Expose Nginx on port 80 to the public
depends_on:
- client # Ensure frontend and backend are running before Nginx starts
- server
networks:
- app-network

server:
build: .
container_name: waresy-server
image: jeroenp98/waresy-server:latest
environment:
- JWT_SECRET=${JWT_SECRET}
- MONGODB_URI=${MONGODB_URI}
expose:
- "3000:3000"
networks:
- app-network

client:
build:
context: ./client
dockerfile: Dockerfile
container_name: waresy-client
image: jeroenp98/waresy-client:latest
expose:
- "80:80"
depends_on:
- server
networks:
- app-network

networks:
app-network:
driver: bridge


However the issue i'm running in to is when i run the container using docker compose up and visit localhost:80 i will see the default nginx welcome screen instead of my angular app. enter image description here The api is working however and i can make requests to it.

i cannot figure out why the container is serving this index.html file and not the index.html generated by the npm build command.

this is the nginx.conf settings:

server {
listen 80;
listen [::]:80;

# Proxy requests to the frontend
location / {
proxy_pass http://client:80; # Forwarding to the frontend's internal port 80
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}

# Proxy requests to the backend API
location /api/ {
proxy_pass http://server:3000; # Forwarding to backend's internal port 3000
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}


client dockerfile

# client/Dockerfile

FROM node:22.12.0-alpine AS builder

WORKDIR /app

COPY package.json package-lock.json ./

RUN npm install -g @angular/cli

RUN npm install

COPY . .

RUN npm run build

FROM nginx:alpine



# Copy built Angular files
COPY --from=builder /app/dist/client/browser /usr/share/nginx/html

CMD ["nginx", "-g", "daemon off;"]



nginx dockerfile

# Use the official Nginx image
FROM nginx:alpine

# Remove the default Nginx config
RUN rm /etc/nginx/conf.d/default.conf

# Copy Nginx config to the container
COPY nginx.conf /etc/nginx/conf.d/

# Expose port 80 to the outside world
EXPOSE 80

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



Any help would be appreciated

i checked the files in the docker container but couldn't find the index.html file from the angular app. i checked the output path of the angular.json file which is set to "outputPath": "dist/client" i tried copying the files from both /app/dist/client and /app/dist/client/browser

Continue reading...