起因 链接到标题
由于我觉得手动在本地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应用应该已经被成功部署了。
如果仍然有报错,应该检查构建日志,有可能是项目本身的配置有问题。