Question

我的网站正在运行并托管在服务器上。假设我的网站是http://example.com。它内置在angular中，我构建并部署了dist文件夹，该文件夹包含服务器上的代码，比方说，位于/opt/example_web/dist/browser。现在，当我访问该网站时，它会重定向并加载正常。

我还有另外两个版本（可以说）在同一服务器上运行，一个http://example.com/api建立在Node.js上，另一个基于角度的http://example.com/admin。 API可以正常运行，但问题出在管理员身上。主页已加载，但无法找到位于/opt/example_admin/dist/browser的样式和javascript文件。控制台中显示的错误是-

2019/01/13 10:04:57 [error] 5474#5474: *6 open() "/opt/example_web/dist/browser/admin/styles.3397081055411503ca7a.css" failed (2: No such file or directory), client: 103.82.102.67, server: edupeeth.com, request: "GET /admin/styles.3397081055411503ca7a.css HTTP/1.1", host: "edupeeth.com", referrer: "https://edupeeth.com/admin"
2019/01/13 10:04:57 [error] 5474#5474: *6 open() "/opt/example_web/dist/browser/admin/runtime.c65c5993662350a7e065.js" failed (2: No such file or directory), client: 103.82.102.67, server: edupeeth.com, request: "GET /admin/runtime.c65c5993662350a7e065.js HTTP/1.1", host: "edupeeth.com", referrer: "https://edupeeth.com/admin"
2019/01/13 10:04:57 [error] 5474#5474: *6 open() "/opt/example_web/dist/browser/admin/polyfills.0e3ee22c9a47318954a0.js" failed (2: No such file or directory), client: 103.82.102.67, server: edupeeth.com, request: "GET /admin/polyfills.0e3ee22c9a47318954a0.js HTTP/1.1", host: "edupeeth.com", referrer: "https://edupeeth.com/admin"
2019/01/13 10:04:57 [error] 5474#5474: *8 open() "/opt/example_web/dist/browser/admin/main.0008150f761fd2143e37.js" failed (2: No such file or directory), client: 103.82.102.67, server: edupeeth.com, request: "GET /admin/main.0008150f761fd2143e37.js HTTP/1.1", host: "edupeeth.com", referrer: "https://edupeeth.com/admin"

我认为我在nginx配置中做错了。我正在下面的nginx配置中进行复制。请提出我在这里犯的错误。

upstream ssr_edu_web {
    server 127.0.0.1:4200;
}

upstream ssr_edu_admin {
    server 127.0.0.1:8081;
}

server {
    listen 443 ssl;

    server_name example.com www.example.com; # <--- Change this part

    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
      ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

    root /opt/example_web/dist/browser; # <-- Notice where we're point to    

    location / {

        try_files $uri $uri @backend; # <--- This looks for requests (statics i.e js/css/fonts)
                                      # in /ssr/dist/browser folder. If nothing found, calls @backend
    }

    location @backend {
        # NOTE THERE IS NO TRAILING SLASH AT THE END. NO TRAILING SLASH. NO SLASH. NO!
        proxy_pass http://ssr_edu_web; # <--- THIS DOES NOT HAVE A TRAILING '/'
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_http_version 1.1;
        proxy_set_header X-NginX-Proxy true;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

      location /api {
         proxy_pass http://127.0.0.1:8080/api;
         proxy_redirect    off;
         proxy_set_header  Host            $host;
         proxy_set_header  X-Real-IP        $remote_addr;
         proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
       }

    location /admin {
        alias /opt/example_admin/dist/browser;
        proxy_pass http://ssr_edu_admin; # <--- THIS DOES NOT HAVE A TRAILING '/'        
       }       

}

  server {
      listen 80;
      server_name example.com;
      return 301 https://$server_name$request_uri?;
  }

以下是index.html-

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Admin</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.png">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link rel="stylesheet" href="/admin/styles.3397081055411503ca7a.css"></head>
<body>
  <app-root></app-root>
<script type="text/javascript" src="/admin/runtime.c65c5993662350a7e065.js"></script><script type="text/javascript" src="/admin/polyfills.0e3ee22c9a47318954a0.js"></script><script type="text/javascript" src="/admin/main.0008150f761fd2143e37.js"></script></body>
</html>

如果我登录到托管网站的服务器后进行了卷曲，则可以在http://127.0.0.1:8081上进行卷曲。

Answer 1

我不确定这是否有帮助，但是您可以尝试将/admin位置块一分为二吗？

    location /admin {
        alias /opt/example_admin/dist/browser;
        try_files $uri @admin;
    }
    location @admin {
        proxy_pass http://ssr_edu_admin; # <--- THIS DOES NOT HAVE A TRAILING '/'        
    }

还可以查看nginx error.log，它可以包含有关nginx在其中查找.js和.css文件的路径的信息。

Answer 2

请参考See doc

根据您的情况，将<base href="/">更改为<base href="/admin">，然后在您的nginx配置中，更改为以下内容，包括@ ivan-shatsky的部分答案：

location /admin {
    root /your/admin/app/root/here;
    try_files $uri @admin;
}
location @admin {
    proxy_pass http://ssr_edu_admin; # <--- THIS DOES NOT HAVE A TRAILING '/'        
}

Nginx路由到角度ssr构建中具有多个根的多个位置

2 个答案: