教程：使用 GitHub Spark 和 Codespaces 创建和部署单页应用程序

新的 单页应用程序 支持为开发人员提供了更大的灵活性：可以在源代码中完全创建、自定义和管理 Power Pages 网站。 借助 GitHub Spark 的最新版本，开发人员现在可以创作网站，直接在 GitHub Codespace 中对其进行编辑，并将其部署到 Power Pages 环境，而无需离开浏览器。 本教程将引导你完成完整的工作流。

GitHub Spark 是 GitHub Copilot 中由 AI 提供支持的新自然语言平台。 它旨在帮助开发人员快速启动新式 Web 应用程序。 结合 GitHub Codespaces 进行代码编辑时，Spark 提供：

  • 适用于项目的现成模板库。
  • 为一致的环境预配置的开发容器。
  • GitHub Copilot 中由 AI 提供支持的自然语言平台。

对于 Power Pages 开发人员，这意味着你可以从现成的网站模板开始，在不使用传统的本地设置的情况下对其进行自定义和部署。

本文结束时，你将了解如何：

  1. 使用 GitHub Spark 创建原型 Power Pages 网站。
  2. 为 .NET 和 PAC CLI 支持配置您的代码空间。
  3. 生成单页应用程序并将其上传到 Power Pages 环境。
  4. 直接从 Power Pages 重新激活和测试网站。

先决条件

在开始之前，请确保具备：

  • 具有 管理员权限的 Power Pages 环境。
  • Power Platform CLI （PAC CLI） 1.44.x 或更高版本已安装并经过身份验证。
  • 版本 9.7.4.x 或更高版本上的 Power Pages 站点。
  • 您的自定义前端项目使用 GitHub Spark 许可证和 Codespaces。

注释

  • 若要使用 GitHub Spark，请确保拥有相应的 GitHub 许可证。
  • 可以通过 Spark 支持团队获取对 GitHub Spark 或 Codespaces 的支持。

步骤 1：从 GitHub Spark 模板开始

  1. 转到 GitHub Spark 工具，并使用自然语言生成新网站。
  2. 创建后，在 Codespaces 中单击“打开”。

这为你提供了一个基于云的开发环境，你可以在其中处理 Power Pages 项目，而无需任何本地设置。

步骤 2：更新开发容器配置

在存储库中，找到该文件：

.devcontainer/devcontainer.json

修改功能部分以添加对 .NET 9.0 的支持。 配置应如下所示：

"features": {
  "ghcr.io/devcontainers/features/sshd:1": {
    "version": "latest"
  },
  "ghcr.io/devcontainers/features/dotnet:2.3.0": {
    "version": "9.0"
  }
}

重新生成容器

完成保存更改后：

  1. 按 Ctrl + Shift + P （或在 Command + Shift + P Mac 上）打开命令面板。
  2. 键入 Codespaces：重新生成容器 并选择它。
  3. 容器将重启。 在此过程中，将安装 .NET 9 和其他所有依赖项。
  4. 等待几秒钟才能完成安装，然后再继续。

此步骤可确保使用新配置刷新 Codespace 环境。 这可确保 Codespace 包含 Power Pages 生成工具所需的运行时。

步骤 3：安装 Power Platform 工具

从你的 Codespaces 终端窗口：

  1. 安装 Power Platform 工具（可用作 VS Code 扩展）。
  2. 此安装还引入 PAC CLI，这是一个命令行接口，可用于对站点进行身份验证、下载和上传。

步骤 4：连接到 Power Platform 环境

使用 PAC CLI 针对目标环境进行身份验证：

pac auth create -u https://org12x34x45.crm.dynamics.com

将 URL 替换为实际的 Power Platform 环境 URL。

步骤 5：生成网站

在部署之前，请生成站点代码：

npm run build

此命令编译您的站点并将生成物输出到dist文件夹中。

步骤 6：上传网站

使用以下命令将站点部署到 Power Pages 环境：

pac pages upload-code-site --rootPath "./spark-template" --compiledPath "./dist" --siteName "YourSiteName"

参数

参数 别名 Description
--rootPath -rp 具有站点源文件的本地文件夹
--compiledPath -cp 编译后资源的路径，如 React build
--siteName -sn Power Pages 网站的显示名称

步骤 7：重新激活和测试

  1. 上传后，网站将显示在 Power Pages 中的“非活动”网站下。
  2. 转到 “非活动网站”，找到您的网站，然后选择“ 重新激活”。
  3. 当站点处于活动状态时，请打开其 URL 以确认部署。

后续步骤：保护和扩展网站

现在您的网站已部署：

  • Last updated on