Flutter For Web配合Nginx搭建一个简单的网页

Ubuntu上部署的项目多了，想弄个entrance一起管理一下。

先看下最终效果：

1.开启flutter的web模式

//只有master和develop等分支支持flutter web，stable是不行的。

flutter channel master

//开启支持web模式

flutter config --enable-web true

flutter devices

可以看到新增了chrome

//创建一个新web项目

flutter create .

flutter run -d chrome就可以在浏览器中看到效果了。整体而言还是很简单的。

我们可以简单地修改一下界面。

            FlatButton(
                onPressed: () {
                  launch(url["jenkins"]);
                },
                child: Tooltip(
                  message: url["jenkins"],
                  child: Text(
                    "Go to Jenkins",
                    style: TextStyle(fontSize: 24),
                  ),
                )),
            FlatButton(
                onPressed: () {
                  launch(url["nexus"]);
                },
                child: Tooltip(
                  message: url["nexus"],
                  child: Text("Go to Nexus maven center",
                      style: TextStyle(fontSize: 24)),
                )),
            FlatButton(
                onPressed: () {
                  launch(url["http"]);
                },
                child: Tooltip(
                    message: url["http"],
                    child: Text("Go to http server",
                        style: TextStyle(fontSize: 24)))),
          ],

增加三个按钮。这里用到了跳转页面，需要用到url_launcher库里的launch方法，这个库是支持web的。

flutter build web

就可以看到web目录里生产了dart转换成js的代码。

如果有Python只需要

python -m SimpleHTTPServer 8000

就可以启动一个httpserver了，但是我想

1.转到80端口，不需要输入端口号

2.不想每次都手动来启动

3.Python httpserver在当前路径，我想指定路径

之前有配Nginx

1.把生成的web文件放在配置好的目录

2.到nginx的配置文件目录，/etc/nginx/sites-enabled/，把默认的删掉

3.到/etc/nginx/nginx.conf中建一个Http server

4.在sites-available中新建一个文件，eg: node

把80端口的请求forward到82端口的http服务。没有直接把httpserver服务配在80上是为了方便以后导到其它端口上的服务。

5.systemctl restart nginx

重新访问一下localhost就可以默认指向我们配好的服务了。