• 【ASP.NET Core】Blazor 服务器端的 Base Path


    提到 Blazor,没准就会有人问:选用 Server 端还是 WebAssembly(客户端)?其实这个不用纠结,老周个人的原则是:Server 端优先。理由很单纯:服务器端虽然消耗服务器上的资源,但加载速度快,而且不用下载组件(几个脚本也不大)。其实嘛,Web 应用都是消耗服务器资源的,不然要服务器干吗呢。

    那啥时候选用 Web Assembly 呢?应该在交互比较繁复时。比如,你开发了个游戏,叫《国民 996》,这样的话选用客户端是比较合适。

    ======================================================================

    Du Du, Stop!题外话结束。今天要说的话题是服务器端的 Blazor应用方面的。各位估计都玩过 Blazor 了,在加载组件的 HTML 文档中,通常会在 <head> 元素下指定一个应用程序的基础路径,也就是 Base Path。就像这样:

    <head>
        <base href="/" />
    </head>

    然后,<body>里面的脚本导入就会相对于上面指定的路径。

        <script src="_framework/blazor.server.js"></script>

    在 99.996% 的场合中,你只需要为应用程序指定“/”作为基础路径就可以了。当浏览器发来请求时,服务器就会从根路径开始匹配 URL 路由,然后定位到目标组件并加载。

    但是,在 0.004% 的场合中,这个<base>元素可能要加上一个前缀。比如:/demo。那什么场合呢?Duang,来了:

    1)ASP.NET Core(Blazor)应用程序绑定本机地址运行,如著名的 localhost:5000;

    2)使用其他服务器组件来反向代理,世界闻名的有 爱爱S、阿Pache,ng拽nx之类。

    3)IIS、nginx等上面配置了路径前缀。

    以 nginx 为例,假设有这样的配置:

        server {
            listen       80;
            ……
    
            location / {
                root   html;
                index  index.html index.htm;
            }
    
            location /blazapp/ {
                 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;
                 proxy_set_header        Connection "Upgrade";
            }    

    如果访问根路径 / ,那么指向 index.html 等文件;若访问 /blazapp 前缀打头的路径才指向我的 Blazor 应用。 proxy_xxx 配置的转发规则会把这个路径前缀也转发给 ASP.NET Core 应用进程,所以,这时候,咱们用来加载 blazor 组件的HTML文档就要这样写 <base> 了。

    <head>
        <base href="/blazapp" />
    </head>

    看,这个 Base Path 就是这么用的。

    注意 blazor 组件的代码是不需要改动的,比如这个叫 home 的组件。

    @page "/home"
    
    <h3>豆腐小镇欢迎您</h3>

    @page 指令后面的URL不需要添加前缀。

    但,Startup 类里面的 Configure 方法里面的代码就要做点手脚了。

    1)调用 UseForwardedHeaders 方法。这个与 blazor 关系不大,使用反向代理的话都应该调用,以让应用程序读取转发的头;

    2)调用 UsePathBase 方法,设置的路径前缀要和前面 nginx 中配置的一致。这一句是重点,它的作用是把传入应用程序的URL中的前缀去掉。

    例子:

            public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
            {
                app.UseForwardedHeaders();
                app.UsePathBase("/blazapp");
    
                if (env.IsDevelopment())
                {
                    app.UseDeveloperExceptionPage();
                }
    
                app.UseStaticFiles(); //这句别忘了
                app.UseRouting();
    
                app.UseEndpoints(endpoints =>
                {
                    endpoints.MapBlazorHub();
                    endpoints.MapFallbackToPage("/Host");
                });
            }

    这时候,从浏览器中访问 http://localhost/blazapp/home,组件就显示出来了。

    当从浏览器发出请求 localhost/blazapp/home 时,nginx 会把路径 /blazapp/home 转发给 ASP.NET Core 应用程序。

    ASP.NET Core 应用程序收到消息后,由于调用了 app.UsePathBase("/blazapp"),自动把 /blazapp 这一段砍掉了,于是,传给 Routing 的 URL 又恢复到 /home,所以,我们写的 blazor 组件是不用去改路径规则的。

    Web Assembly 应用也能使用这个 Base Path 设置,不过用处不是很大,除非你一个服务器应用承载多个 webasm 应用。同时下载多个 webasm 应用也用得不多。如果确实要这样做,那么你的 Host 项目就要引用多个 webasm 项目,假设叫 app1、app2。这种方案你必须为每个 web asm 的项目文件(.csproj)加上 StaticWebAssetBasePath 节点。

    例如,app1 应用的项目文件加上:

        <StaticWebAssetBasePath>/path01</StaticWebAssetBasePath>

    app2 应用的项目文件里加上:

        <StaticWebAssetBasePath>/path02</StaticWebAssetBasePath>

    如果不这样做,是无法编译的,因为 Webassembly 应用默认的路径前缀是“/”,如果你的 Host 程序引用了 N 个 Web Assembly 应用,那么就等于用一个“/”指向多个项目,这就冲突了,所以要在项目文件中加上 StaticWebAssetBasePath 配置,以解决此问题。StaticWebAssetBasePath 指定的是逻辑路径,并不要求真的存在这个目录(为了解决冲突用),你的项目文件可以放在名为 sb01、sb02 的目录下。

  • 相关阅读:
    linux cat 文件操作
    linux 如何显示一个文件的某几行(中间几行)
    dvm进程,linux进程,应用程序进程是否同一概念
    android-----JNI中的log打印
    push代码到github时,每次都要输入用户名和密码的问题
    linux下ndk编译命令行程序及配置
    Ubuntu16.04安装openjdk-7-jdk
    JNI——访问数组
    转:MyBatis学习总结(Mybatis总结精华文章)
    转:mybatis3中@SelectProvider的使用技巧
  • 原文地址:https://www.cnblogs.com/tcjiaan/p/14237072.html
Copyright © 2020-2023  润新知