• openapi-generator-github
  • openapi-generator
  • swagger-editor가 Visual Studio Code Editor에서도 사용이 가능하다.
  • MS에서 codewind OpenAPI Tools
  • Openapi-lint
  • OpenAPI Preview
  • OpenAPI (swagger) Editor
  • ..

swagger Editor 이런거 다 설치할 필요가 없다... MS에서 만든 codewind OpenAPI Tools만 설치하면 openapi generator의 docker도 받고 preview도 되고, OpenAPI Editor를 설치하면 왼쪽에 따로 창이 떠서 yaml의 코드에서 어떤 위치에 정의되어있는지 전부다 나온다. 이게 짱이네... 그리고 추가로 MS에서 제공하는 Codewind OpenAPI Tools은 YARM 2.0 -> 3.0으로, yaml의 파일을 json으로 만들어주고 server, client 코드까지 다 만들어준다. Swagger 공홈가서 받고 그런삽질 안해도 된다.ㅠㅠㅠ

  • swagger-ui는 client를 구현하는 개발자에게 제공되면 매우 유용하다. postman에 APIs를 사전에 저장하고 불러올수있지만 문서화가 되진 않는다.
  • swagger-ui-github에서 다운이 가능하다.
  • swagger UI 버전에따라 OpenAPI Spec compatibility가 정해진다 3.18.3을 살펴보면 OpenAPI 3.0이 가능하다.
  • swagger-ui는 3가지를 제공하는데
    • swagger-ui
    • swagger-ui-dist
    • swagger-ui-react
  • 이중에 강력하게 swagger-ui를 추천한다고 한다. swagger-ui-dist는 single-page application을 개발할때 상당히 크기 때문에
  • swagger-uiswagger-editor를 설치하고 generateServer를 해서 코드를 생성했다면 추가로 설치할 필요가 없다.
    • swagger-editor로 생성된 코드의 프로젝트는 다음 github을 확인
  • http://localhost:8080/docs/
  • 위 코드 clone하고 실행하면 http://localhost:8080/docs/ 에 접속하면

  • Swagger Editor는 말그대로 OpenAPI를 온라인을 통해 작성하는 Editor이다. Swagger Editor는 cloud에서 작업을 할 수 있고,Swagger Editor를 다운받아서 사용이 가능하다. swagger editor
  • swagger-editor-github에서 다운받아서 사용이 가능
  • Docker로 제공하니 감사 swagger-editor#docker
docker pull swaggerapi/swagger-editor
docker run -d -p 80:8080 swaggerapi/swagger-editor
  • http://localhost:80에 들어가면 swagger Editor가 동작한다!

  • swagger 2.0openapi 3.0.1의 Editor를 제공하니 변경해서 사용이 가능

  • Swagger Editor에서 Generate Client에서 javascript코드를 생성하면 아래와 같이 프로젝트가 생성된다.

swagger에 대한 설치 및 이슈에 대해서 정리를 했었는데, 생각보다 쉽지 않은것 같다. swagger의 서버를 별도로 띄워서 사용하는게 이상한것 같고.. (별도의 서버가 있는데) 역시 공홈에 있는 문서를 읽는게 좋은것 같아서 이제는 공홈으로 왔다.

https://swagger.io/

swagger의 공홈을와서 Tools를 보면 총 3가지를 제공한다

  • Swagger Codegen
  • Swagger Editor
  • Swagger Ui

swagger를 하나 떡! 설치하면 모든게 해결되는게 아니라는 사실을 여기서 느꼈다. 각각의 tool에 대해서 알아볼 필요가 있다고 생각한다. postman과 같이 APIs를 정리해놓을수 있지만, APIs의 서버를 만드는이상 APIs의 문서화는 필수라고 생각 (배보다 배꼽이 더 커보이지만 일단은 시작을 해보는게 좋을것 같아서! 아니면 지금 알아놓고 아니다 싶으면 다음에 하면 되니까!)

Swagger Codegen

  • server stubs client SDKs를 생성할수 있게 해준다.
  • 한마디로 OpenAPI(swagger에서 정의한)를 생성해놓고 개발팀은 그에 맞는 포맷으로 개발에 포커싱이 가능하다.
  • 여기서 Available Clients, Avaliable Servers에 대해 나와있는데 각각의 프로젝트에서는 Codegen이 가능하다는 말!
  • 약간 google protobuf와 같은 느낌같다 지금까지는... proto같이 파일을 정의하고 읽고, 쓰는 코드를 생성해주는?
  • 일단 nodejs-server와 javascript가 가능하니 (현재 nodejs와 react를 사용할 예정이니)
  • cloud에서도 제공을 하는데, SwaggerHub의 경우 14일만 사용이 가능하고 그 이후에는 유료버전으로 변경된다. (unlock이 그 의미가 맞겠지요)

  • 처음 시작하면 Create a New API, Import an API가 있다.
  • 들어가보면 특정 사용자들이 데모로 생성한 APIs도 확인이 가능하다. (그냥 데모 테스트할때 사용하면 좋을듯?)

  • 정말 신세계구나... 이렇게 API를 만들어서.
  • Template에는 Oauth 2.0, Simple 등등이 있음
  • 참고로 public이 아니고 private으로 하면 계정을 upgrade 해야한다 (돈을 내라는거지)

  • 이렇게 API가 어떤게 있고, Editor가 있다... 참 신기하다 이런게 있단.

  • 이렇게 생성되고 나면 오른쪽 위에 Export가 있는데 여기서 이제 Client SDK, Server Stub을 자동으로 생성해준다.!!! Postman에서도 API를 호출하는 코드 생성도 너무 편리하게 사용했는데 여기서는 Server Stub까지 생성해주는구나..
  • 참고로 Document를 다운받으면 html의 파일로 APIs 문서를 생성해준다.
  • 실제로 Client SDK를 다운받으려 하는데 javascript는 없는데?
  • 찾아보니 swagger-codegen generate의 CLI로 javascript코드 생성이 가능하다.
