Azure 静态网站一键部署！微软官方 Skill 让 AI 编程助手直接接管 SWA CLI

你本地跑的前端项目，想一键部署到全球边缘节点、带上免费 HTTPS 和 serverless API？微软官方出了个新玩具——Azure Static Web Apps 的 Skill，支持直接在 Claude Code、Cursor、GitHub Copilot 里调 SWA CLI，从本地开发到线上部署全程不用切工具。

这 Skill 干了什么

简单说，它把 Azure Static Web Apps 的整个开发和部署流程封装成了一个可被 AI 编程助手理解的 Skill。你说”帮我部署到 Azure 静态网站”，它就知道该调哪条命令、该配什么文件，而不是给你一堆文档链接让你自己看。

核心功能就三块：

• 本地模拟器：swa start 起一个完整的本地开发服务器，连 API 代理和 Auth 模拟都给你配好
• 一键部署：swa deploy 直接推到 Azure 全球边缘网络
• GitHub Actions CI/CD：配置好之后每次 push 自动部署，不用你管

怎么用

第一步先装 SWA CLI：

npm install -D @azure/static-web-apps-cli

然后记住一个核心原则：永远用 swa init 来生成配置文件，不要手写 swa-cli.config.json。这个命令会自动检测你的前端框架（React/Vue/Next.js/Angular/Vite），生成对应配置，你只需要跑一条命令：

swa init --yes  # 接受所有自动检测的默认值

之后本地开发跑 swa start，部署前先 swa login 认证 Azure 账号，最后 swa deploy 完成上线。整个流程不需要打开 Azure 门户，不需要记住任何 subscription ID 或者 resource group 名。

staticwebapp.config.json 是关键

这个文件决定了你站点上线后的路由规则、权限控制和 API 运行时环境。比如指定 /api/* 路径需要登录认证：

{
  "routes": [
    { "route": "/api/*", "allowedRoles": ["authenticated"] }
  ],
  "platform": {
    "apiRuntime": "node:20"
  }
}

Skill 会指导 AI 正确配置这些字段，而不是乱写一气。

GitHub Actions 自动部署怎么配

如果你想 push 到 main 就自动上线，只需要配置好 swa-cli.config.json，然后 GitHub Actions 会自动触发构建和部署。Skill 里内置了完整的命令参考，包括所有 flags 的说明，AI 助手能理解什么场景该用什么参数。

适合什么场景

静态博客、公司官网、小程序 H5、Vue/React 做的管理后台这些场景，Azure Static Web Apps 全部免费，而且送全球 CDN 和 HTTPS。如果你用 Next.js 做 SSG，官方直接支持，部署上去就是生产级的。

之前得在终端里查文档、配门户、记 CLI 参数，现在直接跟 AI 助手说”帮我把这个 Vue 项目部署到 Azure SWA”，Skill 替你搞定剩下的。

GitHub 地址在这里 →

GitHub: https://github.com/suyask-msft/awesome-copilot/tree/main/skills/azure-static-web-apps