azure web应用部署_构建您的第一个Azure静态Web应用

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应用部署