我正在嘗試設定一個使用 docker 的 Angular/NestJS 專案。一切正常，除非我在任何 url 上重新加載 Angular 前端（管理員），而不是/給我一個 404。我相信我需要檔案的try_files $uri $uri/ /index.html =404;inlocation /部分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;
}
}
我的專案/docker-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:
我的專案/管理員/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"]
uj5u.com熱心網友回復：
該try_files指令需要在 Angular 應用程式 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檔案名和路徑以匹配您在專案中創建的檔案名和路徑。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/455169.html
上一篇：來自守護行程的Docker-compose錯誤回應：nginx的清單：1.15-alphine未找到：清單未知：清單未知