练习 - 入门指南

  • 7 分钟

在本练习中，你将创建一个 Azure 静态 Web 应用实例，包括自动生成和发布网站的 GitHub Action。

本模块使用通过沙盒提供的资源，该沙盒提供对 Azure 订阅的免费临时访问权限，以及完成练习所需的资源。 请确保在此页顶部激活沙盒。 完成本模块中的练习时，每个单元都取决于你在上一个练习中创建的内容。 因此，请选择一个 JavaScript 框架并将其用于所有后续练习。

创建存储库

首先，使用 GitHub 模板创建存储库。 提供了一系列存储库模板，其中包含在各种前端框架中实现的初学者应用。

  1. 转到 GitHub“从模板创建”页。

  2. 如果系统提示“ 所有者”，请选择其中一个 GitHub 帐户。

  3. 对于 存储库名称，请输入 my-static-web-app-and-api。

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

    从模板创建项目时，GitHub 会在后台生成存储库。

在本地运行应用

现在，GitHub 帐户中有一个名为 my-static-web-app-and-api 的 GitHub 存储库。 接下来，克隆 GitHub 存储库并在计算机上本地运行代码。

  1. 在计算机上打开终端窗口。

    如果你使用的是 Windows，则可以在系统托盘搜索框中输入 cmd 。

  2. 要将存储库克隆到计算机，请将以下代码粘贴到命令提示符窗口中。

    确保将 <YOUR_GITHUB_USERNAME> 替换为你的 GitHub 用户名。

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

    注释

    如果在复制到命令提示符终端时遇到问题，请右键单击标题栏中的图标，然后在“ 属性 ”选项卡中，确保选中“ 复制/粘贴”时使用 Ctrl+Shift+C/V 。

  3. 切换到你克隆的源代码所在的目录。

    cd my-static-web-app-and-api

  4. 转到首选前端框架的目录。

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  5. 安装应用程序依赖项。

    npm install

  6. 使用以下命令确保安装了每个依赖项的最新版本。

    npm audit fix

  7. 运行前端客户端应用程序。

    npm start

    npm start

    npm run dev

    npm run serve

浏览到你的应用

生成并编译应用程序捆绑包后，浏览器选项卡会自动打开以显示在本地运行的应用程序。

angular 的本地主机为 http://localhost:4200.

Angular Web 应用的本地主机的屏幕截图。

用于 react 的本地主机为 http://localhost:3000.

React Web 应用的本地主机的屏幕截图。

svelte 的本地主机是 http://localhost:5000。

Svelte Web 应用的本地主机的屏幕截图。

Vue 的本地主机为 http://localhost:8080.

Vue Web 应用的本地主机的屏幕截图。

应用应显示“正在加载数据...”，因为尚无数据或 API。 在本课的后面部分，你将为 Web 应用添加 API。

在终端中，按 Ctrl+C 停止批处理作业。

祝贺！ 你生成了应用程序，并在浏览器中看到它在本地运行。 接下来，可以将应用程序发布到 Azure 静态 Web 应用。

创建静态 Web 应用

你创建了自己的 GitHub 存储库。 现在，可以使用适用于 Visual Studio Code 的 Azure 静态 Web 应用扩展创建自己的静态 Web 应用。

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

  1. 打开 Visual Studio Code。

  2. 在顶部菜单中，选择 “视图>扩展”，然后在搜索框中输入 Azure 静态 Web 应用 。

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

打开应用程序文件夹

  1. 选择 F1 打开 Visual Studio Code 命令面板。

  2. 输入 文件：打开文件夹...。

  3. 选择 my-static-web-app-and-api 文件夹。

  4. 选择 “打开 ”以在 Visual Studio Code 中打开文件夹。

在 Visual Studio Code 中登录到 Azure

  1. 选择 F1 打开 Visual Studio Code 命令面板。

  2. 输入 Azure：登录 并按照提示进行身份验证。

    重要

    请确保使用用于激活浏览器内沙盒的同一帐户登录到 Azure。 使用同一帐户可让 Concierge 订阅可用，这样就可以在本教程中访问免费的 Azure 资源。

