使用Azure静态web应用全自动部署VUE站点

小提示：您能找到这篇{使用Azure静态web应用全自动部署VUE站点}绝对不是偶然，我们能帮您找到潜在客户，解决您的困扰。如果您对本页介绍的使用Azure静态web应用全自动部署VUE站点内容感兴趣，有相关需求意向欢迎拨打我们的服务热线，或留言咨询，我们将第一时间联系您！

< ">什么是Azure静态web应用

< font-size: 16px;">Azure静态Web应用是一种服务，可从GitHub存储库自动构建完整的堆栈Web应用，并将其部署到Azure，目前它还是预览版。

< font-size: 16px;">Azure静态Web应用通过与github actions集成，通过监听仓库的分支，当分支有push，pull request等动作的时候自动触发构建，并且部署到Azure。

< font-size: 16px;">Azure静态Web应用支持对常见的VUE，React，Angular甚至Blazor进行自动构建及部署。并且部署的网站会使用Azure分布在全球的服务器，当用户访问的时候会选择地理位置最近的服务器来加速访问速度提高用户体验。

< font-size: 16px;">主要特点< font-size: 16px;">：

< font-size: 16px;">适用于HTML、CSS、JavaScript和映像等静态内容的Web托管。

< font-size: 16px;">由Azure Functions提供的集成API支持。

< font-size: 16px;">一流的GitHub集成，其中存储库更改将触发生成和部署。

< font-size: 16px;">全球分布的静态内容，使内容更市场精准的营销接近你的用户。

< font-size: 16px;">可自动续订的免费SSL证书。

< font-size: 16px;">自定义域为应用提供品牌自定义。

< font-size: 16px;">调用API时使用反向代理的无缝安全模型，这不需要配置CORS。

< font-size: 16px;">身份验证提供程序与Azure Active Directory、Facebook、Google、GitHub和Twitter集成。

< font-size: 16px;">可自定义的授权角色定义和分配。

< font-size: 16px;">后端路由规则，使你能够完全控制所提供的内容和路由。

< font-size: 16px;">生成的临时版本由拉取请求提供支持，在发布前提供站点的预览版本。

< font-size: 16px;">创建VUE项目

< font-size: 16px;">这次我们使用国内最常见的VUE作为前端的框架来体验下Azure静态web应用的功能。

< font-size: 16px;">使用VUE CLI新建一个VUE项目，使用过VUE的用户应该都知道，CLI生成的项目直接是可以运行的。

< font-size: 16px;">有了VUE的代码之后我们还需要把代码存在Github上。

< font-size: 16px;">在Github上新建一个repository：

< font-size: 16px;">新建完成之后使用Git Push命令把azstaticvue_test的代码推上去。

< font-size: 16px;">创建静态Web应用

< font-size: 16px;">我们新建好cctv2 广告费用VUE项目然后推送到Github之后就可以开始在Azure创建静态Web应用资源了：

< font-size: 16px;">在portal找到静态web应用功能，点击“创建”，弹出创建界面：

< font-size: 16px;">跟创建其他资源类似，填写一个名称，区域选离自己近的。源代码管理选择使用Github账户，点击之后会跳转到Github授权页面。授权完成后就可以选择刚才上次的VUE项目了。

< font-size: 16px;">储存库：azstaticvue_test

< font-size: 16px;">分支：main

< font-size: 16px;">生成预设：Vue.js

< font-size: 16px;">应用位置：/

< font-size: 16px;">应用项目位置：dist

< font-size: 16px;">填写完成之后点击“创建”开始创建资源，等待一会Azure提示创建成功之后我们可以进入资源的概览界面。复制URL地址到浏览器访问一下：

< font-size: 16px;">可以看到我们的VUE项目的默认界面出现了。也就是说Azure静态web应用为我们自动编译了VUE的代码并把产物直接部署好了。

< font-size: 16px;">接下来让我们修改下项目源代码，再次推送到Github上：

< font-size: 16px;">我们把srccomponentsHelloWorld.vue的组件简单的修改下，只留下一句话Azure Static App by Vue然后提交。

< font-size: 16px;">我们回到github上那个repository，选择Acitons，可以看到有个任务正在执行，其实Azure静态web应用跟Github就是通过Actions串联起来的。等待这个任务变成绿色，我们再次访问下上面的URL，可以看到首页已经变成了我们编辑后的样子，说明已经自动化部署成功了，真香。

< font-size: 16px;">总结

< font-size: 16px;">今天试用了Azure静态web应用功能，并且配合github全自动部署了一个VUE站点，虽然它还是一个预览版，体验相当不错，简单易用。Azure静态web应用不光支持VUE，还支持angular，react等常见的前端框架，甚至还支持自己最新的blazor技术。有了它开发者只管玩命写代码就行了，至于其他的啥都不用管，什么CICD，什么Devops，什么Workflow统统不用管，一切交给Azure，真香。