练习 - 创建 Azure 静态 Web 应用

  • 5 分钟

在本练习中，你将创建一个 Azure 静态 Web 应用实例，其中包含将自动生成并发布你的应用程序的 GitHub 操作。

创建静态 Web 应用

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

安装适用于 Visual Studio Code 的 Azure Static Web Apps 扩展

  1. 转到 Visual Studio 市场，并安装适用于 Visual Studio Code 的 Azure 静态 Web 应用 扩展。

  2. 在 Visual Studio Code 中的扩展选项卡加载后，选择“安装”按钮。

  3. 安装完成后，如果系统提示，请选择“重启”以更新。

在 Visual Studio Code 中登录到 Azure

  1. 在 Visual Studio Code 中，选择“视图”“命令面板”并输入“Azure: 登录”来登录 Azure>。

  2. 按照提示复制并粘贴 Web 浏览器中提供的代码，该代码会对 Visual Studio Code 会话进行身份验证。

选择订阅

  1. 打开 Visual Studio Code，选择“文件”>“打开”，在编辑器中打开克隆到计算机的存储库。

  2. 通过打开命令面板并输入 Azure: Select Subscriptions并按 Enter，验证是否已登录到首选的 Azure 订阅。

  3. 选择订阅（旁边应显示复选标记），然后单击“ 确定”。

创建静态 Web 应用

  1. 打开 Visual Studio Code，选择“文件”>“打开”，在编辑器中打开克隆到计算机的存储库>。

  2. 在 Visual Studio Code 中，选择活动栏中的 Azure 徽标以打开 Azure 扩展窗口。

    VS Code 中 Azure 徽标的屏幕截图。

    注意

    必须登录到 Azure 和 GitHub。 如果尚未从 Visual Studio Code 登录到 Azure 和 GitHub，该扩展将在创建过程中提示你登录到这两个站点。

  3. 将鼠标悬停在“Static Web Apps”标题上，右键单击，然后选择“创建静态 Web 应用”。

    显示创建 Web 应用的位置的屏幕截图。

  4. 输入 my-first-static-web-app，然后按 Enter。

    显示如何创建静态 Web 应用的屏幕截图。

  5. 选择 你的位置 ，然后按 Enter。

    显示如何选择订阅的屏幕截图。

  1. 选择 Angular 选项，然后按 Enter。

    显示所选 angular 选项的屏幕截图。

  2. 输入 /angular-app 作为应用程序代码的位置，然后按 Enter。

    显示作为 Angular 应用输入的代码位置的屏幕截图。

  3. 输入 dist/angular-app 作为生成文件的生成输出位置，以便在应用中生成文件，然后按 Enter。

    显示如何输入 Angular 的生成输出位置的屏幕截图。

  1. 选择 React 选项，然后按 Enter。

    显示已选择“react”选项的屏幕截图。

  2. 输入 /react-app 作为应用程序代码的位置，然后按 Enter。

    显示作为 react 应用输入的代码位置的屏幕截图。

  3. 输入 build 作为你的应用中生产环境文件的生成输出位置，然后按 Enter。

    屏幕截图显示如何输入 React 的构建输出位置。

  1. 选择 Svelte 选项，然后按 Enter。

    显示所选 svelte 选项的屏幕截图。

  2. 输入 /svelte-app 作为应用程序代码的位置，然后按 Enter。

    显示作为 Svelte 应用输入的代码位置的屏幕截图。

  3. 输入 public 作为应用生成文件的输出位置，然后按 Enter 键。

    显示如何输入 Svelte 的生成输出位置的屏幕截图。

  1. 选择 Vue 选项，然后按 Enter。

    屏幕截图显示已选中 vue 选项。

  2. 输入 /vue-app 作为应用程序代码的位置，然后按 Enter。

    显示作为 Vue 应用输入的代码位置的屏幕截图。

  3. 输入 dist 作为应用中生产构建文件的输出位置，然后按 Enter。

    屏幕截图，显示如何输入 Vue 的构建输出位置

注意

你的存储库与过去可能使用过的存储库稍有不同。 它在四个不同的文件夹中包含四个不同的应用。 每个文件夹都包含在不同 JavaScript 框架中创建的应用。 通常，你在存储库的根中有一个应用，并对应用路径位置指定 /。 这是一个很好的示例，可说明为何 Azure 静态 Web 应用允许你首先配置位置 - 你可完全控制应用的生成方式。

  1. 创建应用后，将在 Visual Studio Code 中显示确认通知。

    确认代码的屏幕截图，要求用户在 GitHub 中打开动作或查看/编辑配置。

  2. 可以使用 GitHub Actions 展开“操作”菜单来查看部署进度。

    显示如何通过 GitHub Actions 检查进度的屏幕截图。

    部署完成后，可直接导航至你的网站。

  3. 若要在浏览器中查看网站，请右键单击 Static Web Apps 扩展中的项目，然后选择“浏览站点”。

    显示如何浏览到静态 Web 应用网站的屏幕截图。

恭喜！ 你已将第一个应用部署到 Azure 静态 Web 应用！

注意

如果看到显示应用尚未生成和部署的网页，请不要担心。 在一分钟后刷新浏览器。 创建 Azure 静态 Web 应用时，GitHub 操作会自动运行。 如果看到初始页面，则应用仍在进行部署。