Flutter項目中構建Web工程以及發(fā)布nginx服務

Flutter的beat通道已經支持對web的支持，通過 Web 支持查描，你可以將使用 Dart 編寫的現(xiàn)有 Flutter 代碼編譯為可以嵌入瀏覽器，并部署到任何 Web 服務器上累颂，具有客戶端體驗的 Web 應用敷燎。你可以使用 Flutter 的所有功能，而不需要任何瀏覽器插件澄惊。

image

使用Flutter構建Web應用

1.創(chuàng)建一個支持Web的新項目

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

caojingMBP:~ caojing$ flutter channel
Flutter channels:
  master
  dev
* beta
  stable

*號選中代表目前FlutterSDK的通道版本富雅。我這里已經是切換到beta通道來，如果不是beta通道肛搬，請切換到beta通道没佑，這樣才能支持對web的構建，運行以下命令滚婉，使用最新的 beta 頻道的 Flutter SDK图筹，并開啟 web 支持：

flutter channel beta  //切換beta分支
flutter upgrade   //更新到flutter sdk為最新版
flutter config --enable-web //激活flutter對web的支持

這里要注意的是有可能會切換失敗，如果切換beta版本出現(xiàn)以下錯誤：

Unable to upgrade Flutter: no upstream repository configured.

解決辦法就是在Flutter安裝目錄的根目錄下運行以下命令：

git fetch origin
git branch -u origin/beta beta
flutter channel beta

在運行這個命令之后让腹，你會回到beta分支远剩，可以使用flutter upgrade來完成更新。

如果flutter upgrade失敗了骇窍，檢查origin 是否指向 flutter/flutter 倉庫瓜晤，可以通過下面命令：

git remote get-url origin
https://github.com/flutter/flutter.git

一旦開啟了 Web 支持，運行 flutter devices 命令會輸出一個名為 Chrome 的設備信息腹纳。

caojingMBP:~ caojing$ flutter devices
2 connected devices:

Web Server (web) ? web-server ? web-javascript ? Flutter Tools
Chrome (web)     ? chrome     ? web-javascript ? Google Chrome 85.0.4183.83

在開啟了 Web 支持后痢掠，需要重啟 IDE。現(xiàn)在可以在設備下拉列表中看到 Chrome

2.對已有的應用添加Web支持

如果之前在stable通道新建的項目嘲恍，是不支持Web項目的足画，對于這樣的項目需要在項目根目錄下輸入以下命令：

flutter create .

成功后，便可以在項目根目錄下看到web文件夾了佃牛。

3.構建Web項目發(fā)布

可以在項目根目錄運行命令flutter run來選擇對應設備運行項目淹辞，這里就使用Chrome瀏覽器來運行

caojingMBP:play_android_flutter caojing$ flutter run
Multiple devices found:
Web Server (web) ? web-server ? web-javascript ? Flutter Tools
Chrome (web)     ? chrome     ? web-javascript ? Google Chrome 85.0.4183.83
[0]: Web Server (web-server)
[1]: Chrome (chrome)
Please choose one: [0|1]: 1
Launching lib/main.dart on Chrome in debug mode...
Syncing files to device Chrome...                                       
 8,586ms (!)

使用命令 flutter build web來構建web項目，

caojingMBP:play_android_flutter caojing$ flutter build web
Compiling lib/main.dart for the Web...                             24.4s
caojingMBP:play_android_flutter caojing$

構建成功后俘侠，打開根目錄下面的buid->web文件夾象缀，該文件夾下的內容可以用來發(fā)布web應用到服務器上。

image

如果目錄結構如上圖這樣就表示build成功爷速，可以將全部文件復制到服務器進行發(fā)布央星。目前flutter web只能在beta版本sdk中才能構建，這里也可以看出來生成的web項目和移動端的項目沒什么區(qū)別惫东，main.dart.js文件大小有好幾M莉给，不僅大，而且還挺亂的凿蒜，幾乎包含所有的js方法禁谦。而且web項目和移動端項目應該是有差異化的，web瀏覽器一個頁面可以展示更多的組件废封，不知道后期谷歌會不會根據(jù)不同設備的特性來處理各個組件的效果州泊，就像swiftui一樣在針對mac，iPhone和手表都會展示不同的UI效果漂洋。等待flutter web正式發(fā)布的那一天吧遥皂。

使用Nginx來發(fā)布flutter Web應用

Nginx 是一個高性能的 HTTP 和反向代理 web 服務器力喷，我們可以把我們應用發(fā)布到 Nginx上，提供IP地址給外部訪問演训。

我們先在電腦上安裝Docker弟孟，Docker 是一個開源的應用容器引擎。然后在Docker中安裝Nginx服務器样悟。如果想在windows上安裝Docker請看windows安裝Docker

1.在MacOS上安裝Docker

macOS 我們可以使用 Homebrew 來安裝 Docker拂募。
Homebrew 的 Cask 已經支持 Docker for Mac，因此可以很方便的使用 Homebrew Cask 來進行安裝：

$ brew cask install docker

==> Creating Caskroom at /usr/local/Caskroom
==> We'll set permissions properly so we won't need sudo in the future
Password:          # 輸入 macOS 密碼
==> Satisfying dependencies
==> Downloading https://download.docker.com/mac/stable/21090/Docker.dmg
######################################################################## 100.0%
==> Verifying checksum for Cask docker
==> Installing Cask docker
==> Moving App 'Docker.app' to '/Applications/Docker.app'.
&#x1f37a;  docker was successfully installed!

安裝成功后窟她，在載入 Docker app 后陈症，點擊 Next，可能會詢問你的 macOS 登陸密碼震糖，你輸入即可录肯。之后會彈出一個 Docker 運行的提示窗口，狀態(tài)欄上也有有個小鯨魚的圖標吊说。

2.Docker 安裝 Nginx

獲取最新版的 Nginx 鏡像

$ docker pull nginx:latest

安裝完成后论咏，我們可以使用以下命令來運行 nginx 容器：

caojingMBP:~ caojing$ docker run -d -p 80:80  --name mynginx nginx
8feb49e8c635dda66c81d1d44db6d6fa5b3320ef1229bbddc92a25bed99297f3

運行成功后，我們可以通過瀏覽器可以直接訪問本機ip 8080 端口的 nginx 服務：

image

這個時候我們還需要將我們項目映發(fā)布到nginx服務上颁井，發(fā)布成功后厅贪，就可以直接使用本機ip訪問flutter web項目了。

3.將我們的項發(fā)布到nginx服務上

將flutter工程根目錄下雅宾，web文件夾下的所有文件復制到
nginx服務器配置目錄卦溢。下的html文件夾下，這個目錄在你上面輸入運行nginx命令的根目錄下：

image

使用命令來關閉和刪除nginx服務

docker stop mynginx  //停止nginx服務
docker rm mynginx    //刪除nginx服務

從工程映射的位置啟動nginx服務

caojingMBP:~ caojing$ docker run -d -p 80:80  --name mynginx 
-v /Users/caojing/mynginx/html:/usr/share/nginx/html  //要發(fā)布的flutter項目的位置
-v /Users/caojing/mynginx/conf.d:/etc/nginx/conf.d nginx  //nginx服務的配置文件

然后我們再在我們?yōu)g覽器中輸入自己電腦的ip地址秀又，ok，大功告成贬芥。