将应用程序 URL 从一个选项卡复制到另一个选项卡导致 404 错误

Question

我有一个应用程序，其后端在 Spring Boot 中，字体以 Angular 结尾，我正在使用微服务。我已经对每个服务进行了 docarize，它运行时没有任何问题。复制应用程序时遇到的问题登录后作为 docker-compose up 运行时的 URL 并将其粘贴到浏览器的另一个选项卡中，我收到 404 错误。但是在本地，当我做同样的事情时它没有发生。将本地 URL 复制到其他选项卡后，将我重定向到登录页面。 我无法弄清楚问题并寻找某种线索。

这是 Angular docker 文件：

# base image
FROM node:10.16.0-alpine AS build-step
# set working directory
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:1.16.1-alpine
COPY --from=build-step /app/dist/* /usr/share/nginx/html/
EXPOSE 80
CMD ["nginx","-g","daemon off;"]

docker-compose.yml:

version: '3'
services:
  mysql:
    image: mysql:5.5
    network_mode: host
    container_name: mysql-container
    ports:
      - 3306:3306  
    environment:
     MYSQL_ROOT_PASSWORD: password
     MYSQL_DATABASE: Test
     MYSQL_USER: root
     MYSQL_PASSWORD: password
  mongo:
    image: mongo:3.6
    network_mode: host
    container_name: mongo-container
    ports:
      - 27017:27017 
  eurekaservice:
    image:  service1: eurekaservice
    container_name: eureka-container
    build: netflix-eureka-naming-server/ 
    restart: always
    ports:
      - 8761:8761      
    healthcheck:
      test: "exit 0"
  zuulservice:
    image:  service2: zuuluservice
    container_name: zuuluservice-container
    build: netflix-zuul-api-gateway-server/
    restart: always
    network_mode: host
    ports:
      - 8765:8765
    healthcheck:
      test: "exit 0"
  rabbitmq:
    image: rabbitmq:3-management
    hostname: rabbit
    container_name: rabbitmq-container
    ports:
      - 5672:5672
      - 15672:15672 
  accountmanagerservice:
    image: serviceAuth: accountmanagerservice
    build: accountmanager/
    restart: always
    network_mode: host
    container_name: accountmanagerservice-container
    ports: 
      - 9200:9200
    depends_on:
      - mysql
      - eurekaservice 
  bookmarkservice:
    image: servicebookmark: bookmarkservice
    restart: always
    network_mode: host
    container_name: bookmarkservice-container 
    ports:
      - 6078:6078
    depends_on:
      - mongo
      - eurekaservice
      - rabbitmq 
  recommendationservice:
    image: servicerecommended:recommendationservice
    build: recommendersystem/
    restart: always
    network_mode: host
    container_name: recommendationService-container
    ports:
      - 6082:6082
    depends_on:
      - mongo
      - eurekaservice
      - rabbitmq
  appui:
    image:  appuiservice: appui
    container_name: angular-container
    ports:
      - 80:80 

截图：

Answer 1

您的问题是您的 angular/nginx 容器。 nginx 正在寻找仪表板文件名。 docker 中的默认 nginx 配置不会将非静态 (css/js) 的 url 指向您的单个 index.html。

将此 conf 文件添加到您的 nginx 容器中

worker_processes 1;
events { worker_connections 1024; }

http {

    include /etc/nginx/mime.types;

    sendfile on;

    gzip              on;
    gzip_http_version 1.0;
    gzip_proxied      any;
    gzip_min_length   500;
    gzip_disable      "MSIE [1-6]\.";
    gzip_types        text/plain text/xml text/css
                      text/comma-separated-values
                      text/javascript
                      application/x-javascript
                      application/atom+xml;

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

        root /usr/share/nginx/html;

        index index.html;

        server_name _;

        location / {
            try_files $uri $uri/ /index.html; // any non static goes here
        }

        location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
            # Some basic cache-control for static files to be sent to the browser
            expires max;
            add_header Pragma public;
            add_header Cache-Control "public, must-revalidate, proxy-revalidate";
        }

    }
}

在您的第一个副本下的dockerfile 中添加这一行

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