跳到主要内容

使用Pyodide发布静态网站

通过Pyodide可以将Flet应用程序发布为独立的静态网站（SPA），并完全在浏览器中运行。

Pyodide是CPython移植到WebAssembly（WASM）的一个版本，WebAssembly是一种新兴技术，具有一些限制。Pyodide附带了一长串内置包。然而，要使用来自PyPI的Python包，它必须是纯Python包或者提供一个为Emscripten构建的二进制文件（构建新包）。

Flet静态与服务器端​

Flet静态优势：

  • 用户生成的事件（点击、文本字段更改、拖动）和页面更新之间的零延迟。没有Fletd服务器，没有WebSockets - Python程序直接通过JavaScript与Flutter Web客户端通信。
  • 低廉的托管费用 - Flet静态应用程序不需要任何服务器上运行的代码，因此可以在任何地方托管：GitHub Pages、Cloudflare Pages、Replit、Vercel、共享托管或您自己的VPS上。
  • 更高的可扩展性 - Flet静态应用程序完全在浏览器中运行，如果不使用任何服务器端API，则可以通过CDN扩展到任意数量的用户。

Flet静态劣势：

  • 加载时间较慢 - 需要额外的时间下载Python引擎（Pyodide）、内置包和用户程序。此外，Pyodide引擎本身的初始化大约需要2-4秒钟，团队正在寻求改进。
  • Python兼容性有限 - 不是每个在本机Python中工作的程序都可以在Pyodide中运行。
  • 性能较低 - Pyodide目前比本机的Python慢3倍到5倍，因此具有高处理要求的Flet应用最好部署为服务器端应用。
  • 用户可以在浏览器下载程序代码时以tar.gz归档的形式访问程序代码。

异步或非异步？​

异步或非异步的Flet应用程序都可以发布为静态网站。在并发性方面，网站将只有一个线程和一个单独的用户 - 您自己。如果您的应用程序具有计算密集型的逻辑，它可能会影响UI的响应性，无论应用程序是异步的还是非异步的。

然而，如果您的应用程序包含I/O逻辑（例如，适用于Pyodide的fetch包装器）按定义在浏览器中是异步的，则您的应用程序必须是异步的。

发布静态网站应用程序​

运行以下命令将Flet应用程序发布为独立网站：

flet publish <your-flet-app.py>

静态网站将被发布到./dist目录中。

命令可选参数：

  • --pre - 允许micropip安装预发布的Python包。
  • -a ASSETS_DIR，--assets ASSETS_DIR - 指定资产目录的路径。
  • --app-title APP_TITLE - 应用程序标题。
  • --app-description APP_DESCRIPTION - 应用程序描述。
  • --base-url BASE_URL - 应用的基本URL。
  • --web-renderer {canvaskit,html} - 要使用的Web渲染器。
  • --route-url-strategy {path,hash} - URL路由策略。

测试网站​

您可以使用Python的内置http.server模块来测试发布的Flet应用程序：

python -m http.server --directory dist

在浏览器中打开http://localhost:8000以查看发布的应用程序。

加载包​

您可以在应用程序启动时从PyPI加载自定义包，只需在requirements.txt中列出它们。requirements.txt必须与<your-flet-app.py>文件位于同一目录中。

requirements.txt的每一行都包含一个包名称，后面是可选的版本说明符。

信息

为了安装自定义包，Pyodide使用了micropip - 一种在浏览器中工作的轻量级pip版本。

您可以直接在Flet应用程序中使用Micropip API：

import sys

if sys.platform == "emscripten": # 检查是否在Pyodide环境中运行
    import micropip
    await micropip.install("regex")

预发布的Python包​

您可以通过在flet publish命令中添加--pre选项来允许加载PyPI包的预发布版本：

flet publish <your-flet-app.py> --pre

资源​

如果您的应用程序需要资源（图像、字体等），可以使用--assets <directory>选项将它们复制到网站目录中，然后使用flet publish命令：

flet publish <your-flet-app.py> --assets assets
警告

如果您的应用程序目录中有assets目录，并且没有指定--assets选项，则assets目录的内容将与Python应用程序一起打包，而不是复制到dist目录中。

URL策略​

Flet应用程序支持两种URL配置方式：

  • 路径（默认）- 路径在读取和写入时不带哈希。例如，fletapp.dev/path/to/view。
  • 哈希 - 路径在读取和写入时使用哈希片段。例如，fletapp.dev/#/path/to/view。

如果托管提供程序支持单页应用程序（SPA）渲染，您可以保留默认的“路径”URL策略，因为它提供了漂亮的URL。

