次の方法で共有


CRUD API をシミュレートする

アプリをビルドするときは、バックエンド API と対話することが多いです。 これらの API がまだ使用できない場合や、他のチームが最新の要件を満たすように API を更新している場合があります。 待機を回避するには、通常、必要なデータを返すモック API を作成します。 この方法ではブロックが解除されますが、最終的には実際の API に置き換える API の構築に時間を費やす必要があります。 時間の無駄を避けるために、開発プロキシを使用して CRUD API をシミュレートし、開発を高速化できます。

CrudApiPlugin使用すると、メモリ内データ ストアを使用して CRUD (作成、読み取り、更新、削除) API をシミュレートできます。 単純な構成ファイルを使用すると、モック API でサポートされる URL と、それが返すデータを定義できます。 このプラグインでは、クライアント側アプリケーションからのクロスドメイン使用に対する CORS もサポートされています。

MockResponsePluginでは静的モック応答を定義できます。では、 を使用して、データを操作し、CrudApiPluginモック データ セットに反映された変更を確認するために使用できる動的モック API を定義できます。

シナリオ

たとえば、ユーザーが顧客を管理できるアプリを構築しているとします。 データを取得するには、バックエンド API のエンドポイントを /customers 呼び出す必要があります。 バックエンド チームが作業を完了するのを待つのを避けるために、Dev Proxy を使用して API をシミュレートし、必要なデータを返します。

まず、 を有効にし、ファイルを CrudApiPlugin 使用 customers-api.json するように構成します。

{
  "name": "CrudApiPlugin",
  "enabled": true,
  "pluginPath": "~appFolder/plugins/dev-proxy-plugins.dll",
  "configSection": "customersApi"
}
{
  "customersApi": {
    "apiFile": "customers-api.json"
  }
}

ファイルでは customers-api.json 、モック顧客 API を定義します。

{
  "$schema": "https://raw.githubusercontent.com/microsoft/dev-proxy/main/schemas/v0.14.1/crudapiplugin.schema.json",
  "baseUrl": "https://api.contoso.com/v1/customers",
  "dataFile": "customers-data.json",
  "actions": [
    {
      "action": "getAll"
    },
    {
      "action": "getOne",
      "url": "/{customer-id}",
      "query": "$.[?(@.id == {customer-id})]"
    },
    {
      "action": "create"
    },
    {
      "action": "merge",
      "url": "/{customer-id}",
      "query": "$.[?(@.id == {customer-id})]"
    },
    {
      "action": "delete",
      "url": "/{customer-id}",
      "query": "$.[?(@.id == {customer-id})]"
    }
  ]
}

プロパティでは baseUrl 、モック API のベース URL を定義します。 プロパティでは dataFile 、モック顧客データを含むファイルを定義します。 プロパティでは actions 、サポートされているアクションと、それらが HTTP メソッドと URL にどのようにマップされるかを定義します。 API を使用して以下を行う必要があります。

  • を呼び出して、すべての顧客を取得します。 GET /v1/customers
  • を呼び出すことによって、単一の顧客を取得する GET /v1/customers/{customer-id}
  • を呼び出 POST /v1/customersして、新しい顧客を追加します。
  • を呼び出 PATCH /v1/customers/{customer-id}して顧客を更新する
  • を呼び出して顧客を削除する DELETE /v1/customers/{customer-id}

URL では、 パラメーターを {customer-id} 使用します。このパラメーターは、プラグインが URL の実際の顧客 ID に置き換えます。 また、このプラグインでは、 {customer-id} JSONPath クエリの パラメーターを使用して、データ ファイル内の顧客を検索します。

ファイルでは customers-data.json 、モック顧客データを定義します。

[
  {
    "id": 1,
    "name": "Contoso",
    "address": "4567 Main St Buffalo, NY 98052"
  },
  {
    "id": 2,
    "name": "Fabrikam",
    "address": "4567 Main St Buffalo, NY 98052"
  }
]

開発プロキシを起動し、エンドポイントを https://api.contoso.com/v1/customers 呼び出します。 Dev Proxy は要求をインターセプトし、モック顧客データを返します。

[
  {
    "id": 1,
    "name": "Contoso",
    "address": "4567 Main St Buffalo, NY 98052"
  },
  {
    "id": 2,
    "name": "Fabrikam",
    "address": "4567 Main St Buffalo, NY 98052"
  }
]

次のステップ

CrudApiPlugin の詳細については、こちらを参照してください。

サンプル

関連する Dev Proxy のサンプルも参照してください。