选择订阅

  1. 选择 F1 打开 Visual Studio Code 命令面板。

  2. 输入 Azure：选择订阅，并清除 除 Concierge 订阅以外的所有选择。

    显示已选择“Concierge 订阅”的屏幕截图。

提交更改

安装应用程序依赖项时，项目中的某些文件已在过程中更新。 若要继续，需要将这些更改提交到存储库。

  1. 选择 F1 打开 Visual Studio Code 命令面板。

  2. 输入并选择“Git 全部提交”。

  3. 在文件顶部输入“初始提交”。

  4. 保存并关闭 git 提交文件。

    目前不要担心将更改与服务器同步。 发布静态 Web 应用时，更新将复制到 GitHub。

创建静态 Web 应用

创建静态 Web 应用需要当前已经过身份验证的 Azure 和 GitHub 会话。 如果尚未登录到这两个提供程序，扩展会提示你在创建过程中登录。

  1. 选择 F1 打开 Visual Studio Code 命令面板。

  1. 输入并选择 “Azure 静态 Web 应用：创建静态 Web 应用...”。

    为命令面板提示的其余部分输入以下值。

    提示 价值
    订阅 选择“Concierge 订阅”
    名称 输入“my-static-web-app-and-api”
    区域 选择离你最近的区域
    预设 选择“Angular”
    应用程序代码位置 输入 angular-app
    输出位置 输入 dist/angular-app

  1. 输入并选择 “Azure 静态 Web 应用：创建静态 Web 应用...”。

    为命令面板提示的其余部分输入以下值。

    提示 价值
    订阅 选择“Concierge 订阅”
    名称 输入“my-static-web-app-and-api”
    区域 选择离你最近的区域
    预设 选择“React”
    应用程序代码位置 输入 react-app
    输出位置 输入 dist

  1. 输入并选择 “Azure 静态 Web 应用：创建静态 Web 应用...”。

    为命令面板提示的其余部分输入以下值。

    提示 价值
    订阅 选择“Concierge 订阅”
    名称 输入“my-static-web-app-and-api”
    区域 选择离你最近的区域
    预设 选择 Svelte
    应用程序代码位置 输入 svelte-app
    输出位置 输入 公共

  1. 输入并选择 “Azure 静态 Web 应用：创建静态 Web 应用...”。

    为命令面板提示的其余部分输入以下值。

    提示 价值
    订阅 选择“Concierge 订阅”
    名称 输入“my-static-web-app-and-api”
    区域 选择离你最近的区域
    预设 选择“Vue”
    应用程序代码位置 输入 vue-app
    输出位置 输入 dist

注释

此存储库不同于可能用于的其他项目。 此项目在四个不同的文件夹中包含四个不同的应用。 每个文件夹都包含在不同 JavaScript 框架中创建的应用。 通常，您在存储库的根目录中只有一个应用程序，因此应用程序路径位置是默认的 / 。 此结构是一个很好的示例，说明 Azure 静态 Web 应用如何让你首先配置位置 - 你可以完全控制应用的生成方式。

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

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

    在配置生成时，Visual Studio Code 会向你报告生成状态。

    显示生产状态为正在等待部署的屏幕截图。

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

    显示如何查看 GitHub Actions 的屏幕截图。

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

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

    显示如何使用 Visual Studio Code 扩展浏览静态 Web 应用的屏幕截图。

    应用应显示“正在加载数据...”，因为尚无数据或 API。 你在本模块后面将为 Web 应用添加 API。

祝贺！ 你的应用已部署到 Azure 静态 Web 应用！

注释

如果看到一个网页指出应用尚未生成和部署，请不要担心。 尝试在一分钟后刷新浏览器。 创建 Azure 静态 Web 应用时，GitHub Action 服务会自动运行。 因此，如果看到初始页面，则应用仍在进行部署。

从 GitHub 拉取更改

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

  1. 按 Ctrl+Shift+P 打开命令面板。

  2. 输入并选择“Git:拉取”。

  3. 按 Enter。

后续步骤

接下来，了解如何使用 Azure Functions 项目生成和运行 API。