Flutter项目中构建Web工程以及发布nginx服务

Flutter的beat通道已经支持对web的支持，通过 Web 支持，你可以将使用 Dart 编写的现有 Flutter 代码编译为可以嵌入浏览器，并部署到任何 Web 服务器上，具有客户端体验的 Web 应用。你可以使用 Flutter 的所有功能，而不需要任何浏览器插件。

使用Flutter构建Web应用

1.创建一个支持Web的新项目

如果你不知道自己的FLutter的channel版本，你可以使用命令来查看Flutter通道：

*选中代表目前FlutterSDK的通道版本。我这里已经是切换到beta通道来，如果不是beta通道，请切换到beta通道，这样才能支持对web的构建，运行以下命令，使用最新的 beta 频道的 Flutter SDK，并开启 web 支持：

这里要注意的是有可能会切换失败，如果切换beta版本出现以下错误：

解决办法就是在Flutter安装目录的根目录下运行以下命令：

在运行这个命令之后，你会回到beta分支，可以使用来完成更新。

如果失败了，检查origin 是否指向  仓库，可以通过下面命令：

一旦开启了 Web 支持，运行  命令会输出一个名为 Chrome 的设备信息。

在开启了 Web 支持后，需要重启 IDE。现在可以在设备下拉列表中看到 Chrome

2.对已有的应用添加Web支持

如果之前在stable通道新建的项目，是不支持Web项目的，对于这样的项目需要在项目根目录下输入以下命令：

成功后，便可以在项目根目录下看到web文件夹了。

3.构建Web项目发布

可以在项目根目录运行命令来选择对应设备运行项目，这里就使用Chrome浏览器来运行

使用命令 flutter build web来构建web项目，

构建成功后，打开根目录下面的buid->web文件夹，该文件夹下的内容可以用来发布web应用到服务器上。

image

如果目录结构如上图这样就表示build成功，可以将全部文件复制到服务器进行发布。目前只能在beta版本sdk中才能构建，这里也可以看出来生成的web项目和移动端的项目没什么区别，main.dart.js文件大小有好几M，不仅大，而且还挺乱的，几乎包含所有的js方法。而且web项目和移动端项目应该是有差异化的，web浏览器一个页面可以展示更多的组件，不知道后期谷歌会不会根据不同设备的特性来处理各个组件的效果，就像swiftui一样在针对mac，iPhone和手表都会展示不同的UI效果。等待正式发布的那一天吧。

使用Nginx来发布flutter Web应用

Nginx 是一个高性能的 HTTP 和反向代理 web 服务器，我们可以把我们应用发布到 Nginx上，提供IP地址给外部访问。

我们先在电脑上安装Docker，Docker 是一个开源的应用容器引擎。然后在Docker中安装Nginx服务器。如果想在windows上安装Docker请看windows安装Docker

1.在MacOS上安装Docker

macOS 我们可以使用 Homebrew 来安装 Docker。

Homebrew 的 Cask 已经支持 Docker for Mac，因此可以很方便的使用 Homebrew Cask 来进行安装：

安装成功后，在载入 Docker app 后，点击 Next，可能会询问你的 macOS 登陆密码，你输入即可。之后会弹出一个 Docker 运行的提示窗口，状态栏上也有有个小鲸鱼的图标。

2.Docker 安装 Nginx

获取最新版的 Nginx 镜像

安装完成后，我们可以使用以下命令来运行 nginx 容器：

运行成功后，我们可以通过浏览器可以直接访问本机ip 8080 端口的 nginx 服务：

image

这个时候我们还需要将我们项目发布到nginx服务上，发布成功后，就可以直接使用本机ip访问flutter web项目了。

3.将我们的项发布到nginx服务上

将flutter工程根目录下，web文件夹下的所有文件复制到

nginx服务器配置目录。下的html文件夹下，这个目录在你上面输入运行nginx命令的根目录下：

image

使用命令来关闭和删除nginx服务

从工程映射的位置启动nginx服务

然后我们再在我们浏览器中输入自己电脑的ip地址，ok，大功告成。