用Docker轻松搭建Swagger环境

lxf2023-05-14 01:28:55

用Docker轻松搭建Swagger环境

概要

我将介绍如何构建运行在 Docker 上的 Swagger 环境。

成果

Swagger Editor

网页的左侧是编辑器,右侧是Swagger UI,可以实时查看notation和查看定义文档。 如果将稍后描述的示例复制并粘贴到左侧,结果将显示在右侧,所以请尝试一下。

用Docker轻松搭建Swagger环境

Swagger UI

用Docker轻松搭建Swagger环境

API

访问网址:http://localhost:8003/users

[{"id":100,"name":"Taro","status":"pending"}]

测试环境

  • macOS Big Sur 11.4
  • Docker 20.10.7
  • Docker Compose version v2.0.0-beta.6

所需文件

这次只准备了以下2个文件!

.
├── api
│   └── openapi.yaml
└── docker-compose.yml

步骤

1.创建docker-compose.yml

这一次,我们将为 swagger 编辑器、UI 和 API 模拟准备容器。

version: '3.9'

services:
  swagger-editor:
    image: swaggerapi/swagger-editor
    container_name: "swagger-editor"
    ports:
      - "8001:8080"

  swagger-ui:
    image: swaggerapi/swagger-ui
    container_name: "swagger-ui"
    ports:
      - "8002:8080"
    volumes:
      - ./api/openapi.yaml:/openapi.yaml
    environment:
      SWAGGER_JSON: /openapi.yaml

  swagger-api:
    image: stoplight/prism:3
    container_name: "swagger-api"
    ports:
      - "8003:4010"
    command: mock -h 0.0.0.0 /openapi.yaml
    volumes:
      - ./api/openapi.yaml:/openapi.yaml

2.创建openapi.yaml

为示例准备 API 设计文档。 基于此

openapi: 3.0.0
info:
  version: 1.0.0
  title: Sample API
  description: >-
    A sample API that uses a sample-site as an example to demonstrate features in
    the OpenAPI 3.0 specification
servers:
  - url: 'http://localhost:8003'
paths:
  /users:
    get:
      description: >
        Returns all users
      operationId: findUsers
      parameters:
        - name: tags
          in: query
          description: tags to filter by
          required: false
          style: form
          schema:
            type: array
            items:
              type: string
        - name: limit
          in: query
          description: maximum number of results to return
          required: false
          schema:
            type: integer
            format: int32
      responses:
        '200':
          description: user response
          content:
            application/json:
              schema:
                type: array
                items:
                  $ref: '#/components/schemas/User'
        default:
          description: unexpected error
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Error'
components:
  schemas:
    User:
      type: "object"
      required:
        - "name"
      properties:
        id:
          type: "integer"
          format: "int64"
          example: 100
        name:
          type: "string"
          example: "Taro"
        status:
          type: "string"
          description: "user status"
          enum:
            - "pending"
            - "active"
            - "inactive"
    Error:
      type: "object"
      properties:
        code:
          type: "integer"
          format: "int32"
        type:
          type: "string"
        message:
          type: "string"
externalDocs:
  description: "Find out more about Swagger"
  url: "http://swagger.io"

启动

docker-compose up -d

确认用URL

名称网址
Swagger Editorhttp://localhost:8001/
Swagger UIhttp://localhost:8002/
Swagger API 模拟访问http://localhost:8003/users

参考资料

  • OpenAPI (Swagger) 超入門
  • Swagger OpenAPIでAPI Referenceを書く

原文

翻译自:DockerでSwagger環境簡単構築!

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中,您可以学习到最新的前端开发技术,了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例,让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件,帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化,可以帮助您节省时间和精力,提升开发效率。 除此之外,本网站还拥有一个活跃的社区,您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信,社区的力量可以帮助您更好地成长和进步。 在本网站中,您可以找到您需要的一切前端开发资源,让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭,一起探索前端开发的无限可能!