Azure Static Web Apps
综合介绍
Azure Static Web Apps是微软推出的静态网站托管服务。它专门用于部署现代Web应用程序。这个服务能自动构建和部署静态内容。它还与GitHub等代码仓库深度集成。
开发者推送代码到仓库时，服务会自动开始部署流程。它支持流行的前端框架，包括React、Vue和Angular。服务还提供全球内容分发网络加速。这让用户能快速访问网站。
除了静态内容，它还支持服务器端API。这些API通过Azure Functions实现。开发者可以构建完整的全栈应用程序。
功能列表
- "自动构建和部署：连接代码仓库后，每次推送自动触发部署流程"
- 全球CDN加速：静态内容通过微软全球网络分发，提升访问速度
- 自定义域名支持：可以绑定自己的域名并自动配置SSL证书
- 预览环境：每个拉取请求都会生成独立的预览网站
- 身份认证集成：内置身份验证和授权功能，支持多种登录方式
- API集成：无缝集成Azure Functions，支持服务器端功能
- 环境管理：支持生产、预生产和多个测试环境
使用帮助
开始使用
首先需要准备一个静态网站项目。这个项目可以是用任何前端框架构建的。还需要一个GitHub账户。代码必须托管在GitHub仓库中。
创建资源
登录Azure门户。在搜索框中输入Static Web Apps。点击创建按钮开始配置。需要选择订阅和资源组。如果没有资源组，可以新建一个。
项目配置
在项目详细信息部分，输入Web应用的名称。这个名称会成为默认域名的一部分。选择最靠近用户的地域。这样能保证最佳性能。
源代码设置
点击"使用GitHub登录"按钮。授权Azure访问GitHub账户。选择包含静态网站代码的仓库。选择合适的分支，通常是main或master。
构建配置
根据项目类型选择构建预设。如果是React项目，选择React。Vue项目选择Vue。自定义项目选择Custom。需要指定应用代码的位置。通常是根目录。
对于API，需要指定API代码的路径。如果使用Azure Functions，这里填写api文件夹路径。输出位置填写构建后文件的路径。一般是build或dist文件夹。
部署流程
完成配置后点击查看和创建。确认信息无误后点击创建。Azure开始创建静态Web应用资源。这个过程需要几分钟时间。
创建完成后，Azure会自动触发第一次构建。可以在GitHub仓库的Actions页面查看构建进度。构建成功后，网站就可以通过提供的URL访问了。
自定义域名
在Static Web App资源中，找到自定义域名选项。点击添加按钮输入你的域名。需要验证域名所有权。按照提示在DNS中添加TXT记录完成验证。
验证通过后，配置CNAME记录指向Azure提供的域名。SSL证书会自动申请和配置。整个过程可能需要几小时完成。
环境管理
每个拉取请求都会生成预览环境。这让你可以在合并前测试变更。生产环境对应主分支。还可以配置预生产环境用于最终测试。
API开发
在项目根目录创建api文件夹。在这个文件夹中创建Azure Functions。支持JavaScript、TypeScript、C#和Python。函数会自动部署并与前端集成。
前端代码通过相对路径访问API。不需要配置复杂的CORS规则。开发体验更加流畅。
产品特色
全自动的CI/CD流水线，让开发者专注于代码编写。
适用人群
- 前端开发者：需要快速部署静态网站和单页面应用
- 全栈开发者：需要集成前后端功能的完整解决方案
- 初创团队：希望快速上线产品且控制成本
- 企业团队：需要可靠的托管服务和自动化部署流程
应用场景
- 公司官网：展示企业信息的静态网站，需要高可用性和快速访问
- 产品文档：技术文档网站，需要版本管理和多环境部署
- 博客系统：基于静态站点生成器的博客，需要自动化构建和部署
- Web应用：包含前后端功能的完整应用程序，需要一体化解决方案
- 原型演示：产品原型和概念验证，需要快速迭代和分享
常见问题
- 这个服务支持哪些前端框架？
支持所有主流前端框架，包括React、Vue、Angular、Svelte等，也支持静态站点生成器如Gatsby、Next.js、Hugo、Jekyll - 如何配置自定义域名？
在Azure门户的Static Web App资源中，找到自定义域名选项，添加域名后按照指引配置DNS记录，SSL证书会自动配置 - 是否支持环境变量？
支持在构建配置中设置环境变量，这些变量在构建过程中可用，但不会暴露给客户端 - 如何实现身份验证？
内置身份验证功能，支持Azure Active Directory、GitHub、Twitter、Google等多种登录方式，无需额外配置 - 是否有免费套餐？
提供免费层级，包含每月100GB带宽和无限次构建，适合个人项目和小型应用
