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

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

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

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

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

主要特點(diǎn)：

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

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

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

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

可自動(dòng)續(xù)訂的免費(fèi)SSL證書。

自定義域?yàn)閼?yīng)用提供品牌自定義。

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

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

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

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

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

創(chuàng)建VUE項(xiàng)目

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

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

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

在Github上新建一個(gè)repository：

新建完成之后使用Git Push命令把a(bǔ)zstaticvue_test的代碼推上去。

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

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

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

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

儲(chǔ)存庫：azstaticvue_test

分支：main

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

應(yīng)用位置：/

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

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

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

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

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

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

總結(jié)

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