Samouczek: tworzenie i wdrażanie jednostronicowej aplikacji przy użyciu usług GitHub Spark i Codespaces

Nowa obsługa aplikacji jednostronicowych zapewnia deweloperom większą elastyczność: można tworzyć, dostosowywać witryny usługi Power Pages i zarządzać nimi w całości w kodzie źródłowym. Dzięki najnowszej wersji platformy GitHub Spark deweloperzy mogą teraz tworzyć witrynę, edytować ją bezpośrednio w usłudze GitHub Codespace i wdrażać w środowisku usługi Power Pages bez opuszczania przeglądarki. Ten samouczek przeprowadzi Cię przez pełny przepływ pracy.

GitHub Spark to nowa platforma języka naturalnego oparta na sztucznej inteligencji z witryny GitHub Copilot. Jest ona przeznaczona do szybkiego uruchamiania nowoczesnych aplikacji internetowych przez deweloperów. W połączeniu z usługą GitHub Codespaces do edycji kodu platforma Spark zapewnia następujące możliwości:

  • Gotowe do użycia repozytorium szablonów dla projektu.
  • Wstępnie skonfigurowane kontenery deweloperskie dla spójnych środowisk.
  • Oparta na sztucznej inteligencji platforma języka naturalnego z usługi GitHub Copilot.

W przypadku deweloperów usługi Power Pages oznacza to, że można rozpocząć od gotowego szablonu witryny, dostosować go i wdrożyć bez tradycyjnej konfiguracji lokalnej.

Na końcu tego artykułu dowiesz się, jak wykonać następujące działania:

  1. Tworzenie prototypowej witryny usługi Power Pages przy użyciu platformy GitHub Spark.
  2. Skonfiguruj swoje środowisko Codespace do obsługi .NET i PAC CLI.
  3. Skompiluj i przekaż aplikację jednostronicową do środowiska usługi Power Pages.
  4. Ponownie uaktywnij i przetestuj witrynę bezpośrednio z Power Pages.

Wymagania wstępne

Przed rozpoczęciem upewnij się, że masz następujące elementy:

Uwaga / Notatka

  • Aby korzystać z usługi GitHub Spark, upewnij się, że masz odpowiednie licencje usługi GitHub.
  • Obsługa platformy GitHub Spark lub Codespaces jest dostępna za pośrednictwem zespołu pomocy technicznej platformy Spark.

Krok 1. Rozpoczynanie pracy z szablonem usługi GitHub Spark

  1. Przejdź do narzędzia GitHub Spark i wygeneruj nową witrynę przy użyciu języka naturalnego.
  2. Po utworzeniu kliknij pozycję Otwórz w usłudze Codespaces.

Zapewnia to oparte na chmurze środowisko programistyczne, w którym można pracować nad projektem usługi Power Pages bez żadnej konfiguracji lokalnej.

Krok 2. Aktualizowanie konfiguracji kontenera deweloperskiego

W repozytorium znajdź plik:

.devcontainer/devcontainer.json

Zmodyfikuj sekcję funkcji, aby dodać obsługę platformy .NET 9.0. Konfiguracja powinna wyglądać następująco:

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

Ponowne kompilowanie kontenera

Po zapisaniu zmian:

  1. Naciśnij Ctrl + Shift + P (lub Command + Shift + P na komputerze Mac), aby otworzyć paletę poleceń.
  2. Wpisz Codespaces: przebuduj kontener i wybierz go.
  3. Kontener zostanie uruchomiony ponownie. Podczas tego procesu zostanie zainstalowany program .NET 9 i wszystkie inne zależności.
  4. Przed kontynuowaniem poczekaj kilka sekund na ukończenie instalacji.

Ten krok gwarantuje, że środowisko Codespace zostanie odświeżone przy użyciu nowej konfiguracji. Dzięki temu usługa Codespace będzie zawierać niezbędne środowisko uruchomieniowe dla narzędzi kompilacji usługi Power Pages.

Krok 3. Instalowanie narzędzi platformy Power Platform

Z poziomu terminalu usługi Codespaces:

  1. Zainstaluj narzędzia platformy Power Platform (dostępne jako rozszerzenie programu VS Code).
  2. Ta instalacja zapewnia również interfejs wiersza polecenia PAC, który umożliwia uwierzytelnianie, pobieranie i przesyłanie witryn.

Krok 4. Nawiązywanie połączenia ze środowiskiem platformy Power Platform

Użyj PAC CLI, aby zalogować się w docelowym środowisku.

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

Zastąp adres URL rzeczywistym adresem URL środowiska platformy Power Platform.

Krok 5. Kompilowanie witryny

Przed wdrożeniem skompiluj kod witryny:

npm run build

To polecenie kompiluje witrynę i umieszcza artefakty w folderze dist.

Krok 6: Załaduj swoją witrynę

Wdróż witrynę w środowisku usługi Power Pages przy użyciu:

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

Parametry

Parametr Alias Description
--rootPath -rp Folder lokalny, w którym znajdują się pliki źródłowe witryny
--compiledPath -cp Ścieżka do skompilowanych zasobów, takich jak React build
--siteName -sn Nazwa wyświetlana witryny Power Pages

Krok 7. Ponowne aktywowanie i testowanie

  1. Po zakończeniu przesyłania witryna pojawi się w sekcji Nieaktywne witryny w usłudze Power Pages.
  2. Przejdź do obszaru Nieaktywne witryny, znajdź witrynę i wybierz pozycję Aktywuj ponownie.
  3. Gdy witryna stanie się aktywna, otwórz jej adres URL, aby potwierdzić wdrożenie.

Następne kroki: zabezpieczanie i rozszerzanie witryny

Po wdrożeniu witryny:

  • Last updated on