App BuilderをMicrosoftのData API Builderと連携させる
データベースに素早く接続して、フル機能のアプリを構築したいですか？このガイドでは、App BuilderをMicrosoftのData API Builderと連携させる方法をご紹介します。
Zdravko Kolev 1min read データベースをApp Builderに素早く接続して、REST APIを使用したフル機能のアプリを構築したいですか？このガイドでは、Microsoftの Data API Builder（DAB）を使用して、サポートされているデータベース（SQL Server、MySQL、PostgreSQL、その他）から REST APIを作成し、それを直接 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ツールを使用して、データベースを構築してください。
この例では、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テーブルの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
http://localhost:5000/swagger/index.html にアクセスして、Swagger UI でエンドポイントをテストしてください。
ステップ5：App Builderに接続する
APIがライブになり、Swaggerが有効になったので、App Builderにそれを簡単に組み込むことができます。
トラブルシューティングのコツ
問題
解決方法
🔄 CORS の問題
host.cors セクションに "origins": ["*"] を追加してください
❌ DELETE が機能しない
"permissions": "anonymous:*" に DELETE が含まれているか確認してください
🔐 認証の問題
接続文字列が正しい認証方法を使用していることを確認してください
🧩 フォーム CRUD が見つからない
フォームコンポーネントには OpenAPI からの詳細情報が必要です - 進行中です
🔑 OIDC が必要ですか？
OpenID Connect GitHub の問題を追跡してください
まとめ
わずか数ステップで、データベースから REST APIを構築してテストし、App Builderに接続しました。レガシーデータベースを扱うにせよ、新しく始めるにせよ、Data API Builder は迅速に進むのを助け、App Builder があなたのフロントエンドを実現します。
Data API Builderを使用してデータベース統合をシームレスに処理する方法を確認するために、ウェビナーを視聴できます。
追加リソース
ウェブ開発
App Builder Data API Builder データベース ローコード ローコード開発 REST API