但是，如果托管提供程序（如GitHub Pages）不支持SPA模式，则需要使用“哈希”URL策略发布应用程序。

要在静态应用程序发布过程中指定“哈希”URL策略，请使用--route-url-strategy选项：

flet publish <your-flet-app.py> --route-url-strategy hash

Web渲染器​

您可以使用--web-renderer选项将默认的“canvaskit”Web渲染器（有关渲染器的更多信息请参见此处）更改为“html”：

flet publish <your-flet-app.py> --web-renderer html

彩色表情符号​

为了减小应用程序的大小，默认的“CanvasKit”渲染器不使用彩色表情符号，因为带有彩色表情符号的字体文件大小约为8 MB。

但是，您可以使用--use-color-emoji标志选择彩色表情符号：

flet publish <your-flet-app.py> --use-color-emoji

或者，切换到使用浏览器字体的html渲染器。

在子目录中托管网站​

多个Flet应用程序可以托管在单个域中，每个应用程序都位于自己的子目录中。

要使发布的Flet应用程序在子目录中正常工作，必须使用--base-url选项发布它：

flet publish <your-flet-app.py> --base-url <sub-directory>

例如，如果应用程序的URL是https://mywebsite.com/myapp，则必须使用--base-url myapp进行发布。

部署网站​

将静态网站部署到任何免费托管平台，如GitHub Pages、Cloudflare Pages或Vercel！

Cloudflare Pages​

在开始部署之前，您需要一个帐户。您可以从这里获取一个，或者如果您已经有一个帐户，可以直接登录。注册后，您将收到一封包含确认链接的电子邮件，请单击链接以验证您的电子邮件地址。如果您在收件箱中没有收到邮件，请检查垃圾邮件文件夹。

在您的帐户中，从侧边菜单中选择“Pages”如下所示：

然后，选择“Create a project”按钮：

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

  • 连接到Git提供程序
  • 直接上传

连接到Git提供程序​

为此，您需要拥有一个GitHub或GitLab帐户。在此帐户中应该有您计划使用的存储库。一个示例可以在此存储库中找到。

单击“Connect to Git”蓝色按钮：

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

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

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

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

完成这一步后，我们现在可以进行下一步，即配置一些构建和部署设置。

设置您的项目名称和要使用的生产分支。生产分支只是您的存储库中的分支，对其进行任何提交的推送将自动触发到生产环境的部署。对其他分支的推送将触发到预览环境的部署。

在设置这两个设置后，跳转到“构建设置”部分，我们将在其中设置构建指令。

跳过“框架预设”（允许为空），因为Flet既不在列表中，也不是JavaScript框架 :)

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

当Flet运行构建命令时，将创建一个名为“dist”的文件夹，其中包含Cloudflare页面所需的所有Web文件。将其设置为您的输出目录。请注意，此文件不会添加到您的存储库中，因为Cloudflare只能读取您的代码。

您还可以选择指定高级参数：根目录（Cloudflare在其中运行构建命令的目录）和环境变量（在构建时使用的变量）。

现在，点击“保存并部署”按钮，让Cloudflare为您完成剩下的工作。

单击显示的URL以转到您部署的站点。

如果打开站点时看到Cloudflare错误，这意味着他们还没有完全完成设置。因此，只需等待一分钟然后刷新页面，您将看到应用程序正在运行。

在此处测试已部署的站点here。

直接上传​

点击“上传资源”。在第一步中，为您的项目命名。请记住，您给出的名称将用于确定部署项目的链接。

第二步需要您上传项目的资源，可以是文件夹或包含所有资源的压缩文件。如果您已经有其中之一，请使用拖放或使用文件夹选择器选择它们。

如果您尚未拥有这些资源，但已经构建了一个应用程序，请在包含应用程序文件的目录中使用flet publish命令，然后将创建一个名为dist的文件夹，您可以将其上传到Cloudflare页面中，如上所述。

上传后，按下底部的“部署站点”按钮。

然后，您将看到一个成功的消息，其中包含指向您部署的网站的链接。在此处测试一个已部署站点的示例here。

如果打开站点时看到Cloudflare错误，这意味着他们还没有完全完成设置。因此，只需等待一分钟然后刷新页面，您将看到应用程序正在运行。

现在，您可以单击“继续到项目”按钮来监视您的部署，或按照上述相同步骤创建新的部署。

故障排除​

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

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

要启用详细的Flet日志记录，请将以下内容添加到您的程序中：

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