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

冷不防 2024-03-16 21:21 47阅读 0赞

由于 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>("#app");
    
    await builder.Build().RunAsync();

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

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

![9f0b66467840af0a6301d30854e42afd.gif][]

@page "/"
    
    <h1>Hello, world!</h1>
    <button @οnclick="ClickMe">点这里中大奖</button>
    <div>@Message</div>
    
    @code{
        private string? Message{get;set;}
    
        void ClickMe()
        {
            int xx = Random.Shared.Next(100, 700);
            Message = $"恭喜你获得{xx}万假钞！";
        }
    }

![7de1442f635974ab16db006f25121196.gif][]

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

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

![f9581a96ba074695855622a2cb5e7c7a.png][]

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

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

执行发布命令。

dotnet publish -c PublishRelease

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

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

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

![a984ed3b973925b23a2be7830a7cfa1d.gif][]

<!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>

![906bebac7bd03537dfe4b12b04b69afd.gif][]

这里注意两处：

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

2、<script> 要引用 blazor.webassembly.js 文件。

在 Server 目录下再新建一个文件，名为 app.js。这个用来写服务器主程序（js 代码）。

![871b0b053e7f3c6d66308cc8caead743.gif][]

![8661499ee479a7e3e5fea2dcd657a4c1.gif][]

运行它，执行：node app.js。接着在浏览器中输入地址：http://localhost:6748。再验证 Blazor 应用程序是否成功启动。

[9f0b66467840af0a6301d30854e42afd.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/2736ab88ce074e52a1e32d13a13893c5.png
[7de1442f635974ab16db006f25121196.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/9613aabc167542d7886d641cd1e8f19d.png
[f9581a96ba074695855622a2cb5e7c7a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/4ef0ac9c30d445e8b5b8f6117af8e700.png
[a984ed3b973925b23a2be7830a7cfa1d.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/d34d238e282c425a8bf8b8c132f4a921.png
[906bebac7bd03537dfe4b12b04b69afd.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/8bf432a5e9c741a98cbaa94f520bad83.png
[871b0b053e7f3c6d66308cc8caead743.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/e60077b832014ad2b06edd334df88e97.png
[8661499ee479a7e3e5fea2dcd657a4c1.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/46ec9e4727e4487da467915e97828678.png