azure web应用部署
当前最有趣的Web开发概念之一是Jamstack 。 它是由Web应用程序平台Netlify推广的一种Web应用程序模型,该模型使用JavaScript,API和标记(因此称为JAM)来交付静态站点,这些站点不会作为服务器生成的动态内容提供。 结果是一种低影响的方式来交付由外部构建并由诸如Azure或Cloudflare的内容交付网络提供服务的应用程序。
Jamstack:新一代的静态Web内容
有了Jamstack,就不再依赖于应用服务器或诸如node.js之类的技术。 相反,只有标准标记可以在任何地方构建和测试,并在更新内容和代码时推送到服务器。 该模型与受devops驱动的现代构建过程很好地配合,并适合GitHub等CI / CD(连续集成/连续交付)平台,在该平台中,在拉动请求填充部署分支和自动部署之前,可以在代码分支中进行协作开发。到您的网站托管者。
[ 同样在InfoWorld上:Git和GitHub用户的27个基本技巧 ]
这是一种有趣且日益流行的构建应用程序的方式。 尽管页面代码是静态的,但其内容不是静态的。 动态内容是使用JavaScript与其他服务的松散耦合的API连接在本地呈现的。 例如,一个静态站点可以通过使用JavaScript呈现电子商务商店来托管电子商务商店,该JavaScript呈现了针对商店服务的RESTful查询所检索的目录内容。 除了API调用之外,站点与后端之间没有直接连接,并且页面中的代码可以检测错误并警告用户。 使用定义明确的API,将Web和应用程序如此分离,可以使应用程序和Web开发并行进行,从而简化了开发,同时提高了交付速度。
当您考虑向云原生应用程序添加前端时,这种松散耦合的模型非常有意义。 前端和后端都可以独立扩展,使用低延迟的大都市内容交付来在用户附近缓存标记,从而可以利用那些CDN平台的缓存工具向用户交付Web应用程序,而不必旋转多个服务器。 如果您使用的是Azure之类的服务,则该模型可以节省大量成本,并减少请求和启动主机VM以及传递响应之间的时间间隔。 尽管Azure可以做到最快,但要保持客户参与度通常仍然太慢。
引入Azure静态Web应用
在Build 2020中, Microsoft推出了自己的平台来支持Jamstack风格的应用程序 :Azure Static Web Apps。 可预览使用 ,它在单个工作流中将GitHub,Azure App Service和Azure Functions结合在一起,并带有Visual Studio Code插件来驱动开发和部署。
Azure静态Web应用程序工作流的核心是GitHub操作 ,当您将应用程序存储库链接到Azure时,将自动创建一个部署操作。 此操作监视特定的分支,并在对该分支进行提交时自动运行生成并将应用程序部署到Azure。 合并拉取请求时,将运行相同的过程。
您需要GitHub和Azure帐户才能开始。 设置好这些后,为您的站点创建一个存储库。 GitHub为常见的静态Web应用程序框架(包括Angular,React和Vue)提供了有用的模板。 使用这些模板为可用于构建应用程序的网站设置脚手架。 可以将存储库克隆到本地开发设备,使开发人员可以访问其通常的工具链。
构建您的第一个静态Web应用
在拥有适合您的应用程序的存储库并放置一些代码之后,转到Azure门户并创建一个新的Static Web App。 您可以将其添加到现有订阅中,或使用免费试用版,创建新资源组或使用现有资源组,为您的应用命名并选择区域。 接下来,登录到Azure中的GitHub帐户以连接您的存储库。 选择您要使用的存储库和分支。 现在,您可以创建静态Web应用程序。 在门户中,配置您的应用程序设置,包括构建设置。
准备就绪后,请检查您的设置并创建应用。 您可以通过编辑在安装过程中创建的工作流文件来更改设置。 初始设置应该很快,在资源详细信息中包含站点URL的详细信息。
在Azure和GitHub中都配置了您的应用程序后,Azure门户将通知您尚未收到任何内容,并检查GitHub操作的状态。 该链接将带您回到GitHub存储库以及安装应用程序的工作流程。 代码完成并准备好部署后,请运行工作流来构建和部署站点。
预览版包括免费托管您的静态内容,因此存储HTML,JavaScript或图像是免费的。 该服务与Azure CDN集成在一起,因此可以将内容自动部署到用户所在的位置。 您可以使用Azure的网络工具来管理内容的可用位置以及用户如何访问内容,并使用SSL对安全连接的支持来管理站点的实时测试版本的暂存。 预览不支持自定义域名,但是当服务启用时,这些域名将可用。
使用Azure函数添加API支持
Microsoft已经发布了Visual Studio Code扩展的预览版, 可与Azure静态Web应用程序一起使用,尽管它目前仅在预览Insider版本中可用。 它与其余的Visual Studio Code Azure工具集成在一起,因此您只需登录一次即可使用。 这是一个有用的工具, 尤其是当您将Azure Functions与您的站点集成时 ,使用它们来承载应用程序和服务的API。
静态Web应用程序模型与无服务器异步事件驱动的API配合良好,因为async await
等JavaScript功能支持查询您的API。 API HTTP端点接收到一个查询,该查询启动并运行一个Function,将响应传递给您的应用程序。 您不仅限于Azure静态Web应用程序的Azure功能。 您可以在浏览器中调用任何RESTful API并在代码中解析结果JSON。
该模型有一个有趣的方面,涉及到Microsoft开发人员故事的另一部分:Azure静态Web应用程序是将PWA(渐进式Web应用程序)和WebAssembly应用程序部署到用户的绝佳方法。 两者都涉及交付静态内容,然后在用户计算机上执行。 使用CDN可以大大增加应用程序的覆盖范围,而无需投资大量的基础架构。
很容易看到一个未来,Visual Studio的PWA工具将自动配置适当的工作流以使用GitHub和Azure静态Web应用程序,只需单击几下鼠标即可从编辑器部署到部署。
翻译自: https://www.infoworld.com/article/3546416/building-your-first-azure-static-web-app.html
azure web应用部署