У меня есть полноценное веб-приложение с серверной частью Spring Boot и внешним интерфейсом Angular, оба докеризованы с помощью Docker и Docker Compose. Хотя я могу получить доступ к корневому URL-адресу моего приложения Angular, переход к другим маршрутам приводит к появлению сообщения «Добро пожаловать в nginx!» страница

Моя установка

Docker Создать файл:

services:

  postgres:
    container_name: postgres-readly
    image: postgres
    environment:
      POSTGRES_USER: username
      POSTGRES_PASSWORD: password
      PGDATA: /var/lib/postgresql/data
      POSTGRES_DB: readly
    ports:
      - 5432:5432
    volumes:
      - postgres:/data/postgres
    networks:
      - readly-network
    restart: unless-stopped

  mail-dev:
    container_name: mail-dev-bsn
    image: maildev/maildev
    ports:
      - 1080:1080
      - 1025:1025

  readly-api:
    container_name: readly-api
    image: readly/readly:0.0.1-SNAPSHOT
    ports:
      - 8088:8088
    networks:
      - readly-network
    depends_on:
      - postgres

  readly-frontend:
    container_name: readly-frontend
    image: readly/readly-frontend:0.0.1-SNAPSHOT
    ports:
      - 4200:80
    networks:
      - readly-network
    depends_on:
      - readly-api

networks:
  readly-network:
    driver: bridge
volumes:
  postgres:
    driver: local

Угловой Docker-файл:

Этап 1. Создание приложения Angular

# Stage 1: Build the Angular application
FROM node:18 as build-stage

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

FROM nginx:alpine

COPY nginx.conf /etc/nginx/nginx.conf

COPY --from=build-stage /app/dist/frontend /usr/share/nginx/html

EXPOSE 80

Конфигурация Nginx (nginx.conf):

events {}

http {
    server {
        listen 80;

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

        # Handle JavaScript | CSS files with the correct MIME type
        location ~ \.(js|css)$ {
            root /usr/share/nginx/html;
            include /etc/nginx/mime.types;
        }

        # Catch-all location to handle refreshes on any route
        location ~ ^/.+$ {
            root /usr/share/nginx/html;
            index index.html;
            try_files $uri /index.html;
        }
    }
}

Проблема Когда я перехожу по адресу http://localhost, я вижу корневую страницу моего приложения Angular. Однако переход к другим маршрутам, таким как /login, приводит к тому, что Nginx отображает страницу приветствия по умолчанию или возвращает ошибку 404. Вот соответствующие журналы:

2024-05-29 23:15:38 172.18.0.1 - - [29/May/2024:22:15:38 +0000] "GET / HTTP/1.1" 200 615 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36"
2024-05-29 23:15:42 172.18.0.1 - - [29/May/2024:22:15:42 +0000] "GET / HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36"
2024-05-29 23:19:14 172.18.0.1 - - [29/May/2024:22:19:14 +0000] "GET /login HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36"

Я ожидал, что после настройки Nginx для обслуживания index.html для всех маршрутов я смогу переходить по различным путям в моем приложении Angular (например, /login, /dashboard), не сталкиваясь со страницей Nginx по умолчанию или ошибками 404. Вместо этого я бы увидел соответствующие компоненты Angular, отображаемые для каждого маршрута.

Дополнительная информация

• Угловая версия: 17.1.0

• Версия весенней загрузки: 3.2.5

• Версия Nginx: альпийская

Несмотря на эти усилия, проблема остается. Что я упускаю или делаю неправильно? Любая помощь будет принята с благодарностью!