Blazor WebAssembly&Azure Static App部署记录
目录
前言
对于Blazor WebAssembly，因其特殊性，可以直接部署成站点，浏览器下载后，在浏览器中直接运行，总想薅点羊毛，能够免费部署这类应用，搜寻一方了解到，像是Github Page、Azure Static App等都可以白嫖来部署静态站点。如此，结合部署过程，进行记录一番。
新建项目
此处新建一个Blazor WebAssembly(Standalone)的项目，注意是非Blazor WebApp类型的。此处上传到Github中，因此Github中提前建好仓库，默认克隆到本地好了，开始创建项目。
// 假定路径
PS C:\demos\ViatorLife.Blog>
执行创建命令
dotnet new blazorwasm -n ViatorLife.Blog -f net8.0 -o ./src/
dotnet new sln -n ViatorLife.Blog
dotnet sln add .\src\ViatorLife.Blog.csproj
增加gitignore忽略bin/obj等文件。
dotnet new gitignore
执行代码推送到Github仓库中，代码部分完事。
Azure部署
访问 https://portal.azure.com/ 登录 Azure，如果没有账户可以去注册一个。
选择资源组，填写名称，选择免费模式，以此薅羊毛。
选择仓库源，此处选择Github，找到仓库并选择分支后稍等几秒再往下挪，在生成预设中选择Blazor，会带出位置，但默认生成的应用位置(Client)不可用，修改将其对应于代码中的位置，改成仓库中BlazorWasm项目所在路径(src/ViatorLife.Blog)。纯部署Blazor wasm时不用管Api位置，直接删除API位置框中默认值。输出位置保持不变。
点击查看+创建，默认会生成好Github Action的yml到Github仓库中。用作流水线部署脚本。
进入到Github仓库中查看workflow，可见到app_location位置相对于代码中的csproj位置。
name: Azure Static Web Apps CI/CD
on:
push:
branches:
- main
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- main
jobs:
build_and_deploy_job:
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
name: Build and Deploy Job
steps:
- uses: actions/checkout@v3
with:
submodules: true
lfs: false
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_AMBITIOUS_CLIFF_0112DA81E }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
action: "upload"
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "src/ViatorLife.Blog" # App source code path
output_location: "wwwroot" # Built app content directory - optional
###### End of Repository/Build Configurations ######
close_pull_request_job:
if: github.event_name == 'pull_request' && github.event.action == 'closed'
runs-on: ubuntu-latest
name: Close Pull Request Job
steps:
- name: Close Pull Request
id: closepullrequest
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_AMBITIOUS_CLIFF_0112DA81E }}
action: "close"
创建完毕后可在Github仓库中看到Github Action流水线正在执行中，执行完成便可以在Azure Static App中查看访问链接，直接点击便可看到效果。
后续本地代码更改，推送到Github后，自动触发Github Action发布，发布完毕后自动更新静态站点，如此一来很方便薅羊毛。
参考
https://learn.microsoft.com/zh-cn/azure/static-web-apps/deploy-blazor
https://www.cnblogs.com/stulzq/p/16505837.html
2025-05-26，望技术有成后能回来看见自己的脚步。