Azure静态Web应用上的Blazor WebAssembly

Many apps today are just static files on the front end - HTML and JavaScript - with something powerful on the server side. They aren't "static apps" as they have very dynamic front end experiences, but they are static in that their HTML isn't dynamically generated.

如今,许多应用程序只是前端的静态文件-HTML和JavaScript-在服务器端具有强大的功能。 它们不是“静态应用程序”,因为它们具有非常动态的前端体验,但是它们是静态的,因为它们HTML不是动态生成的。

As such, you don't need to spend the money on an Azure Web App when an Azure Static Web App will do! These apps get free SSL certs, custom domains, web hosting for static content, and fit into a natural git-based workflow for publishing. You can build modern web applications with JavaScript frameworks and libraries like Angular, React, Svelte, Vue, or using Blazor to create WebAssembly applications, with an Azure Functions back-end or publish static sites with frameworks like Gatsby, Hugo, VuePress.

这样,当Azure静态Web应用程序可以使用时,您就不必在Azure Web App上花钱了! 这些应用程序可获取免费的SSL证书,自定义域,用于静态内容的虚拟主机,并适合基于git的自然工作流进行发布。 您可以使用JavaScript框架和库(例如AngularReactSvelteVue)构建现代Web应用程序,或者使用Blazor创建具有Azure功能后端的WebAssembly应用程序,或者使用GatsbyHugoVuePress等框架发布静态站点。

But there's big news out of Ignite this week, with Azure Static Web Apps now supporting Blazor applications. You can develop and deploy a frontend and a serverless API written entirely in .NET.

但是本周Ignite发出了一个大新闻, Azure Static Web Apps现在支持Blazor应用程序您可以开发和部署完全用.NET编写的前端和无服务器API。

To get started "hello world style" there is a GitHub repository template that's a starting point. It's a basic web app with a client that uses Blazor and .NET that is run on the client-side in your browser using WebAssembly.

要开始使用“ hello world style”,需要有一个GitHub存储库模板作为起点。 这是一个基本的Web应用程序,带有使用Blazor和.NET的客户端,该客户端在使用WebAssembly的浏览器的客户端上运行。

Called it! It's almost a decade later and yes, JavaScript (and WebAssembly) is the assembly language for the web!

叫它! 差不多十年了,是的, JavaScript(和WebAssembly)是Web的汇编语言

So the client runs in the browser written in C#, the server runs as a serverless Azure Function (meaning no identifiable VM, and it just scales as needed) also written in C#, and this client and server share a data model between Blazor and Functions also written in...wait for it...C#.

因此,客户端在用C#编写的浏览器中运行,服务器作为无服务器的Azure Function(意味着没有可识别的VM,并且仅根据需要扩展)也以C#编写,并且此客户端和服务器在Blazor和Functions之间共享数据模型也写在...等待中... C#。

An app like this can basically scale forever, cheaply. It can put the browser to work (which was basically hanging out waiting for anglebrackets anyway) and when it needs data, it can call back to Functions, or even Azure CosmosDB.

这样的应用程序基本上可以永久廉价地扩展。 它可以使浏览器正常工作(无论如何,它基本上一直在等待尖括号),并且当需要数据时,它可以回调到Functions甚至Azure CosmosDB。

Be sure to check out this complete Tutorial: Building a static web app with Blazor in Azure Static Web Apps! All you need is a GitHub account and any free Azure Account.

确保检查完整的教程:在Azure静态Web应用程序中使用Blazor构建静态Web应用程序 您只需要一个GitHub帐户和任何免费的Azure帐户

If you want more guided learning, check out the 12 unit module on Microsoft Learn. It shouldn't take more than an hour and you'll learn how to Publish a Blazor WebAssembly app and .NET API with Azure Static Web Apps.

如果您需要更多指导学习,请查看Microsoft Learn上的12个单元模块。 大概不花一个小时,您将学习如何使用Azure Static Web Apps发布Blazor WebAssembly应用程序和.NET API

资源资源 (Resources)

      Also be sure to check out the Day 2 Microsoft Ignite Keynote by yours truly! The app I made and demo in the keynote? Made with Blazor and Azure Static Web Apps, natch! The keynote is happening in three time zones so you can see it at a time that works for you...or on-demand!

      另外,请务必真正查看您的Day 2 Microsoft Ignite主题演讲! 我在主题演讲中制作并演示的应用程序? 使用Blazor和Azure静态Web应用程序制作,natch ! 主题演讲在三个时区进行,因此您可以在适合自己的时间或按需观看!

      翻译自: https://www.hanselman.com/blog/blazor-webassembly-on-azure-static-web-apps

      • 0
        点赞
      • 0
        收藏
        觉得还不错? 一键收藏
      • 0
        评论
      评论
      添加红包

      请填写红包祝福语或标题

      红包个数最小为10个

      红包金额最低5元

      当前余额3.43前往充值 >
      需支付:10.00
      成就一亿技术人!
      领取后你会自动成为博主和红包主的粉丝 规则
      hope_wisdom
      发出的红包
      实付
      使用余额支付
      点击重新获取
      扫码支付
      钱包余额 0

      抵扣说明:

      1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
      2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

      余额充值