Flutter开发的Web应用 构建及部署 标准流程指南

前言

Flutter是Google推出的跨平台开发框架，支持多种平台：Windwos，Mac，iphone，Android，Web，Linux，甚至经过一些折腾还可以支持树莓派，十分强大，笔者曾写过一些探索其底层架构的文章，有兴趣的读者可自行阅读。

笔者的Flutter版本为3.16.5，算是比较新的一个版本了，本文将进行标准的把web项目部署到自有云服务器这一流程，云服务器采用Nginx作为Web托管服务器，服务器运维面板为宝塔面板（但这个不影响什么）。

本文的部署没有涉及到SSR等额外优化技术，只是全面介绍了如何让这一套合规走起来。

正文

构建产物

确保flutter应用支持Web端：

flutter create --platforms web .

构建Web产物：

flutter build web

额外补充

可以选择两种不同的渲染器来运行和构建 Web 应用：

使用 HTML 渲染
使用 HTML，CSS，Canvas 和 SVG 元素来渲染，应用的大小相对 CanvasKit 较小。

使用 CanvasKit 渲染
应用在移动和桌面端保持一致，有更好的性能，以及降低不同浏览器渲染效果不一致的风险。但是应用的大小会增加大约 2MB。

--web-renderer 可选参数值为 auto、html 或 canvaskit。

• auto（默认）- 自动选择渲染器。移动端浏览器选择 HTML，桌面端浏览器选择 CanvasKit。

• html - 强制使用 HTML 渲染器。

• canvaskit - 强制使用 CanvasKit 渲染器。

详情可看官方文档​​​​​​Web 渲染器 | Flutter 中文文档 - Flutter 中文开发者网站 - Flutter

最简单的方式就选择flutter build web即可

上传产物

即上传产物到Web服务器，这个就不多赘述了，把打包产物的所有东西都上传上去就ok，打包产物的目录在build/web。

此外，在服务器上安装nginx的过程也不赘述，这些直接看其他博文就好。

配置Nginx服务器

为Flutter应用添加一个新的server块，server的示例配置直接可以照抄如下写法：

server {
    listen 80;
    server_name flutterapp.mydomain.com;

    root /www/my_flutter_app/build/web;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
        expires 30d;
    }

    location ~ .*\.(js|css)?$ {
        expires 12h;
    }

    access_log /www/wwwlogs/flutterapp-access.log;
    error_log /www/wwwlogs/flutterapp-error.log;
}

• listen 指定web的监听端口号
• server_name 代表域名，没有的话就写服务器ip地址吧
• root 代表web的跟路径目录
• index 指定了用index.html文件作为响应
• 第一个location匹配所有的请求路径，先尝试按请求的URI在root定义的目录下查找文件；如果没有找到，再尝试将URI当作目录处理并查找该目录下的index.html文件；如果还是没有找到，最后就返回根目录下的index.html文件,这样配置更适合flutter这种SPA应用一些。
• 第二个location和第三个location都是定义了缓存，提升网站访问性能
• 后面就是两个报错log了

接下来保存并且重启Nginx服务，同时不忘放行指定端口就大功告成。

补充

在Nginx配置中，server_name 指令用于定义处理请求的服务器的名称。这可以是一个具体的域名（如 example.com），一个子域名（如 sub.example.com），一个通配符名称（如 *.example.com 表示 example.com 的所有子域名），或者是一个精确名称（如 localhost 或特定的一个名称，不一定是有效的域名）。

server_name 将匹配HTTP请求的 Host 头部，使Nginx正确地匹配并处理这些请求。

另外，实测部署flutterWeb后一些显示效果可能会有些问题，需要继续测试改进。