• 【ASP.NET Core】在node.js上托管Blazor WebAssembly应用


    由于 Blazor-WebAssembly 是在浏览器中运行的,通常不需要执行服务器代码,只要有个“窝”能托管并提供相关文件的下载即可。所以,当你有一个现成的 Blazor wasm 项目,没必要用其他语言重写,或者你不想用 ASP.NET Core 来托管(有些大材小用了),就可以试试用 node.js 来托管。

    要实现这个不需要掌握什么新的知识,所以咱们直接开工干活。

    首先,咱们做好 Blazor wasm 应用的开发。

    dotnet new blazorwasm-empty -n Demo -o .

    blazorwasm-empty 模板创建的项目只带一些基本代码和 Hello World,没有演示代码——无Counter无假天气预报。

    然后,Program.cs 文件也可以精简一下。

    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    builder.RootComponents.Add("#app");
    
    await builder.Build().RunAsync();

    #app 是CSS筛选器,即选择 id 为 app 的元素来呈现 Razor 组件。这个相信各位都懂。

    为了更好地演示,咱们把 Index 组件改一下,加一点交互功能,以便后面可以验证 Blazor 是否正常启动。

    复制代码
    @page "/"
    
    

    Hello, world!

    @Message
    @code{ private string? Message{get;set;} void ClickMe() { int xx = Random.Shared.Next(100, 700); Message = $"恭喜你获得{xx}万假钞!"; } }
    复制代码

    这个不复杂,就是点击一下按钮,然后生成个随机整数,并修改 Message 属性。处理 click 事件要注意加上 @,如果是 onclick 你只能用 js 去写,要想用 C# 来写代码,就得用 @onclick。

    接着,试执行一下,保证没有错误,能正常运行。

     

    现在,你打开 \bin\Debug\net7.0\wwwroot 目录,里面你看到有个 _framework 目录,这个目录就是我们要的。不过,这个体积太大,不适合。咱们将项目发布一下,这样体积会变小很多。

    我们不需要 wwwroot 目录下的东东,把整个目录“咔嚓”掉(这里指的是项目中的 wwwroot 目录,不是输出目录的)。为了防止重新生成时有文件错误(一般不会),可以把 obj 和 bin 目录也删除。

    执行发布命令。

    dotnet publish -c PublishRelease

    -c 参数也可以用 Release,差别不大。

    另外新建一个目录,路径随便,不要有非英文字符(防止出错),比如这里我命名为 Server。把刚才发布的整个 _framework 目录复制到 Server 目录中。现在你可以关闭 Blazor 项目了,没它什么事了。

    在 Server 目录下新建一个文件,叫 index.html。

    复制代码
    DOCTYPE html>
    <html lang="zh-CN">
        <head>
            <meta charset="utf-8"/>
            <title>高级示例title>
        head>
        <body>
            <div id="app">正在加载……div>
            <script src="_framework/blazor.webassembly.js">script>
        body>
    html>
    复制代码

    这里注意两处:

    1、要有一个 id 为 app 的元素,它用来呈现组件。

    2、