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

• アクティブなサブスクリプションを持つ Azure アカウント。 無料用のアカウントを作成します。

• Azure Static Web Apps CLI。 静的 Web Apps (SWA) CLIをインストールします。

• データ API ビルダー CLI。 Data API Builder (DAB) CLIをインストールします。

• Azure からアドレス指定可能な既存のサポートされているデータベース。

• Azure Static Web Apps にデプロイできる GitHub リポジトリ内の既存の 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. [Essentials] セクションで、URL ハイパーリンクを使用して、実行中の Web アプリケーションに移動します。 アプリケーションが想定どおりに実行されていることを確認します。

次に、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 サービスの に関するページを参照してください。

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

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

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

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

   { Healthy }
   

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

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

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

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