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

來源: 饅哥不光會(huì)玩當(dāng)耐特
作者:MJZHOU
時(shí)間:2020-10-26
16448
本文介紹了如何使用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ù)覽版。

640.png

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)行的。

微信圖片_20201026094158.png

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

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

640 (1).png

新建完成之后使用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)建界面:

640 (2).png

640 (3).png

跟創(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地址到瀏覽器訪問一下:

640 (4).png

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

640 (5).png

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

微信圖片_20201026094220.png

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

640 (6).png

我們回到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)化部署成功了,真香。

640 (7).png

總結(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,真香。

立即登錄,閱讀全文
版權(quán)說明:
本文內(nèi)容來自于饅哥不光會(huì)玩當(dāng)耐特,本站不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。文章內(nèi)容系作者個(gè)人觀點(diǎn),不代表快出海對觀點(diǎn)贊同或支持。如有侵權(quán),請聯(lián)系管理員(zzx@kchuhai.com)刪除!
相關(guān)文章
Azure Arc為企業(yè)構(gòu)建安全的云基礎(chǔ)
Azure Arc為企業(yè)構(gòu)建安全的云基礎(chǔ)
隨著人工智能技術(shù)持續(xù)重塑企業(yè)運(yùn)營方式,企業(yè)需要能夠處理海量數(shù)據(jù)的系統(tǒng),以支持實(shí)時(shí)洞察,同時(shí)幫助他們應(yīng)對跨IT和OT環(huán)境(包括云端、邊緣和本地)中運(yùn)營、應(yīng)用、數(shù)據(jù)和基礎(chǔ)設(shè)施的協(xié)作難題。
Azure
微軟云
云服務(wù)
2024-12-172024-12-17
釋放.NET 9和Azure的AI技術(shù)與云計(jì)算潛力:更快、更智能、面向未來
釋放.NET 9和Azure的AI技術(shù)與云計(jì)算潛力:更快、更智能、面向未來
.NET 9現(xiàn)已正式發(fā)布,它為.NET平臺(tái)的發(fā)展掀開了嶄新的一頁,突破了性能、云原生開發(fā)和AI技術(shù)集成的邊界。
Azure
微軟云
云服務(wù)
2024-12-162024-12-16
Azure網(wǎng)絡(luò)管理現(xiàn)已具備智能Microsoft Copilot副駕駛能力
Azure網(wǎng)絡(luò)管理現(xiàn)已具備智能Microsoft Copilot副駕駛能力
智能Microsoft Copilot副駕駛for Azure網(wǎng)絡(luò)服務(wù)現(xiàn)已推出公共預(yù)覽版。
Azure
微軟云
云服務(wù)
2024-12-102024-12-10
Microsoft Fabric功能更新,借助AI驅(qū)動(dòng)的數(shù)據(jù)平臺(tái)加速應(yīng)用創(chuàng)新
Microsoft Fabric功能更新,借助AI驅(qū)動(dòng)的數(shù)據(jù)平臺(tái)加速應(yīng)用創(chuàng)新
一年前,我們正式推出了一款端到端數(shù)據(jù)平臺(tái),旨在幫助組織推動(dòng)人工智能轉(zhuǎn)型,并重新定義數(shù)據(jù)的連接、管理和分析方式。
Azure
微軟云
云服務(wù)
2024-12-092024-12-09
掃碼登錄
打開掃一掃, 關(guān)注公眾號后即可登錄/注冊
加載中
二維碼已失效 請重試
刷新
賬號登錄/注冊
個(gè)人VIP
小程序
快出海小程序
公眾號
快出海公眾號
商務(wù)合作
商務(wù)合作
投稿采訪
投稿采訪
出海管家
出海管家