主题
本指南提供在 Cloudflare 上托管 Flet 静态网站的说明。
在开始部署之前,你需要一个账号。从 这里 注册,如果已有账号直接登录即可。注册后,你需要点击邮件中收到的链接来验证邮箱地址。如果收件箱里没有,也请检查垃圾邮件。
在账号中,从侧边菜单选择「Pages」,如下图所示:

然后,从那里选择「Create a project」按钮:

Cloudflare 提供了三种创建项目的方式。这里只介绍前两种:
- 连接到 Git 提供商
- 直接上传

连接到 Git 提供商
INFO
此方法仅适用于 flet publish 命令。
为此,你需要一个 GitHub 或 GitLab 账号。该账号下应有你计划使用的仓库。可参考这个 repo 作为示例。
点击蓝色的「Connect to Git」按钮:

从那里,选择包含你仓库的服务对应的标签页。然后,连接你的账号。选择其中一个推荐选项,再点击「Install & Authorize」。

选择要使用的仓库,并按下「Begin setup」按钮。

在继续之前,在你的仓库中添加一个 runtime.txt 文件。它应包含要使用的 Python 版本。在文件中输入 3.7,这是撰写本文时 Cloudflare 使用的最新 Python 版本。
上面仓库的示例在 这里。
完成这些后,我们就可以进入下一步,为你的站点配置一些构建与部署设置。
设置你的项目名称,以及要使用的生产分支。生产分支简单来说就是你的仓库中,任何一次 commit 推送都会自动触发向生产环境部署的分支。推送到其他分支则会触发向预览环境的部署。
设置好这两项后,向下滚动到「Build settings」部分,我们将在这里设置构建指令。
跳过「Framework preset」(选择 None),因为 Flet 既不在列表中,也不是一个 JavaScript 框架 😃
「Build command」取决于你的应用结构。按照上面各节的指南来制定你自定义的构建命令。

当 flet 运行构建命令时,会创建一个名为「dist」的文件夹,其中包含 Cloudflare Pages 所需的所有 Web 文件。把它设为你的输出目录。注意这个文件不会被添加到你的仓库中,因为 Cloudflare 对你的代码只有读权限。

你可以选择指定高级参数:根目录(Cloudflare 运行构建命令的目录),以及环境变量(构建期间使用的变量)。现在,点击「Save and Deploy」按钮,让 Cloudflare 完成剩余的工作。

点击显示的 URL 前往你已部署的站点。

如果打开站点时看到 Cloudflare 错误,说明他们还没有完全完成设置。所以,只需等待一分钟然后刷新页面,就会看到你的应用运行起来了。可以在 这里 试用上面部署的站点。
直接上传
INFO
此方法同时适用于 flet build web 和 flet publish 命令。
点击「Upload assets」。第一步,给你的项目起一个名字。请记住,你填写的名字将决定你的项目部署到的链接。
第二步,需要上传你项目的静态资源,可以是文件夹或 zip 文件(包含所有静态资源)。如果你已经有其中之一,使用拖放或文件夹选择器来选择它们。
如果你还没有这些静态资源,但已经构建好了一个应用,可以在包含应用文件的目录中使用 flet publish 命令,会创建一个 dist 文件夹,然后你把它上传到 Cloudflare Pages,如上所述。
上传后,按下底部的「Deploy site」按钮。

然后你会看到一条成功消息以及指向你已部署网站的链接。可在 这里 试用一个已部署站点的例子。

如果打开站点时看到 Cloudflare 错误,说明他们还没有完全完成设置。所以,只需等待一分钟然后刷新页面,就会看到你的应用运行起来了。你现在可以点击「Continue to project」按钮来监控你的部署,或按照上面相同步骤创建新的部署。
故障排查
当 Flet 应用在 Web 浏览器中运行时,它所有的 print() 语句都会显示在浏览器开发者工具的「Console」标签页中。print() 可以作为一个简单的调试工具使用。
你也可以使用 logging 模块,把不同严重级别的消息输出到 Console。
要启用详细的 Flet 日志,在你的程序中添加:
python
import logging
logging.basicConfig(level=logging.DEBUG)