Nginx 反向代理路由 returns 其 index.html 用于静态资产请求（例如 .css 文件）

Question

我有一个 docker-compose/ Nginx 设置，它 return 在 /dashboard 路线上构建（通过 Webpack）React.js 项目（仪表板容器）。返回 index.html 文件有效。

我所有的静态资产请求（例如 /dashboard/main.css）也 return /dashboard index.html 文件。我猜这是因为 index.html 被设置为默认值 return（在仪表板 nginx.config 中）。这意味着服务器找不到文件。

根据 Docker（我运行在容器内部使用的目录上构建期间的 ls ）它们在同一目录中（root /app ，请参阅 nginx.config对于仪表板容器）作为 index.html 文件。我不确定为什么在这种情况下它仍然 returns 404/ 默认页面 (index.html)。有什么想法吗？

docker-compose.yml

version: '3.7'
services:
  # Proxies requests to internal services
  nginx-server:
    image: nginx:1.17.10
    container_name: nginx-server
    depends_on:
      - dashboard
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
    ports:
      - "80:80"
  # harvest dashboard
  dashboard:
    build:
      context: ./harvest-dashboard/client
      dockerfile: Dockerfile
    image: dashboard
    container_name: dashboard
    depends_on:
      - api-server
    ports:
      - "3000:80"
    restart: always
  api-server:
    build:
      context: ./harvest-dashboard/server
      dockerfile: Dockerfile
    image: api-server
    container_name: api-server
    ports:
      - "8000:8080"
    restart: always

nginx 服务器（root）nginx.config

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
  worker_connections 1024;
}

http {
  server {
    listen 80;
    server_name localhost 127.0.0.1;

    location /dashboard/ {
      proxy_pass            http://dashboard:80;
      proxy_set_header  X-Real-IP  $remote_addr;
      proxy_set_header  Host       $host;
      proxy_redirect off;
      proxy_intercept_errors on;
    }
  }
}

仪表板（容器）nginx.config

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
  worker_connections  1024;
}

http {
  include            /etc/nginx/mime.types;
  default_type       application/octet-stream;
  log_format  main   '$remote_addr - $remote_user [$time_local] "$request" '
  '$status $body_bytes_sent "$http_referer" '
  '"$http_user_agent" "$http_x_forwarded_for"';
  access_log         /var/log/nginx/access.log  main;
  sendfile           on;
  keepalive_timeout  65;

  server {
    listen       80;
    server_name  localhost;
    root   /app;

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

    location /api { 
      proxy_pass http://api-server:8080;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection 'upgrade';
      proxy_set_header Host $host;
      proxy_cache_bypass $http_upgrade;
    }

    error_page   500 502 503 504  /50x.html;

    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}

index.html 来自仪表板容器

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="main.css" rel="stylesheet">
</head>

<body>
    <div class="app-container"></div>
    <script type="text/javascript" src="main.js"></script>
    <script type="text/javascript" src="vendor.js"></script>
</body>

</html>

Answer 1

对于以后运行遇到相同问题的任何人。这是修复：

nginx-server（根）nginx.config

http {
  server {
    ...
    location /dashboard/ {
      proxy_pass            http://dashboard:80/;
      ...
    }
  }
}

您必须在末尾添加 / 作为 proxy_pass 值 ( http://dashboard:80/ )。然后它起作用了:)

Nginx 反向代理路由 returns 其 index.html 用于静态资产请求（例如 .css 文件）

Nginx reverse-proxy route returns its index.html for static asset requests (ex. .css files)

nginx

docker

webpack

docker-compose

nginx-reverse-proxy