练习 - 入门

  • 7 分钟

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

本模块使用 Azure 沙盒提供免费的临时 Azure 订阅，可供你用于完成练习。 继续之前，请确保已在本页顶部激活了沙盒。

提示

如果遇到节点依赖项问题，请确保 已安装 Node Version Manager ，并可以切换到早期版本。

创建存储库

接下来，使用 GitHub 模板存储库创建新存储库。 有一系列模板可用，其中每个模板都包含使用不同前端框架生成的起始应用。

  1. 转到模板存储库的 “从模板创建”页 。

    • 如果收到 404 找不到页面错误，请登录到 GitHub，然后重试。

  2. 如果系统提示输入“所有者”，请选择你的一个 GitHub 帐户。

  3. 将存储库命名为 my-static-web-app-authn。

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

在本地克隆应用

你刚才在 GitHub 帐户中创建了一个名为“my-static-web-app-authn” 的 GitHub 存储库。 接下来，将在计算机上克隆该存储库，并在本地运行代码。

  1. 在计算机上打开一个终端。

  2. 首先，将 GitHub 存储库克隆到计算机。

    git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-authn

  3. 转到源代码的文件夹。

    cd my-static-web-app-authn

在本地配置 CORS

发布到 Azure Static Web Apps 时，无需担心跨域资源共享 (CORS)。 Azure 静态 Web 应用会自动配置应用，使它可以使用反向代理与 Azure 上的 API 进行通信。 但在本地运行时，需要配置 CORS 以允许 Web 应用和 API 进行通信。

现在，指示 Azure Functions 允许 Web 应用在计算机上对 API 进行 HTTP 请求。

  1. 创建名为 api/local.settings.json 的文件。

  2. 将以下内容添加到该文件：

    {
  "Host": {
    "CORS": "http://localhost:4200"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:3000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:5000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:8080"
  }
}

注意

local.settings.json 文件会在 .gitignore 文件中列出，可防止此文件发布到 GitHub。 这是因为你可以在此文件中存储机密，而你不希望在 GitHub 中存储该内容。 这便是为何在从模板创建存储库时，必须创建该文件。

运行 API

api 文件夹包含 Azure Functions 项目以及 Web 应用的 HTTP 终结点。 首先执行以下步骤，在本地运行 API：

注意

请务必安装 Azure Functions Core Tools ，以便在本地运行 Azure Functions。

  1. 在 Visual Studio Code 中，按 F1 打开命令面板。

  2. 输入并选择“终端: 创建新的集成终端”。

  3. 转到 api 文件夹：

    cd api

  4. 在本地运行 Azure Functions 应用：

    func start

运行 Web 应用

  1. 接下来，转到首选前端框架的文件夹，如下所示：

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  2. 现在安装应用程序依赖项。

    npm install

  3. 最后，运行前端客户端应用程序。

    npm start

    npm start

    npm run dev

    npm run serve

浏览到你的应用

可看到应用程序在本地运行。 每个前端应用程序在不同的端口上运行。

  1. 选择链接可浏览到你的应用程序。

  1. 浏览到 http://localhost:4200。

    显示 Angular Web 应用的 UI 的屏幕截图。

  1. 浏览到 http://localhost:3000。

    显示 React Web 应用的 UI 的屏幕截图。

  1. 浏览到 http://localhost:5000。

    屏幕截图显示 Svelte Web 应用的 UI。

  1. 浏览到 http://localhost:8080。

    显示您 Vue Web应用程序界面的屏幕截图。

应用应显示产品列表。

  1. 现在，通过在终端中按 Ctrl-C 停止正在运行的应用。

你生成了应用程序，现在它在浏览器中本地运行。

接下来，你会将应用程序发布到 Azure 静态 Web 应用。

创建静态 Web 应用

现在已创建了 GitHub 存储库，可以使用适用于 Visual Studio Code 的 Azure Static Web Apps 扩展创建 Static Web Apps 实例。

安装适用于 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。

    重要

    使用创建沙盒时所用的帐户登录到 Azure。 沙盒提供了 Concierge 订阅的访问权限。

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

选择订阅

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

  2. 通过打开命令面板 F1，输入 ，并按 Enter，验证是否已将 Azure 订阅筛选为包含 Concierge 订阅Azure: Select Subscriptions。

  3. 选择“Concierge 订阅”，然后按 Enter。

    显示如何按订阅进行筛选的屏幕截图。

使用 Visual Studio Code 创建静态 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 标签上，然后选择 （加号）。

    显示键入的应用程序名称的屏幕截图。

  4. 命令面板在编辑器顶部打开时，选择 “Concierge 订阅”，然后按 Enter。

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

  5. 输入 my-static-web-app-authn，然后按 Enter。

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

  6. 选择离你最近的区域，然后按 Enter。

    显示位置选择的屏幕截图。

  7. 选择相应的框架选项，然后按 Enter。

  1. 选择 angular-app 作为应用程序代码的位置，然后按 Enter。

    显示 Angular 应用程序代码位置的屏幕截图。

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

    显示 Angular 应用文件路径的屏幕截图。

  1. 选择 react-app 作为应用程序代码的位置，然后按 Enter。

    显示 React 应用程序代码位置的屏幕截图。

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

    显示 React 应用文件路径的屏幕截图。

  1. 选择 svelte-app 作为应用程序代码的位置，然后按 Enter。

    显示 Svelte 应用程序代码位置的屏幕截图。

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

    显示 Svelte 应用文件路径的屏幕截图。

  1. 选择 vue-app 作为应用程序代码的位置，然后按 Enter。

    显示 Vue 应用程序代码位置的屏幕截图。

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

    显示 Vue 应用文件路径的屏幕截图。

注意

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

  1. 创建应用后，Visual Studio Code 中将出现确认通知。

    显示 GitHub 中的“打开操作”或“查看/编辑配置”弹出窗口的屏幕截图。

在部署过程中，Visual Studio Code 扩展会向你报告生成状态。

:::image type="content" source="../media/extension-waiting-for-deployment.png" alt-text="Screenshot showing the waiting for deployment button.":::

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

    显示 VS Code 中 GitHub Actions 菜单的屏幕截图。

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

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

    显示浏览网站按钮的屏幕截图。

祝贺你！ 你已将应用部署到 Azure Static Web Apps！

注意

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

从 GitHub 拉取更改

从 GitHub 拉取最新更改以关闭由 Azure Static Web Apps 创建的工作流文件：

  1. 按 F1 打开命令面板。

  2. 输入并选择“Git:拉取”，然后按 Enter 键。

后续步骤

接下来，你将学习如何将用户身份验证集成到应用中。