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就可以默認指向我們配好的服務了。