DEV/API & Swagger

Swagger 사용기

땅콩둘기 2020. 4. 21. 14:32
반응형

Swagger란?

OpenAPI Specification (OAS)를 위한 프레임워크로 Rest API로 개발시 문서를 자동으로 만들어준다.

API 코드 내 주석등으로 YAML 또는 JSON 형식을 생성하고 이를 기반으로 API Document, Server-Client를 생성해준다.

우리은행 개발자센터나 농협 개발자센터 같은 OPENAPI를 제공하고 있는 사이트의 테스트 베드를 보면 주로 Swagger를 사용하고 있다. 

Swagger UI 사용해보기

1. Swagger UI Installation

https://swagger.io/docs/open-source-tools/swagger-ui/usage/installation/

 

Swagger Documentation | Swagger

Installation Distribution channels NPM Registry We publish two modules to npm: swagger-ui and swagger-ui-dist. swagger-ui is meant for consumption by JavaScript web projects that include module bundlers, such as Webpack, Browserify, and Rollup. Its main fi

swagger.io

위 사이트에 보면 NPM, Docker, unpkg 사용법이 나와 있다.

그러나 UI 테스트만 해볼것이므로 github에서 다운받아서 사용했다.

https://github.com/swagger-api/swagger-ui

 

swagger-api/swagger-ui

Swagger UI is a collection of HTML, Javascript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API. - swagger-api/swagger-ui

github.com

2. 다운받은 swagger-ui에서 /dist만으로도 ui를 사용할 수 있다.

dist 폴더 내부

3. 간단한 테스트를 위해 Swagger Editor로 json 을 수정해본다.

https://editor.swagger.io/?_ga=2.1984561.168247503.1587428457-846846953.1587428457

 

Swagger Editor

 

editor.swagger.io

4. 수정한 json 파일을 dist 폴더 아래에 위치해주고 index.html에서 url 부분을 수정해준다.

  window.onload = function() {
      // Begin Swagger UI call region
      const ui = SwaggerUIBundle({
        url: "./swagger.json",
        dom_id: '#swagger-ui',
        deepLinking: true,
        presets: [
          SwaggerUIBundle.presets.apis,
          SwaggerUIStandalonePreset
        ],
        plugins: [
          SwaggerUIBundle.plugins.DownloadUrl
        ],
      requestInterceptor: requestInterceptor
      });

5. 웹서버를 띄워서 실행해본다.

 

실행 화면

끝

반응형