C# 大摇大摆可以'；t显示并找不到.Net Core 3.1+；Nginx上的角度

我在Nginx上使用了NetCore3.1和angular构建网站。（Ubuntu 18.04）

但当我尝试使用SwiggerUI时，它无法正常显示。屏幕是空白的

调试工具报告某些文件找不到（404）

我的swagger.json和html可以加载，但js/css文件似乎无法加载

浏览器开发工具

Failed to load resource: the server responded with a status of 404 (Not Found)
swagger-ui-bundle.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
swagger-ui-standalone-preset.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
index.html:66 Uncaught ReferenceError: SwaggerUIBundle is not defined at window.onload (index.html:66)
swagger-ui.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)

Nginx文件夹结构

var
|
|-->www  Angular Flies(index/js/css)
|
|-->api  Net Core Files

Nginx配置

server {

    listen        80;
    server_name  domainname.com *.domainname.com;

    location / {
        root /var/www/;
        try_files /index.html =404;
    }

    location ~* .(js|jpg|png|css|woff|eot|svg|ttf|ico)$ {
        root /var/www/;
        expires 30d;
    }

    location /api/ {
        proxy_pass         http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection keep-alive;
        proxy_set_header   Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;
    }

}

网络核心上的招摇设置。

app.UseSwagger(options=>
{
    options.RouteTemplate = "/api/swagger/{documentName}/swagger.json";
});

app.UseSwaggerUI(options =>
{
    options.RoutePrefix = "api";
    foreach (var desc in provider.ApiVersionDescriptions)
        options.SwaggerEndpoint($"swagger/{desc.GroupName}/swagger.json",
        desc.GroupName.ToUpperInvariant());
});
app.UseStaticFiles();

我在本地计算机上运行这个没有问题，只有在nginx上发布才有这个问题。

---

如何修改配置使swaggerUI正常工作？

好的，我发现了问题并解决了这个问题

server {

    listen        80;
    server_name  domainname.com *.domainname.com;

    location /api/ {
        proxy_pass         http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection keep-alive;
        proxy_set_header   Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;
    }

    location / {
        root /var/www/;
        try_files /index.html =404;
    }

    location ~* ^/api/.+\.(xml|js|jpg|png|css|html|otf|eot|svg|ttf)$ {
        proxy_pass         http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection keep-alive;
        proxy_set_header   Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;

        expires 90d;
    }

    location ~* \.(xml|js|jpg|png|css|html|otf|eot|svg|ttf)$ {
        root /var/www/;
        expires 30d;
        index index.html;
    }
}

Nginx配置错误

我将这部分注释掉，它可以工作

location ~* .(js|jpg|png|css|woff|eot|svg|ttf|ico)$ {
        root /var/www/;
        expires 30d;
    }

---

好的，我发现了问题并解决了这个问题

server {

    listen        80;
    server_name  domainname.com *.domainname.com;

    location /api/ {
        proxy_pass         http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection keep-alive;
        proxy_set_header   Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;
    }

    location / {
        root /var/www/;
        try_files /index.html =404;
    }

    location ~* ^/api/.+\.(xml|js|jpg|png|css|html|otf|eot|svg|ttf)$ {
        proxy_pass         http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection keep-alive;
        proxy_set_header   Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;

        expires 90d;
    }

    location ~* \.(xml|js|jpg|png|css|html|otf|eot|svg|ttf)$ {
        root /var/www/;
        expires 30d;
        index index.html;
    }
}

Nginx配置错误

我将这部分注释掉，它可以工作

location ~* .(js|jpg|png|css|woff|eot|svg|ttf|ico)$ {
        root /var/www/;
        expires 30d;
    }

---

根据我的回答，我发现了另一个问题

angular网站无法工作，无法加载js/css文件

最后我找到了解决这个问题的最佳方法

server {

    listen        80;
    server_name  domainname.com *.domainname.com;

    location /api/ {
        proxy_pass         http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection keep-alive;
        proxy_set_header   Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;
    }

    location / {
        root /var/www/;
        try_files /index.html =404;
    }

    location ~* ^/api/.+\.(xml|js|jpg|png|css|html|otf|eot|svg|ttf)$ {
        proxy_pass         http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection keep-alive;
        proxy_set_header   Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;

        expires 90d;
    }

    location ~* \.(xml|js|jpg|png|css|html|otf|eot|svg|ttf)$ {
        root /var/www/;
        expires 30d;
        index index.html;
    }
}

---

这是我最后一次配置，我检查了SwaggerUI和网站是否可以工作。

我在回答中发现了其他问题

location ~* .(js|jpg|png|css|woff|eot|svg|ttf|ico)$ {
        root /var/www/;
        expires 30d;
    }

angular网站无法工作，无法加载js/css文件

最后我找到了解决这个问题的最佳方法

server {

    listen        80;
    server_name  domainname.com *.domainname.com;

    location /api/ {
        proxy_pass         http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection keep-alive;
        proxy_set_header   Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;
    }

    location / {
        root /var/www/;
        try_files /index.html =404;
    }

    location ~* ^/api/.+\.(xml|js|jpg|png|css|html|otf|eot|svg|ttf)$ {
        proxy_pass         http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection keep-alive;
        proxy_set_header   Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;

        expires 90d;
    }

    location ~* \.(xml|js|jpg|png|css|html|otf|eot|svg|ttf)$ {
        root /var/www/;
        expires 30d;
        index index.html;
    }
}

这是我最后一次配置，我检查了SwaggerUI和网站是否可以工作

location ~* .(js|jpg|png|css|woff|eot|svg|ttf|ico)$ {
        root /var/www/;
        expires 30d;
    }