Power Pagesでシングルページアプリケーションを作成してデプロイする

Power Pagesでは、GitHub Copilotなどの次世代の AI 支援ツールを使用して作成されたシングルページアプリケーション (SPA) コードの統合がサポートされています。この機能により、開発者は自然言語をコーディングインターフェイスとして使用して、最新のコンポーネントベースのフロントエンドエクスペリエンスをPower Pagesに取り込むことができます。

AI が生成したコードを導き、テストし、洗練させることで、作成者は反復的な実装作業から、より高度なオーケストレーションに重点を移すことができます。これにより、エンタープライズグレードの品質と標準を維持すると同時に、より直感的で創造的な開発が可能になります。

この記事では、次の方法について説明します:

Power Platform CLI (PAC CLI) を使用してPower Pages用の SPA プロジェクトを作成して設定します。
Power Pages サイトにコード資産をアップロードしたり、ダウンロードしたりします。
安全で保守しやすいプロジェクト構造を設定します。
SPA ベースの実装と従来のPower Pages実装の主な違いについて説明します。

メモ

SPA サイトは、ユーザーのブラウザー (クライアント側のレンダリング) で完全に実行されるPower Pages サイトです。従来のPower Pages サイトとは異なり、SPA サイトはソースコードとコマンドラインインターフェイス (CLI) ツールを使用してのみ管理されます。
Power Platform Git 統合は、Power Pagesの Single-Page アプリケーション (SPA) Web サイトではサポートされていません。

前提条件

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

admin 特権を持つPower Pages環境。
Power Platform CLI (PAC CLI) バージョン 1.44.x 以降がインストールされ、認証されていること。
バージョン 9.7.4.x 以降のPower Pages サイト。
Dataverse 環境での JavaScript ファイルのアップロードを許可します。
React、Angular、Vue などのカスタムフロントエンドプロジェクトを含むローカル Git リポジトリ。

JavaScript ファイルのアップロードを許可する

既定では、一部の Dataverse 環境では JavaScript () ファイルのアップロードがブロックされます。 "インポートに失敗しました: 添付ファイルが有効な種類ではないか、大きすぎます。アップロードまたはダウンロードできません。このファイルの種類を許可するように環境設定を更新してください。

環境の Power Platform 管理センターで設定を調整するには、次の手順に従います:

Power Platform 管理センターにサインインします。
ナビゲーションウィンドウで、[管理] を選択します。
管理ウィンドウで環境を選択します。
環境を選択します。
コマンドバーで、設定を選択します。
製品を展開し、プライバシー + セキュリティを選択します。
[ ブロックされた添付ファイル] セクションで、ファイル拡張子の一覧からを削除します。
保存を選択します。

SPA サイトの作成と展開

Power Pages SPA サイトは、PAC CLI コマンド upload-code-site と download-code-site を使用して管理されます。サイトをアップロードすると、Power PagesInactive sites リストに表示されます。サイトのライセンス認証を行ってユーザーが利用できるようにします。

SPA サイトのアップロード

pac pages upload-code-site コマンドを使用して、ローカルソースとコンパイル済みアセットをPower Pages環境にアップロードします。

構文

pac pages upload-code-site `
  --rootPath <local-source-folder> `
  [--compiledPath <build-output-folder>] `
  [--siteName <site-display-name>]

Parameters

パラメーター	Alias	Required	Description
`--rootPath`	`-rp`	あり	サイトソースファイルを含むローカルフォルダー
`--compiledPath`	`-cp`	いいえ	コンパイルされた資産へのパス (React など)
`--siteName`	`-sn`	いいえ	Power Pages サイトの表示名

例

pac pages upload-code-site `
  --rootPath "../your-project" `
  --compiledPath "./build" `
  --siteName "Contoso Code Site"

既存のプロジェクトがない場合は、 React、Angular、Vue を使用して SPA サイトのサンプル実装を試してください。

アップロードパラメーターをで定義する

ご利用のサイトにファイルを含めることで、コマンドの動作をカスタマイズできます。この構成ファイルをサイトのルートフォルダーに配置します。設定ベースのサイトアップロードを使用する場合は、コマンドをパラメーターだけで実行します。このコマンドは、コンパイルされた資産のパスやサイトの表示名など、その他の値をファイルから自動的に読み込みます。コマンドライン引数と設定値の両方を指定した場合は、コマンドライン引数が優先されます。

サンプル :

{
  "siteName": "Contoso Bank",
  "defaultLandingPage": "index.html",
  "compiledPath": "C:\\PowerPages\\your-project\\dist"
}

SPA サイトをダウンロードする

pac pages download-code-site コマンドを使用して、編集やバックアップのために既存のサイトのコードをローカルディレクトリにダウンロードします。

