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

Question

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

我们有几个节点应用程序正在尝试代理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/;
        }
   }
}

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

如您所见,app1的index.html指向"/stylesheets/style.css"的相对路径.Nginx将此置于后面http://localhost:8180/app1,因此一旦将html提供给客户端,就不会识别路径.

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

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

Answer 1

dan*_*eph 2

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

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

Run Code Online (Sandbox Code Playgroud)

并且使用<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

归档时间：	11 年前
查看次数：	1204 次
最近记录：	9 年，7 月前