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

我的网站运行并托管在服务器上.假设我的网站是http://example.com.它内置了角度,我构建并部署了dist文件夹,其中包含服务器上的代码,例如,在/ opt / example_web / dist / browser.现在,当我点击该网站时,它重定向并加载正常.

我有另外两个构建(可以说)在同一台服务器上运行,一个是在Node.js上构建的http://example.com/api,另一个是基于角度的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上这样做.

解决方法:

我不确定这会有所帮助,但您可以尝试将您的/ 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文件的路径的信息.

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

相关推荐