다음을 통해 공유

CRUD API 시뮬레이션

  • 아티클

앱을 빌드할 때 백 엔드 API와 상호 작용하는 경우가 많습니다. 이러한 API를 아직 사용할 수 없거나 다른 팀이 최신 요구 사항을 충족하도록 업데이트하는 경우가 있습니다. 대기를 방지하기 위해 일반적으로 필요한 데이터를 반환하는 모의 API를 만듭니다. 이 방법은 차단을 해제하지만 결국 실제 API로 대체하는 API를 빌드하는 데 시간을 할애해야 합니다. 시간 낭비를 방지하기 위해 개발 프록시를 사용하여 CRUD API를 시뮬레이션하고 개발 속도를 높일 수 있습니다.

이 기능을 CrudApiPlugin사용하면 메모리 내 데이터 저장소를 사용하여 CRUD(만들기, 읽기, 업데이트, 삭제) API를 시뮬레이션할 수 있습니다. 간단한 구성 파일을 사용하여 모의 API에서 지원하는 URL과 반환되는 데이터를 정의할 수 있습니다. 또한 플러그 인은 클라이언트 쪽 애플리케이션에서 도메인 간 사용을 위해 CORS를 지원합니다.

정적 모의 MockResponsePlugin 응답을 정의할 수 있는 경우 데이터를 조작하고 모의 CrudApiPlugin 데이터 집합에 반영된 변경 내용을 확인하는 데 사용할 수 있는 동적 모의 API를 정의할 수 있습니다.

시나리오

사용자가 고객을 관리할 수 있는 앱을 빌드한다고 가정해 보겠습니다. 데이터를 얻으려면 백 엔드 API의 /customers 엔드포인트를 호출해야 합니다. 백 엔드 팀이 작업을 완료할 때까지 기다리지 않도록 개발자 프록시를 사용하여 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에서 플러그 인이 URL의 {customer-id} 실제 고객 ID로 대체되는 매개 변수를 사용합니다. 또한 플러그 인은 JSONPath 쿼리의 매개 변수를 사용하여 {customer-id} 데이터 파일에서 고객을 조회합니다.

파일에서 모의 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 . 개발자 프록시는 요청을 가로채 모의 고객 데이터를 반환합니다.

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

다음 단계

CrudApiPlugin에 대해 자세히 알아봅니다.

CrudApiPlugin

샘플

관련 개발 프록시 샘플도 참조하세요.