Question

我们有几个节点应用程序正在尝试代理NGINX。这些节点应用程序中的每一个都是独立开发的，html中的所有相对路径都指向/.

的文档根目录

有没有办法让nginx帮助提供这些静态CSS / JS文件？

nginx.conf

worker_processes  1;

events {
    worker_connections  1024;
}


http {

    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    upstream app1 {
        server localhost:3001;
    }

    upstream app2 {
        server localhost:3002;
    }

    upstream app3 {
        server localhost:3003;
    }

    server {
        listen       8180;
        server_name  localhost;

        location /app1 {
            proxy_pass http://app1/;
        }

        location /app2 {
            proxy_pass http://app2/;
        }

        location /app3 {
            proxy_pass http://app3/;
        }
   }
}

app1 index.html

   <html>
    <head>
     <title>Express</title>
     <link rel="stylesheet" href="/stylesheets/style.css">
    </head>
    <body>
      <h1>Express</h1>
      <p>Welcome to Express</p>
      <p class="foo">A simple test to see if the app is served correctly</p>
    </body>
  </html>

如您所见，app1的index.html指向“/stylesheets/style.css”的相对路径。 Nginx将此置于http://localhost:8180/app1之后，因此一旦将html提供给客户端，就无法识别路径。

我意识到我可以更改所有三个应用程序中的html，以使用映射到css的完整路径，如：http://localhost:8180/app1/stylesheets/styles.css。

我很好奇是否有人对此有任何建议。在提供多个应用程序时，处理此类问题的正确方法是什么？

Answer 1

我遇到了类似的问题并发现了reddit thread。我有一个节点快递应用程序。通过删除href值中的前导斜杠（相对路径而不是绝对路径），它能够构建正确的路径。 nginx中的位置设置：

location /app1/ {
   proxy_pass http://localhost:3002/;
   alias /app1/client;
}

并且<link rel="stylesheet" href="/css/theme.css">浏览器会尝试加载mydomain.com/css/theme.css并失败（错误的路径，没有任何内容），但使用<link rel="stylesheet" href="css/theme.css">浏览器会成功加载mydomain.com/app1/css/theme.css

如何在三个节点应用程序前面使用NGINX管理相对CSS路径

1 个答案: