Trace Id is missing
跳转至主内容
Azure

Static Web Apps

简化了从源代码到全局高可用性的完整堆栈开发。

免费试用 Azure 创建即用即付帐户

通过全球覆盖和缩放快速开发无服务器 Web 应用

通过面向集成无服务器 API 的静态内容托管和动态缩放的托管全局可用性，加快应用开发。通过定制的本地开发体验、生成和部署应用的 CI/CD 工作流以及云中的统一托管和管理来提高工作效率。

全局托管

通过自动内容地理分布使你的内容更靠近客户。

API 函数

使用由 Azure Functions 提供支持的集成无服务器 API 扩充应用。

简化的生成和部署

使用一流的 GitHub 集成（其中存储库更改将触发生成和部署）等选项快速从代码转至云。

无缝过渡环境

基于拉取请求生成应用的暂存版本，以在发布前预览更改。

无缝开发人员体验和 CI/CD

通过定制的开发人员体验来提高工作效率，其中包括用于本地开发的 Visual Studio Code 扩展、完整存储库分析和用于 CI/CD 的本机 GitHub 工作流。

Visual Studio Code 入门
无缝开发人员体验和 CI/CD

全球分发和动态扩展

通过完全托管的静态内容的全球分布，更快地进行缩放。将托管 Azure Front Door 添加到静态 Web 应用，以便通过边缘负载均衡、SSL 卸载和应用程序加速显著减少延迟并提高全球用户的吞吐量。使用 Azure Functions 以首选语言（JavaScript、TypeScript、Python 或 C#）构建高度可扩展的无服务器 API。

使用 Azure Front Door 启用企业级边缘

使用给你自己的语言和框架

Static Web Apps 自动生成并部署数十个前端框架。

查看支持的框架

全面的安全性和合规性，内置于

Azure 中的安全中心概述，其中显示了策略与合规性数据以及资源安全机制
Azure 中的安全中心计算和应用选项卡，其中显示了建议列表

开始使用 Azure 免费帐户

1

免费开始使用。获取有效期 30 天的 USD200 额度。拥有额度后，可以免费使用很多热门服务，以及超过 55 项永久免费的服务。

2

用完额度后，请改为即付即用定价以继续使用相同的免费服务构建自己的内容。只需为超出每月免费使用量以外的部分付费。

3

12 个月后，你可以继续使用超过 55 种永久免费的服务，并且仍只需为超出每月免费金额的部分付费。

有关静态 Web 应用的常见问题解答

  • 静态 Web 应用支持 JavaScript 和 TypeScript 前端应用，包括使用 Vue.js、React、Angular 等常用框架开发的应用。

  • 静态 Web 应用支持 JavaScript、TypeScript、Python 和 C# Azure Functions 应用。

  • 利用适用于静态 Web 应用的 Visual Studio Code 扩展。请参阅 aka.ms/savscode 以开始使用。

  • 将静态 Web 应用指向 GitHub 存储库。请参阅 aka.ms/saquickstart 以开始使用。

准备就绪后，即可开始设置 Azure 免费帐户

免费试用 Azure
#chatEngagement { color: #fff; background-color: #006abb; border: 1px solid #0078d4; border-radius: 4px; display: inline-block; font-size: 14px; font-weight: 600; padding: 10px 16px; } #chatEngagement:hover, #chatEngagement:active { text-decoration: underline; } #chatDisengagement { color: #0062ad; display: inline-block; font-size: 14px; font-weight: 600; padding-right: 1em; position: relative; text-decoration: none; border: none; background-color: transparent; } #chatEngagement:focus { outline: 1px solid #fff; outline-offset: -4px; text-decoration: underline; } #chatDisengagement:after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 1L9 6L4 11' stroke='%230062ad'/%3E%3C/svg%3E"); content: ' '; height: 12px; width: 12px; display: inline-flex; vertical-align: middle; margin-left: .2em; transition: all .2s ease-in-out; position: absolute; bottom: -6px; background-color: transparent; } #chatDisengagement:focus { outline-offset: 10px; } #lp-iframe-container { border: 0; bottom: 0; box-shadow: 0 5px 15px 0 #00000033; height: 500px; left: auto !important; min-width: 300px; max-width: 350px; padding: 0; position: fixed; right: 0; top: auto !important; z-index: 1031; } #iFrame { height: 100%; width: 100%; border: 0; } #proactive-chat-dialog { position: fixed; z-index: 10400; bottom: -24px; right: 11px; } #proactive-chat-dialog .chatContainer { min-width: 272px; height: 277px; color: #000; line-height: 0; position: relative; border: 0 !important; background-repeat: no-repeat !important; background-color: #fff !important; margin: auto; padding: 12px; background-size: contain !important; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); } #proactive-chat-dialog .chatContainer .chat-cta { text-align: center; font-size: 24px; font-weight: 600; position: relative; top: 160px; } #proactive-chat-dialog .chatContainer .chat-buttons { position: relative; top: 185px; width: 100%; display: flex; gap: 1em; justify-content: center; flex-direction: column; } #proactive-chat-dialog .chatContainer .chat-buttons .arrow-link { width: auto; margin: auto; } #proactive-chat-dialog .chatContainer .chat-buttons .arrow-link:after { bottom: -6px; } @media only screen and (min-width: 33.75em) { #proactive-chat-dialog .chatContainer .chat-buttons { top: 200px; flex-direction: row; } } </style> <div id="proactive-chat-dialog" class="proactive-chat-hidden"> <div class="chatContainer" style="background: url('{{module.bg-img-src}}') no-repeat top left" > <div class="chat-cta">{{module.heading}}</div> <div class="chat-buttons"> <button type="button" id="chatEngagement" aria-label="{{chat-engagement.aria-label}}" class="button button--primary01 lp-chatnow" data-lp-event="click" data-bi-id="expand-chat" data-bi-an="chat" data-bi-chtid="azure chat 1" data-bi-chtnm="live person proactive chat" data-bi-bhvr="16" data-bi-tn="button button--primary01 lp-chatnow" > {{chat-engagement.btn-txt}} </button> <button type="button" id="chatDisengagement" aria-label="{{chat-disengagement.aria-label}}" class="arrow-link lp-nothanks" data-lp-event="close" data-bi-id="collapse-chat" data-bi-an="chat" data-bi-chtid="azure chat 1" data-bi-chtnm="live person proactive chat" data-bi-tn="arrow-link lp-nothanks" > {{chat-disengagement.btn-txt}} </button> </div> </div> </div> '/>