Swagger에서 yaml 데이터를 받은 후 모의 만들기

Swagger.yml을 받은 후 API 모의 서버를 만들 때까지 메모를 남겨 둡니다.

↓ 이쪽의 사이트를 참고로 했습니다!

개발 효율을 높이십시오! Swagger로 만드는 WEB API 모의

① Swagger Editor의 왼쪽 편집기 화면에 swagger.yml을 올린다.

Swagger Editor는 이쪽으로부터! → Swagger Editor

디폴트로 검은 에디터에 Swagger의 기술이 되어 있으므로, 완성된 Swagger.yml의 내용을 그대로 copipe 해 붙여 넣습니다.

제 경우에는 실안건의 Swagger로 표시를 시도하고 싶었기 때문에,
localhost 용으로 조금 기술을 바꾸고 있습니다.

② 로컬 환경용으로 host 를 "localhost:3001", basePath 를 "/" 로 변경

아래 이미지와 같습니다!host 를 localhost로 하거나 basePath도 변경 필요했기 때문에 여러가지 변경했습니다.

③「Generate Server」에서 서버를 선택하여 내보내기

왼쪽 상단 탐색기에서 Generate Server를 클릭하여 내보내려는 유형을 선택한 다음 로컬로 파일을 삭제합니다.
나는 자바 스크립트를 제외하고 완전히 무지하기 때문에 웃음, "nodejs-server"를 선택했습니다.



"nodejs-server-server"폴더를 열면 ./api/swagger.yaml 는 에디터에 복사한 설명과 완전히 같은 것이 들어 있습니다!
「service」디렉토리에 있는 AdminService.js 역시 Swagger에 기술한 대로의 데이터나, 모의로 반환해 주는 Example 데이터까지 들어가 있습니다!

④ 로컬로 떨어뜨린 Swagger 디렉토리에서 $yarn install & $yarn start

나는 Swagger 호스트에 localhost:3001를 지정했으므로,
http://localhost:3001/docs/
을 열면 Swagger Editor의 오른쪽에 표시된 것처럼 문서를 볼 수 있습니다.





「Curl」내의 기술을 터미널로 두드리면, 제대로 응답되고 있는 것을 확인할 수 있습니다.

`curl -X GET --header 'Accept: application/json' --header 'Authorization: 1' 'http://localhost:3001/admin/client'`

⑤아래와 같은 에러가 나와 버려도 괜찮아! cors 라이브러리를 설치합시다!

모의를 로컬 서버로 작성할 수 있었던 것이고, 막상 비동기 처리의 테스트를 해 보자!
라고 생각해, 아래와 같이 기술해 동작을 시험해 보았습니다.

(시도하고 싶은 응용 프로그램이 React를 사용하기 때문에 axios를 사용하여 API를 호출하고 있습니다.)

아래는 발췌입니다.

import axios from 'axios'

export const handleFetchProjects = Id => async dispatch =>
  {
    const response = await axios.get(`http://localhost:3001/projects/${Id}`)
    dispatch(actions.fetchProjects(response.data, response.status))
  }

이것으로 좋고, 라고 생각했는데, 이하와 같은 에러가 나와 당황했습니다. .

Access to XMLHttpRequest at 'http://localhost:3001/admin/*****' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

에러를 해소하는데 참고로 한 사이트가 여기입니다!

참고 사이트
Swagger에서 자동 생성 된 nodejs-server에 CORS를 허용하는 방법

swagger 디렉토리에서 cors 라이브러리를 설치하고 참고 사이트대로 index.js에 cors 의 import와 app.use(cors());

$ npm install cors --save

var cors = require('cors');

app.use(cors());

그리고, 자신의 무지고에, js의 기술도 달랐던 것 같습니다.
header도 건네줄 필요가 있었으므로, 이하와 같이 재작성했습니다.

export const handleFetchProjects = Id => async dispatch =>
  {
    const response = await axios.get(`http://localhost:3001/projects/${Id}`, {
      headers: { Authorization: '1' }
    })
    dispatch(actions.fetchProjects(response.data, response.status))
  }

로컬 환경에서 Swagger-ui에서 조롱 할 수있었습니다!
특히 json 파일로 변환하거나 등의 조작도 필요 없었기 때문에 편리하다고합니다.

⑥응답의 데이터를 조금 개조하고 싶다…!

임시 데이터를 반환하는 것은 훌륭하지만 풀릭 보내면
"삭제한 날에 차이가.
Example 데이터는 1종류의 데이터를 루프 하고 있을 뿐이므로, 2개 이상의 비교를 할 수 없습니다…
그래서, null 를 직접 만나게 됩니다!
해당 부분을 찾는 것은, 페이인 나는 시간이 걸려 버렸습니다만, 이하와 같은 기술을 발견할 것입니다.

var examples = {};
examples['application/json'] = [ {
  ...
} ]

examples의 object를 예를 들면 100개로 해 보거나, 의뢰대로.

【마치고】
처음으로 swagger 만졌으므로, 앞으로 여러가지 만져 갑니다!
모의 도구는 분명 다른 것일 것입니다 ...!