構文

pac pages download-code-site `
  [--environment <env-url-or-guid>] `
  --path <local-target-folder> `
  --webSiteId <site-guid> `
  [--overwrite]

Parameters

パラメーター	Alias	Required	Description
`--environment`	`-env`	いいえ	Dataverse 環境 (GUID または完全な URL)。既定はアクティブな認証プロファイルです
`--path`	`-p`	あり	サイトコードをダウンロードするローカルディレクトリ
`--webSiteId`	`-id`	あり	Power Pages SPA サイトの Web サイトレコード GUID
`--overwrite`	`-o`	いいえ	ターゲットディレクトリに既存のファイルがある場合は上書きします

例

pac pages download-code-site `
  --environment "https://contoso.crm.dynamics.com" `
  --path "./downloaded-site" `
  --webSiteId "11112222-bbbb-3333-cccc-4444dddd5555" `
  --overwrite

サイトをアクティブ化してテストする

Power Pagesに移動。
非アクティブなサイトを選択し、サイトを見つけて、再アクティブ化を選択します。
サイトがアクティブになったら、サイトの URL にアクセスして展開を確認します。

ヒント

それ以降のコマンドは、自動的にアクティブなサイトを更新します。

プロジェクト構造と構成

一貫性のあるプロジェクトレイアウトは、正しいアップロード動作の保証に貢献します。

/your-project
│
├─ src/                       ← Your source code, like React components
├─ build/                     ← Compiled assets, output of the `npm run build` command
├─ powerpages.config.json     ← Optional CLI configuration file
└─ README.md

オプションのファイルを使用して、コマンドの動作方法をカスタマイズします。

認証および承認

POWER PAGES SPA サイトでは、従来のPower Pages サイトと同じセキュリティモデルを使用します。

ID プロバイダーの構成

Power Pagesに移動。
サイトを検索し、編集を選択します。
[ セキュリティ識別プロバイダー] を選択します。
Microsoft Entra IDのように、identity プロバイダーを追加または設定します。
新しい各サイトには、既定のMicrosoft Entra ID プロバイダーが自動的に設定されます。

コードでユーザーコンテキストにアクセスする

クライアントで認証メタデータを取得する:

オーソリティ URL:

Microsoft Entra IDの機関またはログイン URL は次のとおりです。
```
https://login.windows.net/<tenantId>
```
他の構成済みのIDプロバイダーのAuthority URLを見つけるには、Power Pages><your site>>セキュリティ>IDプロバイダー>の構成設定に移動してください。

ユーザーの詳細:

window["Microsoft"].Dynamic365.Portal.User

サンプルの React フロー

import { IconButton, Tooltip } from '@mui/material';
import {
    Login,
    Logout
} from '@mui/icons-material';
import React from 'react';
export const AuthButton = () => {
    const username = (window as any)["Microsoft"]?.Dynamic365?.Portal?.User?.userName ?? "";
    const firstName = (window as any)["Microsoft"]?.Dynamic365?.Portal?.User?.firstName ?? "";
    const lastName = (window as any)["Microsoft"]?.Dynamic365?.Portal?.User?.lastName ?? "";
    const tenantId = (window as any)["Microsoft"]?.Dynamic365?.Portal?.tenant ?? "";
    const isAuthenticated = username !== "";
    const [token, setToken] = React.useState<string>("");

    React.useEffect(() => {
        const fetchAntiForgeryToken = async (): Promise<string> => {
            try {
                const tokenEndpoint = "/_layout/tokenhtml";

                const response = await fetch(tokenEndpoint, {});

                if (response.status !== 200) {
                    throw new Error(`Failed to fetch token: ${response.status}`);
                }

                const tokenResponse = await response.text();                
                const valueString = 'value="';
                const terminalString = '" />';
                const valueIndex = tokenResponse.indexOf(valueString);

                if (valueIndex === -1) {
                    throw new Error('Token not found in response');
                }

                const requestVerificationToken = tokenResponse.substring(
                    valueIndex + valueString.length,
                    tokenResponse.indexOf(terminalString, valueIndex)
                );

                return requestVerificationToken || '';
            } catch (error) {
                console.warn('[Impersonation] Failed to fetch anti-forgery token:', error);
                return '';
            }
        };

        const getToken = async () => {
            try {
                const token = await fetchAntiForgeryToken();
                setToken(token);
            } catch (error) {
                console.error('Error fetching token:', error);
            }
        };
        getToken();
    }, []);

    return (
        <div className="flex items-center gap-4">
            {isAuthenticated ? (
                <>
                    <span className="text-sm">Welcome {firstName + " " + lastName}</span>
                    <Tooltip title="Logout">
                        <IconButton color="primary" onClick={() => window.location.href = "/Account/Login/LogOff?returnUrl=%2F"}>
                            <Logout />
                        </IconButton>
                    </Tooltip>
                </>
            ) : (
                <form action="/Account/Login/ExternalLogin" method="post">
                    <input name="__RequestVerificationToken" type="hidden" value={token} />
                    <Tooltip title="Login">
                        <IconButton name="provider" type="submit" color="primary" value={`https://login.windows.net/${tenantId}/`}>
                            <Login />
                        </IconButton>
                    </Tooltip>
                </form>
            )}
        </div>
    );
};

