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

Posted 2023-02-27

【中文标题】将应用程序 URL 从一个选项卡复制到另一个选项卡导致 404 错误

【英文标题】：Copying application url from one tab to another tab causing 404 error

【发布时间】：2020-03-17 10:25:07

【问题描述】：

我有一个应用程序，其后端在 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 

截图：

【参考方案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

【讨论】：

我有一个疑问。实际上我还没有在我的机器上手动安装 nginx。我已经对其进行了对接。那么我怎么能添加 nginx.conf 文件，因为它是 dockerized。

@stumbler 将此行 COPY nginx.conf /etc/nginx/nginx.conf 添加到您的 dockerfile 并将 nginx.conf 放在您的主 angular 目录中。这会将nginx.conf 添加到您的 nginx 容器中。您正在将 localhost 移植到 docker 主机 80:80，因此不需要任何 nginx 本地安装

一旦你加载你的 localhost Angular 就会使用 Angular 路由器重定向到仪表板 url。在您重新加载之前，这很好。您的 nginx docker 容器不知道所有请求（css/js 除外）都需要转到 angular index.html 文件。您需要设置 nginx docker 容器以将所有请求指向非静态的 index.html 文件。 try_files $uri $uri/ /index.html; 此行查看文件是否为静态文件，如果是则返回文件 (css,js)，如果不是则指向 index.html 文件。 Angular 会知道指向哪条路径

感谢@Varcorb 的回答。我会检查并通知你。

我在我的角度应用程序的主目录中添加了 nginx.conf 文件，还添加了 COPY nginx.conf /etc/nginx/nginx.conf ，然后对角度应用程序进行了对接。当我运行 docker compose 时，我在日志中收到以下错误：2019/11/22 04:21:59 [emerg] 1#1: unexpected "" in /etc/nginx/nginx.conf:33 nginx： [emerg] /etc/nginx/nginx.conf:33 2019/11/22 04:22:29 中的意外“” [emerg] 1#1：/etc/nginx/nginx.conf:33 中的意外“” nginx：[emerg] /etc/nginx/nginx.conf:33 中的意外“”