静态 Web 应用 - 初探

让我们从一个你们很多人都熟悉的故事开始……你正在构建一个 Web 应用。你选择了你最喜欢的框架。可能是 React、Angular、Vue，甚至是 Svelte。你的公司希望部署这个 Web 应用并覆盖数百万用户。

因此，你开始列出所有需要做的事情的清单：

是/否	你需要什么
是的	开发你的应用
是的	GitHub 中的代码
？	创建暂存站点的拉取请求
？	CI/CD 构建和部署应用程序
？	可扩展的 API
？	反向代理将应用程序连接到 API
？	SSL 证书
？	自定义域
？	验证
？	授权
？	服务器端路由控制
？	静态网络资产的全球规模

哇，你只是想构建你的应用程序！

如果您可以依靠一项服务来提供所有这些功能，那会怎样？

你不需要搭建多个服务器和管道来处理这些问题，而是开始寻找一个“能用”的服务。把这个服务指向你的应用，然后就可以使用了。

您可以访问文档了解更多信息。或者，您也可以立即在 Microsoft Learn 上尝试我们的实践教程！

Azure 静态 Web 应用

Azure 静态 Web 应用 (SWA) 在 Microsoft Build 大会上发布，将您的源代码推向全球。您可以自行开发应用，而 Azure 静态 Web 应用则会自动构建和托管它。

静态 Web 应用通常使用 Angular、React、Svelte 或 Vue 等库和框架构建。这些应用包含构成应用程序的 HTML、CSS、JavaScript 和图像资源。在传统的 Web 服务器架构下，这些文件与任何所需的 API 端点一起由单个服务器提供。SWA 可帮助您将静态资源托管在优化的服务器中，并使其在全球多个服务器上可用。SWA 还可以选择使用 Azure Functions 托管您的 API。然后，它会设置一个供用户访问的 URL。

您将获得上面清单中的所有内容！

入门

第一步是创建一个应用程序！

如果您需要试用此服务，请按照以下步骤操作。如果您有自己的应用程序，则可以完全跳过这些步骤，直接进入下一部分。

点击https://github.com/johnpapa/shopathome/generate创建一个新 repo
给你的 repo 命名并创建 repo
单击.github/workflowsGitHub 网页界面中的文件夹
单击带有图案的文件azure-static-web-apps.****.yml
删除此文件

删除工作流文件很重要，因为您很快就会创建自己的工作流文件！

现在你有四个应用程序了！这是一个 monorepo，包含用 Angular、React、Svelte 和 Vue 编写的同一个应用程序，每个应用程序都位于各自的文件夹中。

启动代码包括四个应用程序和您将使用的 API 的起点。

├ angular-app  👈 The Angular client app
├ api          👈 The API (Azure Functions)
├ react-app    👈 The React client app
├ svelte-app   👈 The Svelte client app
└ vue-app      👈 The Vue client app

免费 Azure 试用

接下来，你需要一个 Azure 帐户。如果你没有，不用担心，可以使用 Azure 的免费试用版。我之前说过它是免费的吗？很好，因为它就是免费的。

在此获取免费试用版

转到 Azure 门户

因此，您有了代码和 Azure 帐户，现在您可以为您的应用创建 SWA 资源！

点击此处前往Azure 门户
选择 Azure 订阅Select your Azure subscription
创建一个资源组（这就像一个文件夹，用于收集所有 Azure“内容”）
为您的 SWA 命名（例如：shopathome-sample）
选择离您最近的地区
使用 GitHub 登录
选择你的 GitHub 组织
选择您的 GitHub 存储库（例如：shopathome）
选择你的分支（例如：main）

设置文件夹位置
将您的应用程序位置设置为您喜欢的 JavaScript 框架
- 角度 -角度应用
- React - react-app
- Svelte - svelte-app
- Vue- vue-app
将Api 位置设置为api
根据您选择的框架，将App 工件位置设置为以下之一：
- Angular - dist/angular-app
- React -构建
- Svelte -公共
- Vue- dist
单击“查看 + 创建”按钮
点击创建按钮

前往您的网站

Azure 正在创建您的资源。SWA 将创建一个 GitHub Action 工作流文件，并将其提交到您存储库的.github/workflows文件夹中。此文件将监视您选择的分支的更改。当您将更改推送到该分支时，它们将触发 GitHub Action 工作流来构建您的应用并将其部署到 SWA！