Blazor WebAssembly&EdgeOne Pages部署记录
目录
前言
对于Blazor WebAssembly，因其特殊性，可以直接部署成站点，浏览器下载后，在浏览器中直接运行，总想薅点羊毛，能够免费部署这类应用，搜寻一方了解到，像是Github Page、Azure Static App等都可以白嫖来部署静态站点。如此，结合部署过程，进行记录一番。
EdgeOne Pages
腾讯云提供的等同于Github Pages服务，目前阶段免费，可以部署静态站点和基于Next.js的全栈项目。
https://edgeone.cloud.tencent.com/pages/document/162936635171454976
新建项目
此处新建一个Blazor WebAssembly(Standalone)的项目，注意是非Blazor WebApp类型的。此处上传到Github中，因此Github中提前建好仓库，默认克隆到本地好了，开始创建项目。
// 假定路径
PS C:\demos\EdgeOnePagesBlazorDemo
执行创建命令
dotnet new blazorwasm -n EdgeOnePagesBlazorDemo -f net8.0
dotnet new sln -n BlazorDemo
dotnet sln add .\EdgeOnePagesBlazorDemo\
增加gitignore忽略bin/obj等文件。
dotnet new gitignore
执行代码推送到Github仓库中，代码部分完事。
构建与部署
为了将站点资源打包后部署到EdgeOne Pages，需要做一步打包工作，借助于Github Actions完成打包。部署方式上有两种方案：
- 从EdgeOne Pages上配置由其主动拉取。
- 使用EdgeOne提供的CLI，将打包后的资源上传到EdgeOne Pages。
流水线构建
可以直接借助Github Pages一样的构建方式，新建yml来构建Blazor Wasm项目。在Github仓库页面上，点击顶部Action菜单，创建工作流，搜索.NET，点击配置按钮
更换默认文件名，具体名字随意
文件内容如下，各步骤见第一个参考文档内描述
# This workflow will build a .NET project
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-net
name: Deploy to Github Pages
on:
push:
branches: [ "main" ]
pull_request:
branches: [ "main" ]
jobs:
deploy-to-github-pages:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup .NET
uses: actions/setup-dotnet@v4
with:
dotnet-version: 8.0.x
- name: Publish DotNet Blazor Project
run: dotnet publish ./EdgeOnePageBlazorDemo/EdgeOnePageBlazorDemo.csproj -c Release -o release --nologo
- name: Commit wwwroot to Github Pages
uses: JamesIves/github-pages-deploy-action@3.7.1
with:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
BRANCH: gh-pages
FOLDER: release/wwwroot
保存开始执行流水线构建，正常构建完毕后，构建结果会存储在gh-pages分支中。再后续对main分支的改动都会触发流水线，并更新到gh-pages分支。
如果Github Action运行中出现了403的错误信息，为配置中缺少权限。
进入到仓库设置页，更改为具备读写权限。重新触发流水线构建。
切换到gh-pages分支，可以看到构建后的资产文件。
拉取部署(方式一)
进入到EdgeOne Pages中。https://console.cloud.tencent.com/edgeone/pages。点击创建项目，导入Git仓库，选择Github仓库，进入到配置项目页。此处分支选择上一节构建完毕的结果分支gh-pages分支。如果想要绑定自己的域名，但是没有备案，则区域设置选择全球可用（不含内地）。
无需其他设置，点击开始部署即可。等待大概一分钟，部署完毕。
默认分配了有效访问时间的预览域名，也可以绑定自己的域名。
为了实现EdgeOne Pages自动拉取产物部署，可以设置一个钩子，在Pages项目设置页中，新建钩子并拿到最终的API地址。在github仓库设置中新建Webhook。
推送部署(方式二)
如上提及方式为EdgeOne Pages主动拉取资产，EdgeOne Pages提供了CLI，能够实现推送方式，这种方式下，不需要通过Webhook实现两端同步。但是需要一个EdgeOne Pages的凭证配置到Github仓库设置中。创建一个API Token。
回到Github仓库设置中，找到机密与变量设置，Actions下创建一个机密
key为EDGEONE_API_TOKEN，值为从EdgeOne Pages中新建的Api Token值。
修改原有流水线构建文件，直接构建到部署。此处部署新项目名为edgeonepagesblazordemopush，以区分方式一，其内容如下：
# This workflow will build a .NET project
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-net
name: Deploy to EdgeOne Pages
on:
push:
branches: [ "main" ]
pull_request:
branches: [ "main" ]
jobs:
deploy-to-edgeone-pages:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup .NET
uses: actions/setup-dotnet@v4
with:
dotnet-version: 8.0.x
- name: Publish DotNet Blazor Project
run: dotnet publish ./EdgeOnePagesBlazorDemo/EdgeOnePagesBlazorDemo.csproj -c Release -o release --nologo
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '22.11.0'
- name: Deploy to EdgeOne Pages
run: npx edgeone pages deploy ./release/wwwroot -n edgeonepagesblazordemopush -t ${{ secrets.EDGEONE_API_TOKEN }}
env:
EDGEONE_API_TOKEN: ${{ secrets.EDGEONE_API_TOKEN }}
如此一来，直接推送代码后，自动进行流水线构建并推送到edgeone pages。
在edgeone pages中可以看到新项目，同样预览没问题。后续任何代码变更自动更新edgeone pages站点。
总结
通过edgeone pages承载blazor wasm项目，薅其静态站点服务，本文借助github及action完成，同样可以借助其他平台完成，总归是利用平台的构建与edgeone cli推送。
参考
https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-9.0#github-pages https://edgeone.cloud.tencent.com/pages/document/180252837825597440
2025-06-19，望技术有成后能回来看见自己的脚步。