Swagger 無法顯示並且找不到，.Net Core 3.1 + Angular on Nginx

Question

我使用 net core 3.1 和 angular 在 Nginx 上構建網站。 （Ubuntu 18.04）。

但是當我嘗試使用 swaggerUI 時，它無法正常顯示。 屏幕是空白的。

調試工具報告找不到某些文件 (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;
    }

}

網絡核心上的 Swagger 設置。

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 工作？

Answer 1

好的，我發現了問題並解決了這個問題。

Nginx 配置錯誤。

我注釋掉這部分，它可以工作。

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

Answer 2

我的回答發現了其他問題。

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 和網站可以工作。