swagger-codegen generate \
  --input-spec http://petstore.swagger.io/v2/swagger.json \
  --lang javascript \
  --output . \
  --template-dir ./modules/swagger-codegen/src/main/resources/Javascript/es6 \
  --additional-properties usePromises=true,useES6=true

swagger-codegen-github

  • 훌륭하게도 swagger-codegenopensource이다. 설치해서 사용하면 위에 호스팅을 자신의 서버에서 실행이 가능하다.
  • 현재 버전 2.x와 3.x를 제공하는데 다른 브랜치에서 제공하니 원하는 버전을 사용하면 될것 같음
  • 다른 패키지 설치 할필요없이 docker를 이용하자 code-gen-docker
  • /gen/out아래 output이 생성
git clone https://github.com/swagger-api/swagger-codegen
cd swagger-codegen
./run-in-docker.sh mvn package


./run-in-docker.sh help # Executes 'help' command for swagger-codegen-cli
./run-in-docker.sh langs # Executes 'langs' command for swagger-codegen-cli
./run-in-docker.sh /gen/bin/go-petstore.sh  # Builds the Go client
./run-in-docker.sh generate -i modules/swagger-codegen/src/test/resources/2_0/petstore.yaml \
    -l go -o /gen/out/go-petstore -DpackageName=petstore # generates go client, outputs locally to ./out/go-petstore 
  • 참고로 이렇게 설치하면 cli 툴만 설치했음, Hub에서 있었던 Editor는 따로 설치해야 한다.

swagger-ui-github

설치 #

  • swagger-ui, swagger-ui-dist를 npm을 통해 제공을 한다.
  • $ npm install swagger-ui-dist로 설치
  • $ npm install swagger-ui를 설치
  • Note: we suggest using swagger-ui when your tooling makes it possible, as swagger-ui-dist will result in more code going across the wire.

swagger-ui

  • npm으로 설치하면 node_modules/swagger-ui/dist폴더에 html의 파일이 저장되서 routing만 하면 된다.
import SwaggerUI from 'swagger-ui'
// or use require, if you prefer
const SwaggerUI = require('swagger-ui')
SwaggerUI({
  dom_id: '#myDomId'
})
  • 근데 이해가... 이게 어떻게 동작하지..
