Blazor

Blazor ↗ 是一种 SPA 框架，可在浏览器中使用 C# 代码而非 JavaScript。在本指南中，你将使用 Blazor 构建站点，并使用 Cloudflare Pages 部署。

安装 .NET

Blazor 使用 C#。你需要最新版本的 .NET SDK ↗ 才能继续创建 Blazor 项目。若系统上未安装 SDK，请下载并运行安装程序。

创建新的 Blazor WASM 项目

Blazor 有两种托管模型：Blazor Server ↗ 需要服务器向最终用户提供 Blazor 应用，Blazor WebAssembly ↗ 在浏览器中运行。Blazor Server 与 Cloudflare 边缘网络模型不兼容，因此本指南仅使用 Blazor WebAssembly。

通过运行以下命令创建新的 Blazor WebAssembly (WASM) 应用：

dotnet new blazorwasm -o my-blazor-project

创建构建脚本

要部署，Cloudflare Pages 需要一种构建 Blazor 项目的方式。在项目目录根目录创建 build.sh 文件。用以下内容填充文件（若未使用最新 .NET SDK，请适当更新 .dotnet-install.sh 行）：

#!/bin/sh
curl -sSL https://dot.net/v1/dotnet-install.sh > dotnet-install.sh
chmod +x dotnet-install.sh
./dotnet-install.sh -c 8.0 -InstallDir ./dotnet
./dotnet/dotnet --version
./dotnet/dotnet publish -c Release -o output

build.sh 文件需要可执行，构建命令才能正常工作。可运行 chmod +x build.sh 使其可执行。

继续之前

所有框架指南都假定你已具备 Git ↗ 的基础知识。如果你是 Git 新手，请参阅这份精简 Git 手册 ↗，了解如何在本地设置 Git。

如果你使用 SSH 克隆，则必须在每台用于向 GitHub 推送或拉取的计算机上生成 SSH 密钥 ↗。

更多信息请参阅 GitHub 文档 ↗和 Git 文档 ↗。

创建 `.gitignore` 文件

创建 .gitignore 文件可确保只有必要内容推送到 GitHub 仓库。通过运行以下命令创建 .gitignore 文件：

dotnet new gitignore

创建 GitHub 仓库

访问 repo.new ↗ 创建新的 GitHub 仓库。创建新仓库后，进入新创建的项目目录，在终端中运行以下命令，准备并将本地应用推送到 GitHub：

git init
git remote add origin https://github.com/<your-gh-username>/<repository-name>
git add .
git commit -m "Initial commit"
git branch -M main
git push -u origin main

使用 Cloudflare Pages 部署

要将站点部署到 Pages：

在 Cloudflare 仪表板中，前往 Workers & Pages 页面。
Go to Workers & Pages ↗
选择 Create application（创建应用程序）。
选择 Pages 选项卡。
选择 Import an existing Git repository（导入现有 Git 仓库）。
选择你创建的新 GitHub 仓库，然后选择 Begin setup（开始设置）。
在 Set up builds and deployments（设置构建和部署） 部分，提供以下信息：

配置选项	值
Production branch	`main`
Build command	`./build.sh`
Build directory	`output/wwwroot`

配置站点后，即可开始首次部署。你将看到 Cloudflare Pages 安装 dotnet、项目依赖并构建站点，然后完成部署。

部署站点后，你将在 *.pages.dev 上获得项目的唯一子域名。每次向 Blazor 提交新代码时，Cloudflare Pages 都会自动重新构建并部署项目。你还可以在新 pull request 上获得预览部署，在部署到生产环境之前预览更改效果。

故障排除

文件超过 25 MiB 限制

若收到错误消息 Error: Asset "/opt/buildhome/repo/output/wwwroot/_framework/dotnet.wasm" is over the 25MiB limit，可通过以下操作之一解决：

按照以下指南 ↗减小资源大小。

或

从输出中移除 *.wasm 文件（rm output/wwwroot/_framework/*.wasm），并修改 Blazor 应用以加载 Brotli 压缩文件 ↗。

了解更多

完成本指南后，你已成功将 Blazor 站点部署到 Cloudflare Pages。要开始使用其他框架，请参阅框架指南列表。