起因 链接到标题

由于我觉得手动在本地build好再上传到cloudflare pages上太麻烦,所以决定通过集成到Github仓库来实现自动部署,从而减少工作量。

准备工作 链接到标题

一个能正常工作的Flutter项目,和一个从Git仓库构建的Cloudflare Pages项目。

Pages设置 链接到标题

我将会使用自己让AI帮我写的脚本来自动在Cloudflare构建时下载Flutter并自动运行构建命令。

所以,首先,先把Build Command更改为使用我的脚本:

chmod +x build.sh && ./build.sh

随后,Cloudflare需要一个构建输出目录(Build output directory),将其填写为Flutter构建的默认路径:

/build/web

此外,如果程序构建时需要用到环境变量,则在Variables and Secrets中进行相应的设置。

Flutter项目配置 链接到标题

环境变量配置(可选) 链接到标题

我在构建阶段使用的用于获取环境变量的是 (ENVied)[https://pub.dev/packages/envied]

具体配置方式参考其README。配置这个的目的是方便我区分开发环境和生产环境中其BaseURL等配置。

构建脚本 链接到标题

创建一个build.sh,内容大致如下:

#!/bin/bash

# 设置 Flutter SDK 下载地址(稳定版,版本可更换)
FLUTTER_URL="https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.32.2-stable.tar.xz"
FLUTTER_DIR="flutter"

# 下载 Flutter SDK
echo "Downloading Flutter SDK..."
curl -O "$FLUTTER_URL"

# 解压 Flutter SDK
echo "Extracting Flutter SDK..."
tar xf flutter_linux_3.32.2-stable.tar.xz

# 添加 flutter 到 PATH
export PATH="$PWD/$FLUTTER_DIR/bin:$PATH"

# 确保 flutter 命令可用
flutter --version

# 获取依赖
flutter pub get

# 执行 build_runner
flutter pub run build_runner build

# 构建 Web(WASM)
flutter build web --wasm

成功 链接到标题

随后如果不出意外,这个Web应用应该已经被成功部署了。

如果仍然有报错,应该检查构建日志,有可能是项目本身的配置有问题。