Я пытаюсь настроить проект 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"]
Директиву 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
и путь, чтобы он соответствовал тому, который вы создали в своем проекте.