Azure 建立應用程式個體：以 Flutter Web app 為例
Flutter 理論上可以覆蓋大部分平台的需求，尤其是對 Android 和 iOS 的支援，讓開發者省去一個業務邏輯，要在不同平台各實作一次的煎熬。
Flutter 也可以用來製作網頁應用程式（Web app），但苦惱的是，好不容易做好的網頁 app，卻沒有像是 Google Play 或 App Store 等平台可以發表。
Web app 也是網站的一種，需要將程式碼部署到伺服器，開通相關的線路。但要一般人為一個網站去買一台電腦、申請固定 IP 等等，就是一筆可觀的費用；還要考量到停電、踢到電線、電腦吸到貓毛等使電腦停止運作的風險。
於是市面上就有許多雲服務可以選購，而這次要講解的是 Microsoft Azure。
關於它的資訊網路上已有許多介紹，這邊就直接講重點：如何利用 Azure 架設 Flutter Web app。
建立應用程式個體
如果是新帳號，會看到快速入門中心，在這裡點擊「建立 Web 應用程式」方塊，進入新增的畫面。
如果是已經用一段時間的帳號，就會出現首頁，將滑鼠游標移至「應用程式服務」等候懸浮視窗出現，然後按「新增」。
在新增頁面，只要注意以下欄位：
- 名稱 - 取一個可以識別的好名字，這會搭配後綴成為一個網址。
- 發佈 - 這裡選擇「代碼」
- 執行階段堆疊 - 因 Flutter Web app 是將 dart 語言轉譯成 JavaScript 程式，所以這裡選擇最新版的 Node 16 LTS。
- 作業系統 - 選擇 Linux
- 資源群組 - 如果沒有自動新建話，就按底下的「新增」取一個可以識別的名字。如果之後要搭配其他服務的話會需要它。
- 地區和其他欄位 - 維持預設值即可
按下左下角的「檢閱 + 建立」跳過中間的步驟。
管理應用程式
隨著引導來到應用程式的管理介面，右上角的 URL 就是這個 Web app 的網址。
連線到網站的時候，會出現這個初始畫面。
待會就要發表自己的作品。
建置 Flutter Web app
本例使用 GitHub 儲存庫做為儲存程式的地方。
注意這和原始碼是不同的，需要建立一個專門用來部署的儲存庫。
接著利用 npm 建立 Web 應用程式。
首先在電腦裡新增 Web app 所屬的資料夾，用 CMD 或終端機前往那個資料夾。
輸入指令「npm install -g express-generator」安裝 express-generator。
安裝完畢後，輸入「express」，執行完畢後就會在資料夾裡看到一些資料夾和檔案。
成果如附圖。
在 Flutter 專案中，執行 flutter build web 建置 Web app，建好的檔案會放在專案中 build/web 資料夾。將資料夾裡的所有檔案複製到 public-flutter。
準備完畢後，就可以將 Web 專案的資料夾上傳到 Github。
部署網站到伺服器
從左側的導覽列，點擊「部署中心」。
在來源選擇「GitHub」。
登入 GitHub 成功後，就會出現下面的表單。
- 組織 - 通常會與自己的帳號同名
- 存放庫 - 上一節提到，用來儲存 Web app 的存放庫。
- 分支 - 用來部署 app 的分支，通常是 master。
填寫完畢後，按「儲存」儲存資料。等候大約 5 分鐘讓程式部署。
成功的話，就能從上節提到的 URL 看到自己的網站。
參考資料：
本人自架 Flutter Web app: Flutter Playground
留言
張貼留言