什么事Azure靜態web應用
Azure 靜態 Web 應用是一種服務，可從 GitHub 存儲庫自動構建完整的堆棧 Web 應用，並將其部署到 Azure，目前它還是預覽版。
Azure 靜態 Web 應用通過與github actions集成，通過監聽倉庫的分支，當分支有push，pull request等動作的時候自動觸發構建，並且部署到Azure。
Azure 靜態 Web 應用支持對常見的VUE，React，Angular甚至Blazor進行自動構建及部署。並且部署的網站會使用Azure分布在全球的服務器，當用戶訪問的時候會選擇地理位置最近的服務器來加速訪問速度提高用戶體驗。
主要特點：
- 適用於 HTML、CSS、JavaScript 和映像等靜態內容的 Web 托管。
- 由 Azure Functions 提供的集成 API 支持。
- 一流的 GitHub 集成，其中存儲庫更改將觸發生成和部署。
- 全球分布的靜態內容，使內容更接近你的用戶。
- 可自動續訂的免費 SSL 證書。
- 自定義域為應用提供品牌自定義。
- 調用 API 時使用反向代理的無縫安全模型，這不需要配置 CORS。
- 身份驗證提供程序與 Azure Active Directory、Facebook、Google、GitHub 和 Twitter 集成。
- 可自定義的授權角色定義和分配。
- 后端路由規則，使你能夠完全控制所提供的內容和路由。
- 生成的臨時版本由拉取請求提供支持，在發布前提供站點的預覽版本。
創建VUE項目
這次我們使用國內最常見的VUE作為前端的框架來體驗下Azure靜態web應用的功能。
使用VUE CLI新建一個VUE項目，使用過VUE的用戶應該都知道，CLI生成的項目直接是可以運行的。
vue create az_static_vue_test
有了VUE的代碼之后我們還需要把代碼存在Github上。
在Github上新建一個repository：
新建完成之后使用Git Push命令把az_static_vue_test的代碼推上去。
創建靜態Web應用
我們新建好VUE項目然后推送到Github之后就可以開始在Azure創建靜態Web應用資源了：
在portal找到靜態web應用功能，點擊“創建”，彈出創建界面：
跟創建其他資源類似，填寫一個名稱，區域選離自己近的。源代碼管理選擇使用Github賬戶，點擊之后會跳轉到Github授權頁面。授權完成后就可以選擇剛才上次的VUE項目了。
儲存庫：az_static_vue_test
分支：main
生成預設：Vue.js
應用位置：/
應用項目位置：dist
填寫完成之后點擊“創建”開始創建資源，等待一會Azure提示創建成功之后我們可以進入資源的概覽界面。復制URL地址到瀏覽器訪問一下：
可以看到我們的VUE項目的默認界面出現了。也就是說Azure靜態web應用為我們自動編譯了VUE的代碼並把產物直接部署好了。
接下來讓我們修改下項目源代碼，再次推送到Github上：
<template>
<div class="hello">
<h2>
Azure Static App by Vue
</h2>
</div>
</template>
我們把src\components\HelloWorld.vue的組件簡單的修改下，只留下一句話Azure Static App by Vue 然后提交。
我們回到github上那個repository，選擇Acitons，可以看到有個任務正在執行，其實Azure靜態web應用跟Github就是通過Actions串聯起來的。等待這個任務變成綠色，我們再次訪問下上面的URL，可以看到首頁已經變成了我們編輯后的樣子，說明已經自動化部署成功了，真香。
總結
今天試用了Azure靜態web應用功能，並且配合github全自動部署了一個VUE站點，雖然它還是一個預覽版，體驗相當不錯，簡單易用。Azure靜態web應用不光支持VUE，還支持angular，react等常見的前端框架，甚至還支持自己最新的blazor技術。有了它開發者只管玩命寫代碼就行了，至於其他的啥都不用管，什么CICD，什么Devops，什么Workflow統統不用管，一切交給Azure，真香。
關注我的公眾號一起玩轉技術
