Blazor是一个非常好用的网页框架;而Cloudflare Pages是一个和Github Pages不相上下的网页托管平台。但是Cloudflare Pages默认只支持静态网页。这是一件很可惜的事情。但是,我们仍然可以让Cloudflare Pages成功托管Blazor网页。
前期准备
在跟着本教程进行操作之前,您需要确保你拥有:
- Cloudflare账户
- Github 账户
- Blazor WebAssembly项目(重点)
Blazor项目不是Blazor WebAssembly怎么办
如果你的项目不是(或者你不确定是不是)Blazor WebAssembly,可以跟着本二级章节章进行操作。
如何确定你的项目是不是Blazor WebAssembly
如果您不确定您的项目是不是Blazor WebAssembly,可以查看您项目的./wwwroot
文件夹,如果文件夹中自项目创建以来就包含./index.html
文件(后期手动添加不算),那么恭喜您,您的项目确实是Blazor WebAssembly。
如何将Blazor Server项目修改为Blazor WebAssembly项目
如果您是在Visual Studio上进行开发,请创建一个名为"Blazor WebAssembly 应用空"的项目;如果您不是,请在任意位置创建一个空文件夹,并在这个文件夹里执行以下命令以创建一个空的Blazor WebAssembly项目:
dotnet new blazorserver-empty
之后将你旧的的项目放到新的项目中。Blazor Server项目与Blazor WebAssembly项目的差别不大,但与Blazor Server不同,Blazor WebAssembly项目运行在客户端上。所以有些Blazor Server上的代码放在Blazor WebAssembly上会出错。
配置网站
对于将Blazor WebAssembly配置到Cloudflare Pages上,有两种方法:
- 本地编译之后直接将输出文件夹中的
./wwwroot
上传到Cloudflare Pages上。 - 将项目删去
./bin
和./obj
文件夹,然后上传到Github储存库,在通过Cloudflare Pages链接该储存库从线上配置。
看上去第一种方法貌似是最快的。但是,实际上Blazor WebAssembly项目编译后有高达200个文件,除非你家网速非常好,否则不建议尝试;而第二种方法只需要上传20的左右的文件(具体看你项目的大小)即可,但Github上能上传的单个文件必须小于25MB。本文重点讲解后者。
使用Github为媒介进行Cloudflare Pages的配置
首先,删去你项目中的./bin
和./obj
文件夹,因为这两个文件夹实在是太大了。不用担心,这两个文件夹都是编译后遗留下来的垃圾。
然后,将你项目的所属的文件夹(这在之后的内容中用Floder表示)上传到Github的储存库上。这样如果网站要更新,就可以直接从储存库把旧的Floder删了,然后再删去Floder中的./bin
和./obj
文件夹并将Floder上传,就能快速更新网站了。Cloudflare会自动重新配置网站。
打开Cloudflare,登录,点击左侧边栏中的 Workers和Pages 。如果你创建过Cloudflare Pages,那么请点击 创建应用程序。然后你应该就会看到以下内容:
然后,请点击界面上方的 Pages 按钮,可以参考上图寻找。此时会弹出来另一个页面,点击页面中央的 连接到Git,然后选择一个储存库点击 开始设置。没有事先配置Git账户的需要先链接账户,才能继续选择储存库。
接着,在弹出来的界面里,将以下代码复制到构建命令的输入框中。
curl -sSL https://dot.net/v1/dotnet-install.sh > dotnet-install.sh;
chmod +x dotnet-install.sh;
./dotnet-install.sh -c 7.0 -InstallDir ./dotnet;
./dotnet/dotnet --version;
./dotnet/dotnet publish -c Release -o output
由于构建命令的输入框只有单行,所以每行命令直接必须用分号隔开。复制的时候,Cloudflare会自动将其合并为单行。以上指令默认将你的项目版本认为成7.0,如果你的项目版本不是7.0,请将以上指令第三行的7.0修改为你项目的版本。
再者,将构建输出目录设置为"output/wwwroot",点击根目录下拉面板,将里面的路径设置为Floder的名称,不用再前面加"./"。
最后,点击保存并部署。完成!