教學課程：使用 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. 設定 Codespace for .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 授權。
  • GitHub Spark 或 Codespaces 的支援可透過 Spark 支援小組取得。

步驟 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：Rebuild Container並選擇它。
  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"

參數

參數 Alias Description
--rootPath -rp 包含您網站來源檔案的本機資料夾
--compiledPath -cp 已編譯資產的路徑，例如 build
--siteName -sn Power Pages 網站的顯示名稱

步驟 7：重新啟用並測試

  1. 上傳後，您的網站會顯示在 Power Pages 的 [非使用中網站] 底下。
  2. 移至 [非使用中網站]，尋找您的網站，然後選取 [重新啟用]。
  3. 當網站變成作用中時，請開啟其 URL 以確認部署。

後續步驟：保護和擴展您的網站

現在您的網站已部署：

  • Last updated on