Angular App Shows Nginx Default Page Instead of App Content When Running in Docker

I'm working on a project that includes a Spring Boot backend and an Angular frontend, both containerized using Docker. The issue arises when I start the application with docker-compose up. Although everything seems to run correctly, when I access http://localhost:80, I'm faced with the default Nginx page instead of my Angular application's content.

Here are the details of my Docker setup:

• Backend Dockerfile

# Start with a base image containing Java runtime
FROM openjdk:21-oracle as build

# Set the current working directory inside the image
WORKDIR /app

# Copy the pom.xml file
COPY mvnw .
COPY .mvn .mvn
COPY pom.xml .

# Fetch all dependencies
RUN ./mvnw dependency:go-offline -B

# Copy the project source
COPY src src

# Package the application
RUN ./mvnw package -DskipTests

# Run the application
FROM openjdk:21-oracle
COPY --from=build /app/target/*.jar app.jar
ENTRYPOINT ["java","-jar","/app.jar"]

• Frontend Dockerfile:

# build from source
# ----------------------------
FROM node:20 AS build

WORKDIR /app

COPY package*.json .
RUN npm install

COPY . .
RUN npm run build

# ----------------------------
# run with nginx
# ----------------------------
FROM nginx

RUN rm /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/conf.d
COPY --from=build /app/dist/frontend /usr/share/nginx/html

• nginx.conf inside frontend directory:

server {
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
}
}

• docker-compose.yml in root directory of project:

version: '3.8'

services:
backend:
build: ./backend
ports:
- "8080:8080"
environment:
SPRING_DATASOURCE_URL: jdbcostgresql://db:5432/myapp
SPRING_DATASOURCE_USERNAME: myappuser
SPRING_DATASOURCE_PASSWORD: myapppass
SPRING_JPA_HIBERNATE_DDL_AUTO: update
depends_on:
- db

frontend:
build: ./frontend
ports:
- "4200:80"
depends_on:
- backend

db:
image: postgres:16
ports:
- "5432:5432"
environment:
POSTGRES_DB: myapp
POSTGRES_USER: myappuser
POSTGRES_PASSWORD: myapppass
volumes:
- postgres_data:/var/lib/postgresql/data

volumes:
postgres_data:


I expected that navigating to http://localhost:80 would display the Angular application, but instead, I'm only able to see the default Nginx page. I've verified that the Angular build is successful.

Continue reading...