使用Azure靜態(tài)web應(yīng)用全自動部署VUE站點

什么是Azure靜態(tài)web應(yīng)用

Azure靜態(tài)Web應(yīng)用是一種服務(wù)，可從GitHub存儲庫自動構(gòu)建完整的堆棧Web應(yīng)用，并將其部署到Azure，目前它還是預(yù)覽版。

Azure靜態(tài)Web應(yīng)用通過與github actions集成，通過監(jiān)聽倉庫的分支，當分支有push，pull request等動作的時候自動觸發(fā)構(gòu)建，并且部署到Azure。

Azure靜態(tài)Web應(yīng)用支持對常見的VUE，React，Angular甚至Blazor進行自動構(gòu)建及部署。并且部署的網(wǎng)站會使用Azure分布在全球的服務(wù)器，當用戶訪問的時候會選擇地理位置最近的服務(wù)器來加速訪問速度提高用戶體驗。

主要特點：

適用于HTML、CSS、JavaScript和映像等靜態(tài)內(nèi)容的Web托管。

由Azure Functions提供的集成API支持。

一流的GitHub集成，其中存儲庫更改將觸發(fā)生成和部署。

全球分布的靜態(tài)內(nèi)容，使內(nèi)容更接近你的用戶。

可自動續(xù)訂的免費SSL證書。

自定義域為應(yīng)用提供品牌自定義。

調(diào)用API時使用反向代理的無縫安全模型，這不需要配置CORS。

身份驗證提供程序與Azure Active Directory、Facebook、Google、GitHub和Twitter集成。

可自定義的授權(quán)角色定義和分配。

后端路由規(guī)則，使你能夠完全控制所提供的內(nèi)容和路由。

生成的臨時版本由拉取請求提供支持，在發(fā)布前提供站點的預(yù)覽版本。

創(chuàng)建VUE項目

這次我們使用國內(nèi)最常見的VUE作為前端的框架來體驗下Azure靜態(tài)web應(yīng)用的功能。

使用VUE CLI新建一個VUE項目，使用過VUE的用戶應(yīng)該都知道，CLI生成的項目直接是可以運行的。

有了VUE的代碼之后我們還需要把代碼存在Github上。

在Github上新建一個repository：

新建完成之后使用Git Push命令把azstaticvue_test的代碼推上去。

創(chuàng)建靜態(tài)Web應(yīng)用

我們新建好VUE項目然后推送到Github之后就可以開始在Azure創(chuàng)建靜態(tài)Web應(yīng)用資源了：

在portal找到靜態(tài)web應(yīng)用功能，點擊“創(chuàng)建”，彈出創(chuàng)建界面：

跟創(chuàng)建其他資源類似，填寫一個名稱，區(qū)域選離自己近的。源代碼管理選擇使用Github賬戶，點擊之后會跳轉(zhuǎn)到Github授權(quán)頁面。授權(quán)完成后就可以選擇剛才上次的VUE項目了。

儲存庫：azstaticvue_test

分支：main

生成預(yù)設(shè)：Vue.js

應(yīng)用位置：/

應(yīng)用項目位置：dist

填寫完成之后點擊“創(chuàng)建”開始創(chuàng)建資源，等待一會Azure提示創(chuàng)建成功之后我們可以進入資源的概覽界面。復(fù)制URL地址到瀏覽器訪問一下：

可以看到我們的VUE項目的默認界面出現(xiàn)了。也就是說Azure靜態(tài)web應(yīng)用為我們自動編譯了VUE的代碼并把產(chǎn)物直接部署好了。

接下來讓我們修改下項目源代碼，再次推送到Github上：

我們把srccomponentsHelloWorld.vue的組件簡單的修改下，只留下一句話Azure Static App by Vue然后提交。

我們回到github上那個repository，選擇Acitons，可以看到有個任務(wù)正在執(zhí)行，其實Azure靜態(tài)web應(yīng)用跟Github就是通過Actions串聯(lián)起來的。等待這個任務(wù)變成綠色，我們再次訪問下上面的URL，可以看到首頁已經(jīng)變成了我們編輯后的樣子，說明已經(jīng)自動化部署成功了，真香。

總結(jié)

今天試用了Azure靜態(tài)web應(yīng)用功能，并且配合github全自動部署了一個VUE站點，雖然它還是一個預(yù)覽版，體驗相當不錯，簡單易用。Azure靜態(tài)web應(yīng)用不光支持VUE，還支持angular，react等常見的前端框架，甚至還支持自己最新的blazor技術(shù)。有了它開發(fā)者只管玩命寫代碼就行了，至于其他的啥都不用管，什么CICD，什么Devops，什么Workflow統(tǒng)統(tǒng)不用管，一切交給Azure，真香。