Power Pages Web API を使用する

開発者は、Power Pages Web API を利用して、UI にコンテンツを読み込んだり、レコードを作成、更新、削除したりできます。これらの API を使用する前に、必要な Web API が有効になっており、適切なテーブル権限と Web ロールが適切に構成されていることを確認してください。


// Create query to get all cards from Dataverse
const fetchCards = async () => {
    const response = await fetch("/_api/cr7ae_creditcardses");
    const data = await response.json();
    const cards = data.value;
    const returnData = [];

    // Loop through the cards and get the name and id of each card
    for (let i = 0; i < cards.length; i++) {
        const card = cards[i];
        const cardName = card.cr7ae_name;
        const cardId = card.cr7ae_creditcardsid;
        const features = card.cr7ae_features
            ?.split(',')
            .map((feature: string) => feature.trim());
        const type = card.cr7ae_type;
        const image = card.cr7ae_image;
        const category = card.cr7ae_category
            ?.split(',')
            .map((cat: string) => cat.trim());
        
        // ...additional processing/pushing to returnData...
    }

    return returnData;
};

Microsoft Entra ID認証を使用して localhost からの Web API 呼び出しを有効にして、ローカル開発を設定する

開発者は、アプリケーションのビルド時に、より高速な反復サイクル、ローカルデバッグ、ホットリロード機能を必要とします。 SPA では、Microsoft Entra ID (Azure AD) v1 認証を使用して、localhost からのセキュリティで保護された Web API 呼び出しを有効にすることで、これらのワークフローをサポートしています。

このセットアップでは、次のことができます。

完全な認証サポートを使用して、アプリをローカルで実行します。
ホットリロードや迅速なフィードバックには、Vite などの最新の開発ツールを使用します。
Power Pages Web API を呼び出すときに CORS の問題を回避します。
ポータルに変更をデプロイすることなく、開発を高速化します。

この構成により、SPA の生産性の高いローカル開発エクスペリエンスが可能になり、開発者は完全な API アクセスと認証のサポートを使用して迅速にビルド、テスト、反復処理を行うことができます。

重要

認証にはMicrosoft Entra v1 エンドポイントのみを使用します。
ベアラー認証は、ポータルバージョン 9.7.6.6 以降でのみサポートされます。
これらの設定は開発環境でのみ適用します。

構成の手順

SPA 認証を有効にする
1. https://portal.azure.com で、ポータルに登録されているMicrosoft Entra アプリを開きます。
2. シングルページアプリケーション (SPA) 認証を有効にします。
3. プラットフォーム構成を使用して、リダイレクト URI としてを追加します。詳細については、「アプリケーションにリダイレクト URI を追加する方法」を参照してください。
  - リダイレクト URI: 。

サイト設定を追加する

次のサイト設定をPower Pagesに追加します。

Authentication/BearerAuthentication/Enabled = true
Authentication/BearerAuthentication/Protocol = OpenIdConnect
Authentication/BearerAuthentication/Provider = AzureAD

ログインに ADAL.js を使用する
- ADAL.jsを使用してクライアント側ログインを実装します。
メモ

Power Pagesは v1 エンドポイントMicrosoft Entra使用し、MSAL では v2 を使用するため、MSAL.js は互換性がありません。発行者の形式はバージョンによって異なります。
承認ヘッダーを追加する
- すべての Web API 要求に次のヘッダーを含めます。
```
Authorization: Bearer <id_token>
```
サイトの可視性をパブリックに設定する
- この設定により、開発およびテスト目的でサイトにアクセスできます。

開発プロキシを構成する

Vite を使用する場合は、CORS の問題を回避するためににこれを追加します。

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/_api': {
        target: 'https://site-foo.powerappsportals.com',
        changeOrigin: true,
        secure: true
      }
    }
  }
});

既存のPower Pages サイトとの違い

次の表は、この機能を使用して作成された SPA サイトと従来のPower Pages サイトの主な違いをまとめたものです。

