お問い合わせ
swaggerのyamlファイルからhtmlを生成する
投稿日:2023-09-12
@prompta
(株)ブロックセブンスソフトウェア
typeScript
NestJs
Swagger

# 概要

nest swaggerなどでswagger用のyamlファイルを生成後swaggerUIのHTMLファイルとして再度出力
する方法を紹介します。

# swaggerUIのyamlファイルとして生成する

main.tsを変更する

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger';
import * as bodyParser from 'body-parser';
import { ConfigService } from '@nestjs/config';
import * as fs from 'fs';
import { dump } from 'js-yaml';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  const configService = app.get<ConfigService>(ConfigService);
  // 本番環境では出力されない様に制限
  if (configService.get<string>('NODE_ENV') === 'development') {
    const config = new DocumentBuilder()
      .setTitle('SAMPLE API')
      .setDescription('SAMPLE API')
      .setVersion('1.0'
      .addBearerAuth(
        {
          type: 'http',
          scheme: 'bearer',
          name: 'TOKEN',
          description: 'Enter  token',
          in: 'header',
        },
        'token',
      )
      .build();
    const document = SwaggerModule.createDocument(app, config);
    SwaggerModule.setup('api', app, document);
    // yamlファイルとして出力する
    fs.writeFileSync('./swagger-spec.yaml', dump(document, {}));
  }
  app.enableCors();
  await app.listen(3000);
}
bootstrap();

これでswagger-spec.yamlが生成されます。

# ファイルをhtmlに変換する

例えば以下の様なymlファイルを
swagger-spec.yaml

openapi: 3.0.0
info:
  title: Sample API
  description: サンプル用のswagger yamlファイル.
  version: 0.1.9
servers:
  - url: http://localhost/v1
    description: Optional server description, e.g. Main (production) server
  - url: http://staging-api.example.com
    description: Optional server description, e.g. Internal staging server for testing
paths:
  /users:
    get:
      summary: ユーザー一覧を返却するAPI.
      description: ユーザー一覧をjson形式で出力する
      responses:
        '200':    # status code
          description: Json形式のユーザー一覧
          content:
            application/json:
              schema: 
                type: array
                items: 
                  type: string

以下のdockerコンテナを使用してhtmlを生成します。

docker run --rm -i yousan/swagger-yaml-to-html < ./swagger-spec.yaml > sample.html

*dockerが必要なのでない場合は追加でインストールしてください。

# 出力ファイル

出力されるファイルはこのようなファイルになります。
sample.html