チュートリアル: 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 のサポート用に Codespace を構成します。
  3. シングルページ アプリケーションをビルドして Power Pages 環境にアップロードします。
  4. Power Pages から直接サイトを再アクティブ化してテストします。

[前提条件]

開始する前に、以下の項目があることを確認します:

  • 管理者特権を持つ Power Pages 環境。
  • Power Platform CLI (PAC CLI) バージョン 1.44.x 以降がインストールされ、認証されました。
  • バージョン 9.7.4.x 以降の Power Pages サイト。
  • カスタム フロントエンド プロジェクト用の Codespaces を使用した GitHub Spark ライセンス。

注

  • 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 (Mac では Command + Shift + P) を押してコマンド パレットを開きます。
  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"

パラメーター

パラメーター エイリアス Description
--rootPath -rp サイトのソース ファイルを含むローカル フォルダー
--compiledPath -cp React などのコンパイル済みアセットへのパス build
--siteName -sn Power Pages のサイトの表示名

手順 7: 再アクティブ化とテスト

  1. アップロード後、Power Pagesの [非アクティブなサイト] にサイトが表示されます。
  2. 非アクティブなサイトに移動し、サイトを見つけて、[再アクティブ化] を選択します。
  3. サイトがアクティブになったら、その URL を開いてデプロイを確認します。

次の手順: サイトのセキュリティ保護と拡張

これでサイトが展開されました。

  • アクセスをセキュリティで保護するための 認証と承認 を構成します。
  • Power Pages Web API を使用してコンテンツを動的に読み込み、カスタム コードから作成、更新、削除の操作を実行します。
  • サンプルの React サイト コード と ドキュメント を調べて、より詳細なカスタマイズでシングルページ アプリケーション (SPA) を構築します。
  • Last updated on