Как перенаправить на index.html при использовании proxy_pass

Я пытаюсь настроить проект Angular/NestJS, который использует докер. Все работает, за исключением того, что если я перезагружу интерфейс Angular (admin) по любому URL-адресу, отличному от /, он выдает мне 404. Я считаю, что мне нужна часть try_files $uri $uri/ /index.html =404; в location / файла default.config, но я не могу понять, как ее получить работать с proxy_pass. Кто-нибудь заработал или знает секрет?

Структура папок

my-project/ -> root
my-project/admin/ -> Angular Project
my-project/api/ -> NestJS API Project

мой-проект/default.config

upstream api {
  server api:3000;
}

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

    # Frontend
    location / {
        # root /usr/share/nginx/html;
        # index index.html index.htm;
        # try_files $uri $uri/ /index.html =404;
        proxy_pass http://admin;
    }

    # Backend
    location /api {
      rewrite /api/(.*) /$1 break;
      proxy_pass http://api;
    }

    # You may need this to prevent return 404 recursion.
    location = /404.html {
        internal;
    }
}

мой-проект/докер-compose.yml

version: "3.8"

services:
  api:
    container_name: api
    build:
      context: ./api
      target: development
    volumes:
      - ./api:/usr/src/app
      - /usr/src/app/node_modules
    ports:
      - ${SERVER_PORT}:${SERVER_PORT}
      - 9229:9229
    command: npm run start:prod
    env_file:
      - .env
    networks:
      - webnet
    depends_on:
      - redis
      - postgres
  admin:
    container_name: admin
    build:
      context: ./admin
      # target: development
    # ports:
    #   - 80:80
    networks:
      - webnet
  nginx-proxy:
    depends_on:
      - admin
      - api
    image: nginx:alpine
    volumes:
      - $PWD/default.conf:/etc/nginx/conf.d/default.conf
    networks:
      webnet:
    ports:
      - 80:80
  redis:
    container_name: redis
    image: redis:6
    restart: always
    ports:
      - 6379:6379
    volumes:
      - redisdata:/data
    networks:
      - webnet
  postgres:
    container_name: postgres
    image: postgis/postgis
    networks:
      - webnet
    environment:
      POSTGRES_PASSWORD: ${DB_PASSWORD}
      POSTGRES_USER: ${DB_USERNAME}
      POSTGRES_DB: ${DB_DATABASE_NAME}
      PG_DATA: /var/lib/postgresql/data
    ports:
      - 5432:5432
    volumes:
      - pgdata:/var/lib/postgresql/data
networks:
  webnet:
volumes:
  pgdata:
  redisdata:

мой-проект/admin/Dockerfile

# Stage 1: Compile and Build angular codebase

# Use official node image as the base image
FROM node:latest as build

# Set the working directory
WORKDIR /usr/local/app

# Add the source code to app
COPY ./ /usr/local/app/

# Install all the dependencies
RUN npm install

# Generate the build of the application
RUN npm run build


# Stage 2: Serve app with nginx server

# Use official nginx image as the base image
FROM nginx:latest

# Copy the build output to replace the default nginx contents.
COPY --from=build /usr/local/app/dist/my-project /usr/share/nginx/html

# Expose port 80
EXPOSE 80

мой-проект/API/Dockerfile

FROM node:12.13-alpine As development

WORKDIR /usr/src/app

COPY package*.json ./

RUN apk add --update python3 make g++ && rm -rf /var/cache/apk/*

RUN npm install

COPY . .

RUN npm run build

FROM node:12.13-alpine as production

ARG NODE_ENV=production
ENV NODE_ENV=${NODE_ENV}

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install --only=production

COPY . .

COPY --from=development /usr/src/app/dist ./dist

CMD ["node", "dist/main"]
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
39
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Директиву try_files необходимо установить в компоненте Angular apps Nginx Docker. Первый экземпляр Nginx не имеет доступа к файловой системе контейнеров Angular, которая необходима для проверки существования файла.

Создайте файл конфигурации Nginx, admin/nginx-config.conf:

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

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

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

Скопируйте файл в контейнер приложения администратора:

# Stage 2: Serve app with nginx server

# Use official nginx image as the base image
FROM nginx:latest

# Set custom Nginx configuration
COPY ./nginx-config.conf /etc/nginx/conf.d/default.conf

# Copy the build output to replace the default nginx contents.
COPY --from=build /usr/local/app/dist/my-project /usr/share/nginx/html

# Expose port 80
EXPOSE 80

Возможно, вам придется изменить имя файла ./nginx-config.conf и путь, чтобы он соответствовал тому, который вы создали в своем проекте.

Другие вопросы по теме