クイックスタート: Microsoft の Data API Builder とApp Builderを接続して任意のデータベースに対応

データベースにすばやく接続して、フル機能のアプリを構築したいですか?このガイドでは、App Builderを Microsoft の Data API Builder に接続する方法について説明します。続きを読む。

ズドラフコ・コレフ 2025年4月17日 3分で読めます

データベースをApp Builderにすばやく接続し、REST API を使用してフル機能のアプリの構築を開始したいとお考えですか?このガイドでは、Microsoft の Data API Builder (DAB) を使用して、サポートされているデータベース (SQL Server、MySQL、PostgreSQLなど) から REST API を作成し、それをApp Builderに直接接続する方法について説明します。

Microsoft の Data API Builder でApp Builderを接続

Data API Builder を使用する理由

MicrosoftのDABは、バックエンドを書かずにRESTまたはGraphQLを介してデータベースを公開するための高速で柔軟な方法を提供します。箱から出してすぐに得られるものは次のとおりです。

REST エンドポイント: GET, POST, PUT, PATCH, DELETE
フィルタリング、ソート、ページネーション
OpenAPI (Swagger) サポート
テーブル、ビュー、ストアドプロシージャに対応
インメモリキャッシング
オープンソースで無料

ステップ 1: Data API Builder CLI のインストール

.NET を使用して DAB CLI をグローバルにインストールします。

dotnet tool install -g Microsoft.DataApiBuilder

すでにインストールされている場合:

dotnet tool update -g Microsoft.DataApiBuilder

詳細については、公式ドキュメントのDAB インストールドキュメントを参照してください。

ステップ 2: データベースを設定する

SQL Server、MySQL、PostgreSQLのいずれかのデータベースが必要です。SQL Server Management Studio、MySQL Workbench、またはお好みのDBツールを使用して、1つをスピンアップします。

この例では、MSSQL データベースを使用します。

ステップ 3: DAB 構成を初期化する

接続文字列を使用してベースライン設定ファイルを作成します。

dab init --database-type "mssql" --host-mode "Development" --connection-string "Server=YOUR_SERVER;Database=YOUR_DB;Integrated Security=True;"

次に、エンティティを追加します。

dab add Products --source "Products" --permissions "anonymous:*"

これにより、Products table の REST エンドポイントが追加されます。これで、/api/Productsを介して操作できます。

必要に応じて CORS を有効にします。

jsonCopyEdit"origins": ["*"]

基本的なdab-config.jsonは次のようになります(わかりやすくするために簡略化されています)。

{
  "data-source": {
    "database-type": "mssql",
    "connection-string": "Server=YOUR_SERVER;Database=NorthwindCRUD;Integrated Security=True;"
  },
  "runtime": {
    "rest": {
      "enabled": true,
      "path": "/api"
    },
    "host": {
      "cors": {
        "origins": ["*"]
      },
      "authentication": {
        "provider": "StaticWebApps"
      },
      "mode": "development"
    }
  },
  "entities": {
    "Products": {
      "source": {
        "object": "Products",
        "type": "table"
      },
      "rest": { "enabled": true },
      "permissions": [
        {
          "role": "anonymous",
          "actions": [{ "action": "*" }]
        }
      ]
    }
  }
}

ステップ 4: API を実行してテストする

次のようにして API を起動します。

dab start

次のような出力が表示されます。

Now listening on: http://localhost:5000

Swagger UI でエンドポイントをテストするには、http://localhost:5000/swagger/index.htmlにアクセスしてください。

ステップ5: App Builderに接続する

API が公開され、Swagger が有効になったので、簡単にApp Builderに取り込むことができます。

このステップバイステップガイドに従ってください

トラブルシューティングのヒント

問題	解決
🔄 CORS の問題	your `host.cors`セクションに追加`"origins": ["*"]`
❌ DELETE が機能しない	if `"permissions": "anonymous:*"` includesを確認する`DELETE`
🔐 認証の問題	接続文字列が正しい認証方法を使用していることを確認します
🧩 フォーム CRUD がありません	フォームコンポーネントには OpenAPI からさらに多くのものが必要 — 進行中
🔑 OIDCが必要ですか?	OpenID Connect GitHub の問題を追跡する