跳到主要内容

在 Cloudflare 上托管 Flet 网站

本指南提供了在 Cloudflare 上托管 Flet 静态网站的说明。

在部署之前,您需要一个账户。从这里获取一个账户,或者如果您已经有一个账户,只需登录。注册后,您将收到一封确认电子邮件,请点击其中的链接以验证您的电子邮件地址。

在您的账户中,从侧边菜单中选择“Pages”,如下所示:

然后,从那里选择“创建项目”按钮:

Cloudflare 提供了三种创建项目的方法。这里只介绍前两种:

  • 连接到 Git 提供商
  • 直接上传

连接到 Git 提供商

备注

这方法仅适用于 flet publish 命令。

为此,您需要有一个 GitHubGitLab 账户。在该账户中应该有您计划使用的存储库。例如,可以查看这个 repo

点击“Connect to Git”蓝色按钮:

从那里,选择包含您的存储库的服务选项卡。然后,连接您的账户。选择一个建议的选项,然后点击“Install & Authorize”。

选择要使用的存储库,然后点击“Begin setup”按钮。

在继续之前,在您的存储库中添加一个 runtime.txt 文件。该文件应包含要使用的 Python 版本。在文件中输入 3.7,这是 Cloudflare 在编写时使用的最新 Python 版本。

这里 是上述存储库中的一个示例。

完成这些步骤后,我们可以移动到下一步,即配置网站的构建和部署设置。

设置项目名称和生产分支。生产分支是指您的存储库中的分支,每当您推送提交时都会自动触发生产环境中的部署。推送到其他分支将触发预览环境中的部署。

设置这两个选项后,跳转到“Build settings”部分,我们将设置构建指令。

跳过“Framework preset”(允许 None),因为 Flet 不是 JavaScript 框架,也不在列表中 :)

“Build command” 取决于您的应用程序结构。按照上面的指南来创建自定义的构建命令。

当 Flet 运行构建命令时,将创建一个名为‘dist’的文件夹,其中包含 Cloudflare Pages 所需的所有 Web 文件。将其设置为输出目录。请注意,这个文件不会添加到您的存储库中,因为 Cloudflare 只有对代码的读取权限。

您可以 optionally 指定高级参数:根目录(Cloudflare 运行构建命令的目录)和环境变量(在构建时使用的变量)。

现在,点击“Save and Deploy”按钮,让 Cloudflare 完成剩下的工作。

点击显示的 URL,以访问已部署的网站。

如果在打开网站时看到 Cloudflare 错误,那么它意味着他们还没有完全完成设置。因此,请等待一分钟,然后刷新页面,您将看到应用程序正在运行。 测试已部署的网站 here

直接上传

备注

这方法适用于 flet build webflet publish 命令。

点击“Upload assets”。在第一步中,给您的项目命名。请记住,您将使用的名称将用于确定部署到的链接。

第二步要求您上传项目资产,或者作为文件夹或 zip 文件(包含所有资产)。如果您已经拥有这些资产,那么使用拖放或使用文件选择器选择它们。

如果您还没有这些资产,但已经有一个应用程序,可以使用 flet publish 命令在包含应用程序文件的目录中,并创建一个 dist 文件夹,然后将其上传到 Cloudflare Pages,如上所述。

上传完成后,点击“Deploy site”按钮。

您将看到一个成功消息,包括已部署网站的链接。测试已部署的网站 here

如果在打开网站时看到 Cloudflare 错误,那么它意味着他们还没有完全完成设置。因此,请等待一分钟,然后刷新页面,您将看到应用程序正在运行。 您现在可以点击“Continue to project”按钮,以监控部署或创建新的部署按照上面的步骤。

故障排除

当 Flet 应用程序在 Web 浏览器中运行时,所有的 print() 语句都将显示在浏览器的“控制台”选项卡中。print() 可以用作简单的调试工具。

您也可以使用 logging 模块,并将消息输出到控制台,以不同的严重性。

要启用详细的 Flet 日志记录,请添加以下代码到您的程序中:

import logging
logging.basicConfig(level=logging.DEBUG)