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

什么事Azure静态web应用

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

1. 适用于 HTML、CSS、JavaScript 和映像等静态内容的 Web 托管。
2. 由 Azure Functions 提供的集成 API 支持。
3. 一流的 GitHub 集成，其中存储库更改将触发生成和部署。
4. 全球分布的静态内容，使内容更接近你的用户。
5. 可自动续订的免费 SSL 证书。
6. 自定义域为应用提供品牌自定义。
7. 调用 API 时使用反向代理的无缝安全模型，这不需要配置 CORS。
8. 身份验证提供程序与 Azure Active Directory、Facebook、Google、GitHub 和 Twitter 集成。
9. 可自定义的授权角色定义和分配。
10. 后端路由规则，使你能够完全控制所提供的内容和路由。
11. 生成的临时版本由拉取请求提供支持，在发布前提供站点的预览版本。

创建VUE项目

这次我们使用国内最常见的VUE作为前端的框架来体验下Azure静态web应用的功能。
使用VUE CLI新建一个VUE项目，使用过VUE的用户应该都知道，CLI生成的项目直接是可以运行的。

vue create az_static_vue_test

有了VUE的代码之后我们还需要把代码存在Github上。
在Github上新建一个repository：

创建静态Web应用

我们新建好VUE项目然后推送到Github之后就可以开始在Azure创建静态Web应用资源了：
在portal找到静态web应用功能，点击“创建”，弹出创建界面：

  
<template>
  <div class="hello">
     <h2>
       Azure Static App by Vue
     </h2>
  </div>
</template>

我们把srccomponentsHelloWorld.vue的组件简单的修改下，只留下一句话Azure Static App by Vue 然后提交。

总结

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

关注我的公众号一起玩转技术

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!