Azure Static Web Apps でデータ API ビルダーをホストする (プレビュー)

構成ファイルのみを使用して、Azure Static Web Apps でデータ API ビルダーをすばやくホストします。 このガイドには、Data API Builder と静的 Web アプリを統合する手順が含まれています。

このガイドでは、DAB 構成ファイルをビルドし、アプリケーションの一部としてファイルをホストし、Azure Static Web Apps でデータベース接続を使用する手順について説明します。

[前提条件]

• アクティブなサブスクリプションを持つ Azure アカウント。 無料でアカウントを作成できます。
• Azure Static Web Apps CLI。 静的 Web アプリ (SWA) CLI をインストールします。
• データ API ビルダー CLI。 Data API Builder (DAB) CLI をインストールします。
• Azure からアドレス指定可能な既存のサポートされているデータベース。
• Azure Static Web Apps にデプロイできる GitHub リポジトリ内の既存の Web アプリケーション。
  • Web アプリケーションがない場合は、 基本的な Web アプリケーションを使用してリポジトリを生成します。

静的 Web アプリを作成する

まず、Azure portal を使用して、GitHub の Web アプリケーションを使用して新しい Azure Static Web アプリを作成します。

1. Azure portal にサインインします (https://portal.azure.com)。

2. 新しいリソース グループを作成します。 このガイドでは、このリソース グループをすべての新しいリソースのために使用します。

   

   ヒント

   リソース グループ に msdocs-dab-swa という名前を付けすることをお勧めします。 このガイドのすべてのスクリーンショットでは、この名前を使用します。

3. Azure Static Web アプリを作成します。 これらの設定を使用して、静的 Web アプリを構成します。

   設定	価値
   リソース グループ	前に作成したリソース グループを選択する
   名前	グローバルに一意の名前を入力する
   計画タイプ	ワークロードに最適なオプションを選択する
   ソース	[GitHub] を選択します
   GitHub アカウント	Web アプリケーション リポジトリにアクセスできる GitHub アカウントを構成する
   組織	リポジトリの親組織またはユーザーを選択する
   リポジトリ	リポジトリ名を選択する
   ブランチ	プライマリ ブランチを選択する

   

4. 静的 Web アプリケーションのデプロイが完了するまで待ちます。 GitHub Actions ワークフローがリポジトリに自動的に追加され、プライマリ ブランチにプッシュするたびにアプリケーションが Azure Static Web Apps にデプロイされます。

   注

   この初期デプロイには数分かかる場合があります。 デプロイの状態は、Azure portal またはリポジトリの GitHub Actions タブでいつでも確認できます。

5. Azure portal で新しい静的 Web アプリに移動します。

6. [ 要点 ] セクションで、 URL ハイパーリンクを使用して、実行中の Web アプリケーションに移動します。 アプリケーションが想定どおりに実行されていることを確認します。

DAB 構成ファイルを追加する

次に、DAB および SWA コマンド ライン インターフェイスを使用して新しい DAB 構成ファイルを作成し、それを Web アプリケーション リポジトリに追加します。

1. 任意の統合開発環境 (IDE) で、Web アプリケーションの GitHub リポジトリを開きます。

   ヒント

   任意の IDE を使用できます。 アプリケーションをローカルで操作する場合は、リポジトリをローカル コンピューターに複製できます。 ブラウザーで作業する場合は、 GitHub Codespaces を使用できます。 開発環境に SWA と DAB の CLI がインストールされていることを確認します。

2. リポジトリのルートでターミナルを開きます。

3. SWA CLI の swa db コマンドを使用して、指定したデータベースの種類を使用して新しい DAB 構成ファイルを初期化します。 このコマンドにより、swa-db-connections フォルダー にstaticwebapp.database.config.json という名前の新しいファイルが作成されます。

   swa db init --database-type "<database-type>"
   

   重要

   一部のデータベースの種類では、初期化時に追加の構成設定が必要になります。

4. dab add コマンドを使用して、少なくとも 1 つのデータベース エンティティを構成に追加します。 匿名ユーザーのすべてのアクセス許可を許可するように各エンティティを構成します。 好きなだけ何度でも dab add をエンティティに対して繰り返します。

   dab add "<entity-name>" --source "<schema>.<table>" --permissions "anonymous:*" --config "swa-db-connections/staticwebapp.database.config.json"
   

5. swa-db-connections/staticwebapp.database.config.json ファイルの内容を開いて確認します。

6. 変更をリポジトリにコミットし、プライマリ ブランチにプッシュします。 これにより、Web アプリケーションの新しいデプロイが自動的にトリガーされます。 このガイドに進む前に、この最新のデプロイが完了するまで待ちます。

データベース接続を構成する

次に、静的 Web アプリがデータベースにアクセスできるように、Azure portal でデータベース接続を構成します。

1. Azure portal で静的 Web アプリにもう一度移動します。

2. リソース メニューの [設定] セクションで、[データベース接続] オプションを選択します。 次に、運用環境の [既存のデータベースをリンクする] を選択します。

   

3. [ データベースのリンク ] ダイアログで、これらの設定を使用してデータベース接続を構成します。

   設定	価値
   データベースの種類	DAB 構成ファイルの作成時に使用したのと同じデータベースの種類を選択します
   リソース グループ	このガイドで前に作成したリソース グループを選択します
   リソース名	静的 Web アプリにリンクするデータベース リソースを選択します
   データベース名	データベースの名前を入力します
   認証の種類	使用する認証の種類を選択します

   

   ヒント

   承認キーを含まない接続文字列を使用することをお勧めします。 代わりに、マネージド ID とロールベースのアクセス制御を使用して、データベースとホスト間のアクセスを管理します。 詳細については、 マネージド ID を使用する Azure サービスに関するページを参照してください。

データ API エンドポイントをテストする

最後に、静的 Web アプリでデータ API エンドポイントが使用可能であることを検証します。

1. Azure portal で静的 Web アプリにもう一度移動します。

2. [要点] セクションの URL フィールドを使用して、静的 Web アプリの Web サイトをもう一度参照します。

3. 現在実行中のアプリケーションの /data-api パスに移動します。 応答が DAB コンテナーが 正常であることを示していることを確認します。

   { Healthy }
   

   注

   Static Web Apps では、ランタイム ホスト モードが自動的に Productionに設定され、構成ファイル内の任意の値が上書きされます。 その結果、Swagger や Banana Cake Pop などの開発者向け機能は、Static Web Apps では使用できません。

4. 現在実行中のアプリケーションの https://<your-static-web-app-url>/data-api/<your-rest-path>/<your-entity-name> パスに移動します。 これにより、その一連のエンティティに対する HTTP GET 要求が発行されます。 JSON 応答を確認します。

リソースをクリーンアップする

サンプル アプリケーションまたはリソースが不要になったら、対応するデプロイとすべてのリソースを削除します。

1. Azure portal を使用して リソース グループ に移動します。

2. コマンド バーで、[削除] を選択します。