我的网站正在运行并托管在服务器上。假设我的网站是 http://example.com。它以 Angular 构建，我在服务器上构建并部署了包含代码的 dist 文件夹，比方说，在 /opt/example_web/dist/browser。现在，当我访问该网站时，它会重定向并正常加载。
我有另外两个构建(可以说)在同一台服务器上运行，一个 http://example.com/api 构建在 Node.js 和另一个基于 Angular 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>
如果我在登录我托管网站的服务器后执行 curl，我可以在 http://127.0.0.1:8081 上执行此操作。
最佳答案
我不确定这是否有帮助，但您可以尝试将您的 /admin 位置 block 一分为二吗？
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 文件的路径的信息。
关于angular - Nginx路由到 Angular ssr构建中具有多个根的多个位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54071352/