Swagger UI 설치

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));

그 외

• swagger-to-existing-nodejs-project이 후에는 이방법을 적용하는게 맞는것같다. 스키마 정의가 있으니...