在NGINX上托管Blazor独立WASM

aemubtdh  于 2022-12-03  发布在  Nginx
关注(0)|答案(2)|浏览(458)

bounty已结束。回答此问题可获得+100声望奖励。奖励宽限期将在21小时后结束。R.Haughton正在寻找来自声誉良好来源的答案

我在作为反向代理在nginx后面托管blazor WASM单机版(没有asp.net核心项目作为主机)时遇到了一些问题。
下面是我的Nginx默认配置文件:

server {
        listen 80;
        listen [::]:80;

        server_name localhost;

        location / {
                root /var/www/web/BlazorApp/wwwroot;
                try_files $uri $uri/ index.html =404;

                include /etc/nginx/mime.types;
                types {
                        application/wasm wasm;
                }
                default_type application/octet-stream;
        }

        location /service1/ {
                proxy_pass http://localhost:5001/;
                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 /service2/ {
                proxy_pass http://localhost:5002/;
                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 /service3/ {
                proxy_pass http://localhost:5003/;
                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;
        }
}

此配置的工作原理是,我可以使用

http://{server-ip-address}

和我的其他服务

http://{server-ip-address}/serviceX

其中X分别指服务1、2和3

首次发布:当我在我的Blazor应用程序中导航时,例如到http://{server-ip-address}/My-Blazor-Page,然后刷新页面,我会得到一个404未找到错误。

为了让它再次工作,我需要回到基址http://{server-ip-address}并导航回My-Blazor-Page。我不能刷新页面并回到同一页面。

第二版:我希望我的Blazor应用程序有一个不同的位置。我希望使用X1 M3 N1 X而不是X1 M4 N1 X。

我尝试了所有方法来使它正确,但这是唯一的配置,半工作
非常感谢您的帮助!

2wnc66cl

2wnc66cl1#

要解决第一个问题,可以尝试修改Nginx配置中的try_files指令,如下所示:

location / {
    root /var/www/web/BlazorApp/wwwroot;
    try_files $uri $uri/ /index.html;

    include /etc/nginx/mime.types;
    types {
        application/wasm wasm;
    }
    default_type application/octet-stream;
}

这将确保对不存在的文件的请求被重写到index.html文件,这将允许您的Blazor应用处理路由并呈现正确的页面。
要解决第二个问题,您可以修改Blazor应用的location指令,如下所示:

location /Blazor/ {
    root /var/www/web/BlazorApp/wwwroot;
    try_files $uri $uri/ /index.html;

    include /etc/nginx/mime.types;
    types {
        application/wasm wasm;
    }
    default_type application/octet-stream;
}

这将导致Nginx以http://{server-ip-address}/Blazor/ URL为Blazor应用提供服务。您可能需要更新Blazor应用的基本URL以反映此更改。
我希望这对你有帮助!如果你有任何其他问题,请告诉我。

4ioopgfo

4ioopgfo2#

下面的nginx.conf文件被简化,以显示如何配置Nginx在磁盘上找不到相应的文件时发送index.html文件。
使用limit_req设置NGINX突发速率限制时,Blazor WebAssembly应用可能需要较大的突发参数值,以适应应用发出的相对较大的请求数量。最初,将该值设置为至少60:
如果浏览器开发人员工具或网络流量工具指示请求收到“503 -服务不可用”状态代码,请增大该值。
有关生产Nginx Web服务器配置的详细信息,请参阅创建NGINX Plus和NGINX配置文件。
上面的代码将尝试URL,如果没有匹配的文件,它将提供index.html。
对于第二个问题,您应该将base属性值设置为“Blazor”,并将所有文件放在Blazor目录中(配置需要与此匹配)。

相关问题