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

如何解决Nginx反向代理路由返回其index.html以用于静态资产请求例如.css文件

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

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

根据Docker（我在构建期间在容器内使用的目录上运行了ls），它们与root /app位于同一目录（index.html，请参见nginx.config用于仪表板容器）文件。我不确定在这种情况下为什么它仍返回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服务器（根）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>

解决方法

对于以后遇到相同问题的任何人。解决方法是

nginx服务器（根）nginx.config

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

您必须在末尾添加/值的proxy_pass（http：// dashboard：80 /）。然后它起作用了：）

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

如何解决Nginx反向代理路由返回其index.html以用于静态资产请求例如.css文件

解决方法

相关推荐