「Flutter for Web 」创建与部署

网上有太多早期 flutter for web 的新手教程，现在看来已经有些过时。
所以说还是看跟着官方文档走一波吧。

step by step.

更新 flutter

先确保你已经安装了 flutter 和 chrome

虽然 2019 年 2 月 google 已经把 flutter_web merge 到 flutter 主工程，但是现在看起来还是 beta 版本才能使用 flutter_web.

 flutter channel beta
 flutter upgrade
 flutter config --enable-web

创建&运行

 flutter create flutter_web_dome
 cd flutter_web_dome
 flutter run -d chrome

讲道理就可以看到：

2.png

具体的开发，根据文档慢慢开发就是了。

打包

网上很多说用 webdev 啥的，但是看官方并没有推荐使用，所以我们简单点，跟着文档来，先 build 一下 。

 flutter build web 

然后在项目 build 文件夹里面会生成对应的文件

/build/web
  assets
    AssetManifest.json
    FontManifest.json
    LICENSE
    fonts
      MaterialIcons-Regular.ttf
      
    
  index.html
  main.dart.js
  main.dart.js.map

看到这个目录结构就说明 build 完成了。

部署到服务器

如果你要部署到 github page，可以使用 peanet 库来帮助你。（我可没有试过。。。）
如果你和我一样，想部署到自己服务器上，那么就继续往下看吧。

想要部署一个 web 项目当然首选「Nginx」 +「docker」

docker 部署 nginx

如果不了解「docker」的同学可以先补补课：docker 安装与入门
先简单启动一个 nginx

docker run -d -p 80:80  --name mynginx nginx

这时候访问你的域名或者ip 就应该可以看到 nginx 的默认页面。
这时候就发现一个问题，nginx 的配置文件和加载 web 项目，都存在于 docker 容器中，我们修改起来非常麻烦。所以我们先把对应的配置拷贝到服务器的本地目录。
在服务器里面创建一个你自己的文件夹，cd 进去，执行下面命令

docker cp mynginx:/etc/nginx/conf.d .
docker cp mynginx:/usr/share/nginx/html .

然后先把原来的的容器停止并删除

docker stop mynginx
docker rm mynginx

然后我们再跑一个 nginx ，这次加上映射。

docker run -d -p 80:80  --name mynginx \
-v 你自己的目录/html:/usr/share/nginx/html \
-v 你自己的目录/conf.d:/etc/nginx/conf.d \
nginx

然后我们修改本地html 文件夹中的 index.html

hello world

ctrl+c 保存，在网址访问域名，应该就可以看到。

image.png

上传 flutter_web 项目

现在我们的 nginx 就准备好了，只要通过 ftp 把我们 build/web 目录里面的文件全部上传到 nginx 的 html 文件夹里面 ，把原来的index 替代。

image.png

然后可能需要重启一下docker

docker restart mynginx

就可以通过网址访问了。

image.png

我后面跟了一个 flutter 是因为我主域名已经放了其他东西，所以通过nginx 做了分发。
具体操作就是修改我们映射下来的 nginx 配置文件 default.conf 在里面加入

 location /flutter {
        root   /usr/share/nginx/html;
        index  /flutter/index.html;
    }

具体路径可能每个人不同，大家随机应变吧。