将 Blazor WASM 应用程序部署到 Azure Web 服务的文档答案

【问题标题】：Documentation for deploying Blazor WASM app to Azure Web Service将 Blazor WASM 应用程序部署到 Azure Web 服务的文档
【发布时间】：2022-02-03 19:44:49
【问题描述】：

How are you deploying blazor wasm grpc-web apps to azure?

Azure CI pipeline for Blazor .NET 5 doesn't work

我真的很想自己解决这个问题，所以我的第一个请求是提供文档链接：是否有指向文档的链接，该文档提供了用于将 Blazor 应用程序部署到 Azure 的示例 .csproj 和 .yml 管道网络服务？我正在部署到 Azure 应用服务的虚拟应用程序 - 而不是静态站点。我正在请求示例 .yml 和 .csproj 文件。

没有上述情况，我正在尝试将标准 .net 6 Blazor WASM 应用程序部署到 Azure Web 服务。配置/错误消息如下所示。我已确认应用服务配置为 .net 6、64 位、集成管道。我做错了什么？

管道：

# ASP.NET Core (.NET Framework)
# Build and test ASP.NET Core projects targeting the full .NET Framework.
# Add steps that publish symbols, save build artifacts, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/dotnet-core


trigger:
- release/*

pool:
  vmImage: 'windows-latest'

variables:
  solution: '**/*.sln'
  buildPlatform: 'Any CPU'
  buildConfiguration: 'Release'

steps:

- task: UseDotNet@2             // I have tried removing this                                           
  displayName: 'Use dotnet 6'
  inputs:
    packageType: 'sdk'
    version: '6.x'

- task: DotNetCoreCLI@2
  displayName: 'DotNet Restore NuGet packages'
  inputs:
    command: 'restore'
    feedsToUse: 'select'
    vstsFeed: 'MyFeed'
    includeNuGetOrg: true

- script: dotnet build --configuration $(buildConfiguration)
  displayName: 'dotnet build $(buildConfiguration)'

- task: DotNetCoreCLI@2
  displayName: 'Dotnet publish'
  inputs:
    command: publish
    publishWebProjects: True
    arguments: '--configuration $(BuildConfiguration) --output $(Build.ArtifactStagingDirectory) --self-contained'
    zipAfterPublish: True

- task: AzureRmWebAppDeployment@4
  displayName: 'AzureRmWebAppDeployment@4'
  inputs:
    ConnectionType: 'AzureRM'
    azureSubscription: 'My'
    appType: webApp
    WebAppName: 'MyWeb'
    VirtualApplication: '/blazor'
    packageforLinux: '$(Build.ArtifactStagingDirectory)/*.zip'

.csproj

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
      <ImplicitUsings>enable</ImplicitUsings>
      <AspNetCoreHostingModel>OutOfProcess</AspNetCoreHostingModel>
      <GenerateAppxPackageOnBuild>enable</GenerateAppxPackageOnBuild>
      <RuntimeIdentifier>browser-wasm</RuntimeIdentifier> // tried also win-x64
      <RunAOTCompilation>true</RunAOTCompilation>
  </PropertyGroup>

  <ItemGroup>
    //...
  </ItemGroup>

</Project>

点网：

dotnet --info
.NET SDK (reflecting any global.json):
 Version:   6.0.101
 Commit:    ef49f6213a

Runtime Environment:
 OS Name:     Windows
 OS Version:  10.0.19044
 OS Platform: Windows
 RID:         win10-x64
 Base Path:   C:\Program Files\dotnet\sdk\6.0.101\

Host (useful for support):
  Version: 6.0.1
  Commit:  3a25a7f1cc

还尝试将以下内容添加到管道中：

- script: dotnet workload install wasm-tools
  displayName: 'Install wasm-tools workload'

从 .csproj 中删除了以下内容

<GenerateAppxPackageOnBuild>enable</GenerateAppxPackageOnBuild>
<RunAOTCompilation>true</RunAOTCompilation>
<RuntimeIdentifier>browser-wasm</RuntimeIdentifier>
<UseBlazorWebAssembly>true</UseBlazorWebAssembly>

项目构建和部署但页面加载时出错：

Uncaught SyntaxError: Unexpected token '

【问题讨论】：

标签： azure azure-web-app-service blazor-webassembly

【解决方案1】：

按照以下步骤将 Blazor 服务器应用程序部署到 Azure 应用服务。

创建 Blazor 服务器应用程序
部署到 Azure 应用服务
在 Azure 中发布 Blazor 服务器应用程序

以上流程的参考请参考site。

当您要求提供文档时，您可以使用 microsoft 的 documentation 查看该过程。

对于 yaml 方法，这里是 example。

要构建发布管道，请参考此 SO thread。

【讨论】：