折腾记录：Flutter部署网页应用到Vercel

2023-4-26|2023-4-28
AlphaBoom
AlphaBoom
type
status
date
slug
summary
tags
category
icon
password

场景

创建一个聚合搜索的工具型网页部署在Vercel上，是一个界面和功能都很简单的应用。

如何将Flutter网页应用部署到Vercel

需要修改Vercel上部署相关的命令，通过Flutter build 生成web产物，流程如下：
  • 依然按照常规流程在Vercel上创建新工程，并选择对应的Git仓库
  • 选择Framework Preset为Other
  • 修改Build Command为: flutter/bin/flutter build web --release
  • 修改Output Directory为: build/web
  • 修改Install Command为:

    使用相关

    配置环境变量

    在Vercel上配置环境变量Dart上是无法直接读取的，可以采取如下方式：

    使用Serverless服务

    如何在Dart上使用Serverless可以参考这个帖子。
    不确定在Flutter上是否可以用，可能需要自行实现Runtime：
    vercel/DEVELOPING_A_RUNTIME.md at main · vercel/vercel
    Develop. Preview. Ship. Contribute to vercel/vercel development by creating an account on GitHub.
    vercel/DEVELOPING_A_RUNTIME.md at main · vercel/vercel
    https://github.com/vercel/vercel/blob/main/DEVELOPING_A_RUNTIME.md
    vercel/DEVELOPING_A_RUNTIME.md at main · vercel/vercel
    本质是使用AWS Lambda可以直接从源头看如何自定义Runtime：
    Custom Lambda runtimes - AWS Lambda
    You can implement an AWS Lambda runtime in any programming language. A runtime is a program that runs a Lambda function's handler method when the function is invoked. You can include a runtime in your function's deployment package as an executable file named
    Custom Lambda runtimes - AWS Lambda
    https://docs.aws.amazon.com/lambda/latest/dg/runtimes-custom.html
    Custom Lambda runtimes - AWS Lambda
    总结下重点部分：
    • 需要实现Vercel的Build方法
    • Build方法会返回一个Zip文件这个文件和Aws Lambda直接相关
    • Aws Lambda会执行这个Zip里的bootstrap
      • 具体实现就是和Aws的一些网络交互了

    其他

    享受不到Vercel的图片优化

    结语

    本来考虑几年前看过一些Flutter的资料，对整体设计和概念上有一定了解，所以决定用Flutter来写Web应用看看。不过切合这个需求点，我很多都依赖平台服务给的能力：
    • 需要这类平台通过Serverless来实现接口代理，直接国内访问很多国外网络并不稳定。
    • 其实对加载速度还是有要求的，因为工具型网站单次使用时间很短，那么对于Flutter不可避免的初始化（加载那个巨大的js）就不太能接受了。

    下一步

    发现V站有推广Layui的或者返璞归真也是出路
    还是学下并使用前端框架来做吧，暂定Astro。
     
    日常学习
    使用数据库优化赛马娘文章内容在Notion中的展示效果赛马娘游戏内相关数值及技能整理
    • Twikoo