练习 - 获取示例应用程序

  • 10 分钟

准备好开始使用 Microsoft Azure Pipelines 生成 CI 管道。 第一步是生成并运行 Space Game Web 应用。 了解如何手动生成软件，为在管道中重复该过程做好准备。

Mara 将执行这一步，如果你按照程序操作，就能完成相同的操作。

创建 Azure DevOps 个人访问令牌

  1. (https://dev.azure.com/{yourorganization}) 登录到组织。 如果还没有 Azure DevOps 组织，请在开始前创建一个免费组织。 登录后，如果有多个组织，请选择“Azure DevOps”，并转到计划用于完成本模块的组织。 在此示例中，组织的名称为 fabrikam。

    选择 Azure DevOps 组织的屏幕截图。

  2. 在主页中，打开用户设置 ，然后选择“个人访问令牌”。

  3. 选择“+ 新建令牌”。

  4. 使用你喜欢的任何名称命名令牌。 当 Codespace 将其代理注册到 Azure DevOps 组织时，将使用该令牌，因此你可以保留默认过期时间。

  5. 选择“自定义”，然后选择“显示所有范围”。

    查看个人访问令牌的所有范围的屏幕截图。

  6. 选择以下范围：代理池（读取和管理），然后选择“创建”。

    为个人访问令牌选择代理池权限的屏幕截图。

  7. 完成后，复制令牌并将其存储在安全位置。 出于安全原因，它不会再次显示。

警告

像对待和使用密码一样对待和使用 PAT，并使其保密。

创建分支

在 Git 中使用项目的第一步是创建一个分叉，以便可以使用和修改源文件。 分支是 GitHub 存储库的副本。 该副本位于你的帐户中，使你可以进行所需的任何更改，而不会影响原始项目。

你可以提议对原始项目进行更改，但在此课程中，你将使用 Space Game Web 项目，就好像它是 Mara 及其团队拥有的原始项目一样。

注意

如果之前已为此存储库创建分支（例如，如果之前已完成此模块或其他 Tailspin Toys 训练模块），我们建议删除分支并使用以下步骤创建新的分支。 如果不想删除分支，请确保同步分支。

将 Space Game Web 项目分支到 GitHub 帐户：

  1. 在 Web 浏览器中，转到 GitHub 并登录。

  2. 转到 Space Game Web 项目。

  3. 选择“分支”：

    显示“分支”按钮位置的 GitHub 屏幕截图。

  4. 按照说明在帐户中创建存储库分支。

为自托管代理设置机密

在创建 Codespace 之前，需要创建几个机密来帮助自托管 Azure DevOps 代理运行。 在生产环境中，你不希望在 GitHub Codespaces 中使用自托管代理。 但是，由于你的团队使用 Codespaces 进行测试，因此在生成管道时，使用它是一个很好的临时解决方案。

  1. 转到已创建分支的 GitHub 存储库，选择“设置”>“机密和变量”>“Codespaces”。

    GitHub Codespaces 机密的屏幕截图。

  2. 创建以下 Codespaces 存储库机密。

    名称 值
    ADO_ORG 用于完成此模块的 Azure DevOps 组织的名称。 在此示例中，fabrikam 是组织的名称。 此组织名称必须与在上一步中创建 PAT 时所用的组织名称相同。
    ADO_PAT 在上一步中创建的个人访问令牌。

    提示

    在此培训模块中，代理将分配到 Default 代理池。 如果你不想在 Default 池中运行代理（例如，使用生产 Azure DevOps 环境运行此训练模块，并且 Default 池中有其他代理），则可以创建名为 ADO_POOL_NAME 的机密并指定要使用的代理池的名称。 如果未指定此机密，则使用 Default 池。

设置 Codespaces

接下来，你将设置 Codespaces，以便可以生成网站、使用源文件以及使用自托管代理运行管道。

  1. 在已创建分支的 GitHub 存储库中，选择“代码”，再次选择“代码”，选择“Codespaces”选项卡，然后选择 + 以创建新的 Codespace。

    使用选项创建新 Codespace 的屏幕截图。

  2. 等待 Codespace 生成。 此生成过程可能需要一些时间，但你只需要在训练模块的这一步骤中执行一次此操作。

    生成完成后，你将被重定向到 Visual Studio Code 的联机版本。 Codespace 附带 Visual Studio Code 的全新安装，类似于本地计算机上的 Visual Studio Code 的全新安装。 当 Codespace 首次启动时，联机 Visual Studio Code 可能会提示你提供特定配置或询问你有关首选项的信息。 你可以选择适合 Visual Studio Code 使用风格的首选项。

设置上游远程库

远程库是一个 Git 存储库，团队成员可在其中进行协作（与 GitHub 上的存储库类似）。 让我们列出你的远程服务器，并添加一个指向 Microsoft 存储库副本的远程服务器，这样你就可以获得最新的示例代码。

  1. 在 Visual Studio Code 联机编辑器中，转到终端窗口，然后从右侧选择“bash”。

    Visual Studio Code 联机编辑器中终端窗口的屏幕截图。

  2. 若要列出远程库，请运行下面的 git remote 命令：

    git remote -v

    可以看到你对存储库具有提取（下载）和推送（上传）访问权限：

    origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (fetch)
origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (push)

    Origin 指定你在 GitHub 上的存储库。 对另一个存储库中的代码创建分支时，通常将原始远程库（之前从中创建分支的远程库）命名为“上游”。

  3. 运行以下 命令可创建一个名为“upstream”的远程库，它指向 Microsoft 存储库git remote add：

    git remote add upstream https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git

  4. 再次运行 git remote 查看更改：

    git remote -v

    可看到，你仍然具有对存储库的提取（下载）和推送（上传）访问权限。 现在，你还对 Microsoft 存储库具有提取和推送访问权限：

    origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (fetch)
origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (push)
upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git (fetch)
upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git (push)

生成并运行 Web 应用

  1. 在 Visual Studio Code 联机编辑器中，导航到终端窗口，并运行下面的 dotnet build 命令以生成应用：

    dotnet build --configuration Release

  2. 在终端窗口中，运行下面的 dotnet run 命令以运行应用：

    dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web

    .NET 解决方案文件可以包含多个项目。 --project 参数指定 Space Game Web 应用的项目。

验证应用程序是否正在运行

在开发模式下，Space Game 网站配置为在端口 5000 上运行。

Visual Studio 编辑器中会显示一条新消息。 在端口 5000 上运行的应用程序可用。 选择“在浏览器中打开”以转到正在运行的应用。

端口转发 Codespaces 消息的屏幕截图。

在新的浏览器窗口中，应当会显示 Space Game 网站：

显示 Space Game 网站的 Web 浏览器屏幕截图。

可以与页面进行交互，包括排行榜。 选择玩家名字时，会看到该玩家的详细信息：

显示 Space Game 排行榜的 Web 浏览器屏幕截图。

完成后，返回到终端窗口，并选择 Ctrl + C 以停止正在运行的应用。

准备 Visual Studio Code

首先设置 Visual Studio Code，以便可以在本地生成网站并使用源文件。

Visual Studio Code 附带一个集成终端，便于在同一个位置编辑文件和使用命令行。

  1. 启动 Visual Studio Code。

  2. 在“视图”菜单中选择“终端”。

  3. 从下拉列表中，选择“bash”：

    在 Visual Studio Code 中选择 Bash Shell 的屏幕截图。

    通过终端窗口，可选择安装在系统上的任何 shell，如 Bash、Zsh 和 PowerShell。

    在此，你将使用 Bash。 适用于 Windows 的 Git 提供了 Git Bash，以便轻松运行 Git 命令。

    注意

    如果未在 Windows 上看到“Git Bash”选项，请确保已安装 Git，然后重启 Visual Studio Code。

  4. 运行 cd 命令可导航到要使用的目录，例如主目录 (~)。 如果需要，可选择其他目录。

    cd ~

配置 Git

如果刚接触 Git 和 GitHub，那么首先需要运行一些命令，将你的标识与 Git 相关联并在 GitHub 中进行身份验证。

设置 Git 更详细地解释了此过程。

至少需要完成以下步骤。 通过 Visual Studio Code 集成终端运行这些命令。

  1. 设置用户名。
  2. 设置提交电子邮件地址。
  3. 缓存 GitHub 密码。

备注

如果已为 GitHub 使用双因素身份验证，请创建个人访问令牌，并在稍后出现提示时使用令牌代替密码。

将访问令牌当作密码一样对待。 请将其保存在安全的位置。

获取源代码

现在，你将从 GitHub 获取源代码并设置 Visual Studio Code，以便可以运行应用并使用源代码文件。

创建分支

在 Git 中使用项目的第一步是创建一个分叉，以便可以使用和修改源文件。 分支是 GitHub 存储库的副本。 该副本位于你的帐户中，使你可以进行所需的任何更改，而不会影响原始项目。

你可以提议对原始项目进行更改，但在此课程中，你将使用 Space Game Web 项目，就好像它是 Mara 及其团队拥有的原始项目一样。

将 Space Game Web 项目分支到 GitHub 帐户：

  1. 在 Web 浏览器中，转到 GitHub 并登录。

  2. 转到 Space Game Web 项目。

  3. 选择“分支”：

    显示“分支”按钮位置的 GitHub 屏幕截图。

  4. 按照说明在帐户中创建存储库分支。

在本地克隆分支

在 GitHub 帐户中拥有 Space Game Web 项目的副本后，可以下载或克隆副本到计算机，以便可以在本地使用。

克隆与分支类似，都是存储库的副本。 克隆存储库时，可以执行更改，验证它们是否按预期工作，然后将这些更改上传回 GitHub。 还可以将其他经过身份验证的用户对 GitHub 的存储库副本所做的更改同步到本地副本。

将 Space Game Web 项目克隆到计算机：

  1. 转到 GitHub 上的 Space Game Web 项目分支。

  2. 在命令栏中，选择“代码”。 显示“克隆”选项的窗格，其中包含克隆类型的选项卡。 从“HTTPS”选项卡选择 URL 旁边的复制图标，将该 URL 复制到剪贴板。

    在 GitHub 存储库中找到 URL 和“复制”按钮的屏幕截图。

  3. 在 Visual Studio Code 中，转到终端窗口，输入 git clone，然后粘贴剪贴板中的 URL。 它看起来应该类似于：

    git clone https://github.com/username/mslearn-tailspin-spacegame-web.git

  4. Cloning 'mslearn-tailspin-spacegame-web'... 操作完成后，输入以下命令以更改为 mslearn-tailspin-spacegame-web 目录。 存储库的根目录。

    cd mslearn-tailspin-spacegame-web

设置上游远程库

远程库是一个 Git 存储库，团队成员可在其中进行协作（与 GitHub 上的存储库类似）。 让我们列出你的远程服务器，并添加一个指向 Microsoft 存储库副本的远程服务器，这样你就可以获得最新的示例代码。

  1. 若要列出远程库，请运行下面的 git remote 命令：

    git remote -v

    可以看到你对存储库具有提取（下载）和推送（上传）访问权限：

    origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (fetch)
origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (push)

    Origin 指定你在 GitHub 上的存储库。 对另一个存储库中的代码创建分支时，通常将原始远程库（之前从中创建分支的远程库）命名为“上游”。

  2. 运行以下 命令可创建一个名为“upstream”的远程库，它指向 Microsoft 存储库git remote add：

    git remote add upstream https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git

  3. 再次运行 git remote 查看更改：

    git remote -v

    可看到，你仍然具有对存储库的提取（下载）和推送（上传）访问权限。 现在，你还对 Microsoft 存储库具有提取和推送访问权限：

    origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (fetch)
origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (push)
upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git (fetch)
upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git (push)

在文件资源管理器中打开项目

在 Visual Studio Code 中，终端窗口指向 Space Game Web 项目的根目录。 现在，打开项目以查看其结构并使用文件。

  1. 打开项目最简单的方法是在当前目录中重新打开 Visual Studio Code。 为此，可在集成终端中运行以下命令：

    code -r .

    可以在文件资源管理器中查看目录和文件树。

  2. 重新打开集成终端。 终端会将你带至 Web 项目的根目录。

如果 code 命令失败，则需要将 Visual Studio Code 添加到系统路径。 为此，请执行以下操作：

  1. 在 Visual Studio Code 中，选择 F1 或者“视图”>“命令面板”来访问命令面板。

  2. 在命令面板中，输入“Shell 命令: 在 PATH 中安装 "code" 命令”。

  3. 重复上一过程，在文件资源管理器中打开项目。

生成并运行 Web 应用

现在，你已拥有 Web 应用，可在本地生成并运行它。

  1. 在 Visual Studio Code 中，导航到终端窗口，并运行下面的 dotnet build 命令以生成应用：

    dotnet build --configuration Release

    备注

    如果找不到 dotnet 命令，请查看本模块开头的先决条件。 你可能需要安装 .NET SDK。

    .NET 项目通常附带两种生成配置：调试和发布。 调试生成未针对性能进行优化。 该生成使你能够更轻松地跟踪程序并解决问题。 在此处选择“发布”配置，这只是为了看一看 Web 应用的实际应用。

  2. 在终端窗口中，运行下面的 dotnet run 命令以运行应用：

    dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web

    .NET 解决方案文件可以包含多个项目。 --project 参数指定 Space Game Web 应用的项目。

验证应用程序是否正在运行

在开发模式下，Space Game 网站配置为在端口 5000 上运行。

从新的浏览器选项卡中，导航到 http://localhost:5000 查看正在运行的应用：

显示 Space Game 网站的 Web 浏览器屏幕截图。

提示

如果在浏览器中看到与隐私或证书错误相关的错误，请在终端中选择 Ctrl + C 以停止正在运行的应用。

然后运行 dotnet dev-certs https --trust，在出现提示时选择“是”。 有关详细信息，请参阅此博客文章。

在计算机信任本地 SSL 证书后，再次运行 dotnet run 命令，并从新的浏览器标签页转到 http://localhost:5000 来查看正在运行的应用程序。

可以与页面进行交互，包括排行榜。 选择玩家名字时，会看到该玩家的详细信息：

显示 Space Game 排行榜的 Web 浏览器屏幕截图。

完成后，返回到终端窗口，并选择 Ctrl+C 以停止正在运行的应用。