你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

快速入门：在 Azure 门户中构建你的第一个静态站点

Azure Static Web Apps 通过从 GitHub 存储库生成应用来将网站发布到生产环境。 在此快速入门中，你会使用 Azure 门户将 Web 应用部署到 Azure Static Web Apps。

先决条件

• 如果没有 Azure 订阅，请创建一个免费的试用帐户。
• GitHub 帐户
• Azure 帐户

创建存储库

本文使用 GitHub 模板存储库，使你能够轻松入门。 该模板具有一个入门应用，你可以使用 Azure Static Web Apps 部署它。

无框架

1. 导航到以下位置以创建新存储库：
   1. https://github.com/staticwebdev/vanilla-basic/generate
2. 将存储库命名为 my-first-static-web-app

注意

Azure 静态 Web 应用需要至少一个 HTML 文件来创建 Web 应用。 在此步骤中创建的存储库包括单个 index.html 文件。

Angular

1. 导航到以下位置以创建新存储库：
   1. https://github.com/staticwebdev/angular-basic/generate
2. 将存储库命名为 my-first-static-web-app

Blazor

1. 导航到以下位置以创建新存储库：
   1. https://github.com/staticwebdev/blazor-basic/generate
2. 将存储库命名为 my-first-static-web-app

React

1. 导航到以下位置以创建新存储库：
   1. https://github.com/staticwebdev/react-basic/generate
2. 将存储库命名为 my-first-static-web-app

Vue

1. 导航到以下位置以创建新存储库：
   1. https://github.com/staticwebdev/vue-basic/generate
2. 将存储库命名为 my-first-static-web-app

选择“从模板创建存储库”。

创建静态 Web 应用

现在，已经创建了存储库，可以从 Azure 门户创建静态 Web 应用。

1. 导航到 Azure 门户。
2. 选择“创建资源”。
3. 搜索“静态 Web 应用”。
4. 选择“静态 Web 应用”。
5. 选择“创建”。

在“基本信息”部分中，首先配置新应用，并将其链接到 GitHub 存储库。

1. 选择 Azure 订阅。
2. 在“资源组”旁边，选择“新建”链接。
3. 在文本框中输入“static-web-apps-test”。
4. 在“静态 Web 应用详细信息”下的文本框中，输入“my-first-static-web-app”。
5. 在“Azure Functions 和过渡详细信息”下，选择离你最近的区域。
6. 在“部署详细信息”下，选择“GitHub”。
7. 选择“使用 GitHub 登录”按钮，然后向 GitHub 进行身份验证。

登录 GitHub 后，输入存储库信息。

1. 选择首选的组织名称。

2. 在“存储库”下拉列表中选择“my-first-web-static-app”。

3. 在“分支”下拉列表中选择“main”。

   注意

   如果看不到任何存储库，则可能需要在 GitHub 中授权 Azure Static Web Apps。 浏览到 GitHub 存储库，转到“设置”>“应用程序”>“授权 OAuth 应用”，选择“Azure Static Web Apps”，然后选择“授予”。 对于组织存储库，你必须是组织的所有者才能授予权限。

4. 在“生成详细信息”部分中，添加特定于首选前端框架的配置详细信息。

   无框架

   1. 在“生成预设”下拉列表中选择“自定义”。
   2. 在“应用位置”框中键入 ./src。
   3. 将“API 位置”框留空。
   4. 在“应用项目位置”框中键入“./src”。

   Angular

   1. 从“生成预设”下拉列表中选择“Angular”。
   2. 保留“应用位置”框中的默认值。
   3. 将“API 位置”框留空。
   4. 在“应用项目位置”框中键入 dist/angular-basic。

   Blazor

   1. 从“生成预设”下拉列表中选择“Blazor”。
   2. 保留“应用位置”框中“客户端”的默认值。
   3. 将“API 位置”框留空。
   4. 保留“应用项目位置”框中“wwwroot”的默认值 。

   React

   1. 从“生成预设”下拉列表中选择“React”。
   2. 保留“应用位置”框中的默认值。
   3. 将“API 位置”框留空。
   4. 在“应用项目位置”框中键入 build。

   Vue

   1. 从“生成预设”下拉列表中选择“Vue.js”。
   2. 保留“应用位置”框中的默认值。
   3. 将“API 位置”框留空。
   4. 保留“应用项目位置”框中的默认值。

5. 选择“查看 + 创建”。

   

   注意

   若要在创建应用后更改这些值，可编辑工作流文件。

6. 选择“创建”。

   

7. 选择“转到资源”。

   

查看网站

通过两个方面来部署静态应用。 第一个预配构成应用的基础 Azure 资源。 第二个是生成和发布应用程序的 GitHub Actions 工作流。

在导航到新静态站点之前，必须先完成部署生成的运行。

静态 Web 应用“概述”窗口显示了一系列链接，可帮助你与 Web 应用进行交互。

1. 单击“单击此处以查看 GitHub Actions 运行的状态”的标题，即可转到针对存储库运行的 GitHub Actions。 确认部署作业完成后，即可通过生成的 URL 导航到网站。

2. GitHub Actions 工作流完成后，可以单击该 URL 链接以在新选项卡中打开网站。

清理资源

如果不打算继续使用此应用程序，可按以下步骤删除 Azure 静态 Web 应用实例：

1. 打开 Azure 门户。
2. 在顶部搜索栏中搜索“my-first-web-static-app”。
3. 选择应用名称。
4. 选择“删除”按钮。
5. 选择“是”以确认删除操作（此操作的完成可能需要一些时间）。

后续步骤

添加 API