Project restarted. Files changed:  [ '/Users/direcision/Desktop/ToyProjects/web/server/swagger/app.js' ]
/Users/direcision/Desktop/ToyProjects/web/server/swagger/node_modules/swagger-ui/dist/swagger-ui.js:1
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.SwaggerUICore=t():e.SwaggerUICore=t()}(window,function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){retu

ReferenceError: window is not defined
    at Object.<anonymous> (/Users/direcision/Desktop/ToyProjects/web/server/swagger/node_modules/swagger-ui/dist/swagger-ui.js:1:208)
    at Module._compile (internal/modules/cjs/loader.js:955:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Module.require (internal/modules/cjs/loader.js:848:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/Users/direcision/Desktop/ToyProjects/web/server/swagger/app.js:6:19)
    at Module._compile (internal/modules/cjs/loader.js:955:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
  • 이런 에러가 뜨는데.. 음

swagger-ui-dist

  • swagger-ui-dist를 설치하면 아래와 같이 코드만 추가하면 바로 사용이 가능
const express = require('express')
const pathToSwaggerUi = require('swagger-ui-dist').absolutePath()

const app = express()

app.use(express.static(pathToSwaggerUi))

app.listen(3000)

swagger-ui-express #

  • swagger-ui-express를 설치하면 swagger-ui를 express를 통해서.. 가능하구나
    $ npm install swagger-ui-express
    $ npm install swagger-jsdoc
const swaggerJSDoc = require('swagger-jsdoc');
const swaggerUi = require('swagger-ui-express');


// Swagger definition
// You can set every attribute except paths and swagger
// https://github.com/swagger-api/swagger-spec/blob/master/versions/2.0.md
const swaggerDefinition = {
  info: { // API informations (required)
    title: 'Auth Service', // Title (required)
    version: '1.0.0', // Version (required)
    description: 'Auth API' // Description (optional)
  },
  host: 'localhost:3000', // Host (optional)
  basePath: '/' // Base path (optional)
};

// Options for the swagger docs
const options = {
  // Import swaggerDefinitions
  swaggerDefinition,
  // Path to the API docs
  apis: ['./routes/index.js', './users/index.js', './roles/index.js']
};

// Initialize swagger-jsdoc -> returns validated swagger spec in json format
const swaggerSpec = swaggerJSDoc(options);

const app = express();
app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerSpec));

그 외

설치

$ npm install -g swagger or sudo npm install swagger
$ swagger project create swagger
$ swagger project edit

$ swagger project create swagger

? Framework? 
  connect 
  express 
  hapi 
  restify 
❯ sails 
  • express를 선택

$ swagger project edit

  • API 문서 수정

Swagger Server 에 비즈니스 로직 추가하기

function hello(req, res) {
    var name = req.swagger.params.name.value || 'stranger';
    var hello = util.format('Hello, %s!', name);
    res.json({ "message": hello });
}

Swagger Edit에서 수정

x-swagger-router-controller에 아래와 같이 추가

    paths:
        /hello:
            x-swagger-router-controller: hello_world

이슈

설치시 이슈

  • sudo를 사용했음에도 아래와 같이 에러가 발생
  • swagger-install 을 살펴보면 npm에서 -g옵션을 사용은 설정에 따라서 사용
  • $ sudo npm install swagger 해도 실패
  • xcode install & node-gyp 을 하니 정상적으로 설치가 완료
gyp ERR! stack Error: EACCES: permission denied, mkdir '/Users/direcision/.nvm/versions/node/v12.15.0/lib/node_modules/swagger/node_modules/fsevents/.node-gyp'

Swagger 시작시에 오류

  • swagger project start를 했을때 아래와 같이 에러가 발생했다.
  • github-issue를 확인해보니 nodev12에서 생기는 에러여서 node10으로 downgrade를 하던지
  • (실패) 첫번째 방법 npm install --save swagger-router을 하라고 하는구나. 이렇게 하니까 정상적으로 실행이 되는데 음...~ 이 방법으로 하면http://127.0.0.1:10010/hello?name=Scott`으로 했을때 에러가 난다. 정상적으로 수정하는 방법이 아님. 아래 방법이 좋을듯
  • (실패) 2번째 방법 또는 nodev12에서 실행하는방법
    • swagger-express-mw의 버전이 기존에는 ^0.1.0인데 ^0.7.0으로 업데이트를 하고
      • $ npm install swagger-express-mw@0.7.0
      • swagger_params_parserswagger_controllers로 추가 (config/default.yaml에`
      • 동일하게 curl http://127.0.0.1:10010/hello?name=Scott을 실행하면 Cannot read property 에러가 발생
  • (성공) 세번째 방법으로 node_modules/bagpipes/lib/fittingTypes/user.js file을 아래와 같이 변경
    • var split = err.message.split(path.sep);
    • var split = err.message.split('\n')[0].split(path.sep);
Error: Cannot find module '/Users/direcision/Desktop/ToyProjects/web/server/swagger/api/fittings/swagger_router'
Require stack:
- /Users/direcision/Desktop/ToyProjects/web/server/swagger/node_modules/bagpipes/lib/fittingTypes/user.js
- /Users/direcision/Desktop/ToyProjects/web/server/swagger/node_modules/bagpipes/lib/bagpipes.js
- /Users/direcision/Desktop/ToyProjects/web/server/swagger/node_modules/bagpipes/lib/index.js
- /Users/direcision/Desktop/ToyProjects/web/server/swagger/node_modules/swagger-node-runner/index.js
- /Users/direcision/Desktop/ToyProjects/web/server/swagger/node_modules/swagger-express-mw/lib/index.js
- /Users/direcision/Desktop/ToyProjects/web/server/swagger/app.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
    at Function.Module._load (internal/modules/cjs/loader.js:686:27)
    at Module.require (internal/modules/cjs/loader.js:848:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at createFitting (/Users/direcision/Desktop/ToyProjects/web/server/swagger/node_modules/bagpipes/lib/fittingTypes/user.js:18:20)
    at Bagpipes.newFitting (/Users/direcision/Desktop/ToyProjects/web/server/swagger/node_modules/bagpipes/lib/bagpipes.js:158:17)
    at Bagpipes.createFitting (/Users/direcision/Desktop/ToyProjects/web/server/swagger/node_modules/bagpipes/lib/bagpipes.js:147:22)
    at Bagpipes.createPipe (/Users/direcision/Desktop/ToyProjects/web/server/swagger/node_modules/bagpipes/lib/bagpipes.js:111:19)
    at Bagpipes.getPipe (/Users/direcision/Desktop/ToyProjects/web/server/swagger/node_modules/bagpipes/lib/bagpipes.js:50:38)
    at /Users/direcision/Desktop/ToyProjects/web/server/swagger/node_modules/bagpipes/lib/bagpipes.js:34:10

+ Recent posts