没有服务器如何发布自己的 flutter web 项目

引言

小编最近尝试了使用 flutter web 开发项目工具。由于仅是个人工具，没有放在公司的服务器上。在没有个人服务器资源的情况下，小编尝试了两种方案发布部署自己的 web 项目。

两种部署方式的产物如下，由于没做手机端web的UI适配，请在电脑端的浏览器打开预览：

1. https://liyufengrex.github.io/flutter_json_layout_preview/
2. https://flutter-json-layout.web.app

flutter web 如何打包

在发布前，我们需要先将我们的flutter项目打包编译成 web 资源：

flutter build web --web-renderer canvaskit

为了统一多端交互体验，小编使用如上命令行指定使用 canvaskit 渲染模式进行 web 打包。

打完包之后，同样会在工程目录下生成build目录，用于存放构建结构，下面有一个web目录，就是存放Web项目的打包后结果

image.png

这个 web 文件里的内容就是等会儿我们要发布部署的内容，留待备用，下面我们先来看看如何在服务端进行部署。

方案一：使用 Github pages 发布部署

第一步：在自己的 github 上 create a new repository

image.png

比如：小编创建的项目叫做 flutter_json_layout_preview

image.png

第二步：操作

• 1. 把 github 仓库 clone 下来
• 2. 把 web 的构建结果复制到我们的 github 仓库的本地目录中去
• 3. 修改构建结果中的 index.html 文件中的base标签，修改成你 github 仓库的名字，不然关联不到相对路径资源文件，例如:

image.png
image.png

• 4. 操作完后，把内容 push 到远端

• 5. 来到 github，进入到远端仓库的 Settings 页面，进行如下操作

     
     image.png

• 6. 等待一会，刷新下页面，github会提示你部署成功，可以通过该链接访问

     
     image.png

点击预览效果：https://liyufengrex.github.io/flutter_json_layout_preview/

由于没在 flutter 代码中区分桌面端|手机端做UI适配，在桌面端的浏览器点击打开效果最佳。

PS:
需要做区分的同学可以参考使用 adaptive_breakpoints

bool isDisplayDesktop(BuildContext context) =>
    !isDisplayFoldable(context) &&
    getWindowType(context) >= AdaptiveWindowType.medium;

方案二：使用 Firebase Hosting 发布部署

感兴趣的同学可以看看关于 firebase hosting 的官方介绍

• 1. 使用 npm 安装 Firebase CLI:

npm install -g firebase-tools

• 2. 使用 Google 帐号登录 Firebase

firebase login

• 3. 打开你的 firebase 控制台添加一个新的项目

https://console.firebase.google.com/?hl=zh-cn

image.png

填写项目名称，一路允许，例如小编创建了一个项目名称为 flutter-json-layout:

image.png

• 4. 在本地电脑新建一个文件夹（名字随意），例如：小编新建的文件夹也叫 flutter-json-layout
• 5. 在刚刚新建的文件夹里再新建一个子文件夹叫 public

image.png

• 6. 将把 web 的构建结果（build/web文件夹中的所有内容）复制到 public 文件夹内
• 7. 修改 修改构建结果中的 index.html 文件中的base标签，修改为:

<base href="./">

• 8. 执行初始化命令行，依次选择如下：

frebase init hosting

image.png

• 9. 执行部署命令行

firebase deploy --only hosting

image.png

部署成功后会显示你的 flutter web 预览路径：
https://flutter-json-layout.web.app（请在桌面端的浏览器点击预览）