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

问题描述

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

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

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

码头工人-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-server (根) 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>

标签： dockernginxwebpackdocker-composenginx-reverse-proxy

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

问题描述

解决方案

推荐阅读