专栏首页.NET开发那点事使用 Azure静态web应用+Github全自动部署VUE站点

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

什么事Azure静态web应用

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

Azure 静态 Web 应用通过与github actions集成,通过监听仓库的分支,当分支有push,pull request等动作的时候自动触发构建,并且部署到Azure。 Azure 静态 Web 应用支持对常见的VUE,React,Angular甚至Blazor进行自动构建及部署。并且部署的网站会使用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:

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

创建静态Web应用

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

跟创建其他资源类似,填写一个名称,区域选离自己近的。源代码管理选择使用Github账户,点击之后会跳转到Github授权页面。授权完成后就可以选择刚才上次的VUE项目了。 储存库:az_static_vue_test 分支:main 生成预设:Vue.js 应用位置:/ 应用项目位置:dist 填写完成之后点击“创建”开始创建资源,等待一会Azure提示创建成功之后我们可以进入资源的概览界面。复制URL地址到浏览器访问一下:

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

接下来让我们修改下项目源代码,再次推送到Github上:

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

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

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

总结

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用Azure Functions玩转Serverless

    通过无服务器计算,开发者无需管理基础结构,从而可以更快构建应用程序。通过无服务器应用程序,将由云服务提供商自动预配、缩放和管理运行代码所需的基础结构。

    kklldog
  • 使用 Azure Blob Stoage 实现一个静态文件服务器

    Azure Blob Stoage 是微软Azure的对象存储服务。国内的云一般叫OSS,是一种用来存储非结构化数据的服务,比如音频,视频,图片,文本等等。用户...

    kklldog
  • 使用Github部署Azure应用服务

    上次我们介绍了如何使用Azure应用服务(不用虚机不用Docker使用Azure应用服务部署ASP.NET Core程序)。我们通过Visual studio新...

    kklldog
  • 运用大数据创新社会治理机制

      随着信息化的发展,人类社会开始迈入大数据时代。大数据除其经济价值外,还蕴含着巨大的社会价值,对当前我国的社会治理带来了诸多的机遇和挑战。如何认识大数据所带...

    腾讯研究院
  • VS 2010 OpenGL 配置与实例开发

    首先参考了网上的安装配置环境部分:http://blog.csdn.net/Ididcan/article/details/4490797

    用户4645519
  • 腾讯云 Elasticsearch 进阶篇(二十四)Logstash讲解与实战

    上一节我们通过一个简单的实际列子来启动论证了logstash, 那么接下来,我们重点来讲一下它的工作原理、以及各插件的运行机制与使用方法。

    南非骆驼说大数据
  • 关于混合云成本的5个误解

    如果企业没有明智的成本计划,当月度账单到来时,则可能会面临高昂的费用。因此需要考虑专家提出的有关如何管理混合云成本的建议。

    静一
  • 老掉牙的Linux uniq还能这么玩儿!网友:以前都白学了!

    如果你是一个Linux用户,并且工作涉及到处理和操作文本文件和字符串,那么你应该已经熟悉uniq命令了,因为它是该领域最常用的命令。

    程序员小助手
  • Java集合--List

    贾博岩
  • 谷歌趋势:人工智能首超大数据,深度学习关注度上升最快

    【新智元导读】 KDnugget 在谷歌趋势(Google Trends)上对比了几个相关关键词的关注度,对大数据、机器学习、人工智能、数据科学和深度学习进行排...

    新智元

扫码关注云+社区

领取腾讯云代金券