特徴	SPA サイトの動作
サーバー側更新	常にサイトのルートページを返し、クライアント側のルーターはサブルートをレンダリングします。
ルートの競合	クライアント側のルートが優先され、ハードリフレッシュはルートにフォールバックします。
ページワークスペース	ページワークスペースはサポートされていません。クライアントルーティングとクライアントサイトページを使用します。ページレベルのセキュリティのために、割り当てられた Web ロールをグローバルユーザーオブジェクトでチェックし、UI を条件付きでレンダリングします。
スタイルワークスペース	ワークスペーススタイルを使用したスタイル設定はサポートされていません。フレームワークのスタイル (CSS、CSS-in-JS、ユーティリティクラスなど) を使用します。
ローカライズ	ひとつの言語のサポート。クライアント側リソースの読み込みを実装する。
Liquid テンプレート	Liquid コードと Liquid テンプレートはサポートされていません。フレームワークのテンプレートエンジンと Web API を使用してデータにアクセスする。

FAQ

単体テストおよび統合テストのために利用可能なサポートは何ですか?

現在のところ、単体テストと統合テストのサポートは組み込まれていません。作成者は、これらのテストをローカルで、または CI/CD パイプライン内で書いて実行する必要があります。

WebAssembly を使用した Power Fx の統合はサポートされていますか?

この機能は、現在サポートされていません。

ソースコードはPower Pagesで使用できますか?

現時点では、作成者は TypeScript または GitHub Copilot Agent を使用して Web サイトを構築できます。コンパイルされた JavaScript ファイルと CSS ファイルにアクセスでき、Visual Studio Codeで編集できます。ただし、HTML ファイルの直接的かつ大規模な編集は現在サポートされていません。

この機能を使用して外部でコンポーネントを作成し、Power Pages サイトに持ち込むことはできますか?

いいえ。この機能を使用して、外部で生成されたコンポーネントを既存のPower Pages サイトに移動することはできません。

リストやフォームなどの標準コンポーネントを追加できますか?

リストやフォームのような既成コンポーネントの追加は現在サポートされていません。しかし、React フレームワークと Web API を使用して、カスタムフォームやリストを構築することもできます。

ソース管理はどのように機能しますか？

開発者はソース管理のために Power Platform Git 統合を使用できます。ただし、リポジトリに追加されるのはコンパイルされた Web ファイルのみで、完全なソースコードは追加されません。

これらのサービス拠点は SEO をサポートしていますか?

SPA サイトは React フレームワークで構築され、クライアントサイドのレンダリングを使用するため、SEO のサポートは限定的です。

SPA サイトで提供Power Pagesセキュリティとガバナンスのサポートは何ですか?

Power Pagesは、Web API 呼び出しでテーブルのアクセス許可とセキュリティ Web ロールを適用し、データアクセスがユーザーロールと一致することを保証します。オブジェクトを使用して、基本的なユーザー属性を取得し、ユーザーペルソナに基づいてエクスペリエンスをカスタマイズします。

また、SPA サイトでは次のことがサポートされています:

非公開と公開のサイト構成
匿名データアクセスの制御を含む、ガバナンス設定
認証とプロバイダー構成

これらの機能は、Power Pages内のカスタムコンポーネントの安全で準拠した統合を保証するのに役立ちます。

Microsoft Power Platform CLI
チュートリアル: Microsoft Power Platform CLI を Power Pages で使用する方法
Visual Studio Code拡張機能を使用します

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-03-07

Power Pagesでシングルページ アプリケーションを作成してデプロイする

前提条件

JavaScript ファイルのアップロードを許可する

SPA サイトの作成と展開

SPA サイトのアップロード

構文

Parameters

例

アップロードパラメーターをで定義する

SPA サイトをダウンロードする

構文

Parameters

例

サイトをアクティブ化してテストする

プロジェクト構造と構成

認証および承認

ID プロバイダーの構成

コードでユーザー コンテキストにアクセスする

サンプルの React フロー

Power Pages Web API を使用する

Microsoft Entra ID認証を使用して localhost からの Web API 呼び出しを有効にして、ローカル開発を設定する

構成の手順

既存のPower Pages サイトとの違い

FAQ

単体テストおよび統合テストのために利用可能なサポートは何ですか?

WebAssembly を使用した Power Fx の統合はサポートされていますか?

ソース コードはPower Pagesで使用できますか?

この機能を使用して外部でコンポーネントを作成し、Power Pages サイトに持ち込むことはできますか?

リストやフォームなどの標準コンポーネントを追加できますか?

ソース管理はどのように機能しますか？

これらのサービス拠点は SEO をサポートしていますか?

SPA サイトで提供Power Pagesセキュリティとガバナンスのサポートは何ですか?

関連情報

フィードバック

その他のリソース

Power Pagesでシングルページアプリケーションを作成してデプロイする

コードでユーザーコンテキストにアクセスする

ソースコードはPower Pagesで使用できますか?