如何在 AWS 中启用 Swagger UI答案

【问题标题】：How to enable swagger UI in AWS如何在 AWS 中启用 Swagger UI
【发布时间】：2020-05-27 19:09:09
【问题描述】：

我使用 .Net 核心创建了无服务器应用程序并托管在 AWS 中。我可以通过在 API 网关下发布 API 文档来创建 swagger.json。

我正在寻找为这些 API 创建 Swagger UI 的文档。是否有可能在 AWS 本身中查看 swagger UI。

【问题讨论】：

你找到spultuon了吗？

标签： amazon-web-services aws-lambda asp.net-core-2.0 aws-api-gateway

【解决方案1】：

我不认为 AWS 在他们的一项服务中构建了一个招摇的 UI。至少，我不知道。

但是，可以使用 S3 轻松创建一个大张旗鼓的可视化。
有一篇关于 Medium 的文章很好地解释了这一点。 [1]

基本上，您需要编写的脚本是：

使用静态网站托管创建 S3 存储桶
从 GitHub 下载静态 swagger UI 资源
将资源同步到 S3 存储桶
从 API Gateway [2] 下载 swagger.json
将 swagger.json 上传到 S3
修改 index.html 以指向您的 swagger.json

Medium 文章中详细介绍了这些步骤。 [1]

参考文献

[1]https://medium.com/nirman-tech-blog/swagger-ui-for-aws-api-gateway-endpoints-a667f25f5a4b
[2]https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-export-api.html

【讨论】：

【解决方案2】：

您可以轻松地在 S3 中托管自包含的 swagger-UI 网站。

这里是一个例子：https://iris-fhir-server.s3.amazonaws.com/swagger-ui.html

Github：https://github.com/intersystems-community/Swagger-IRIS-FHIR

本质上是您的 OpenAPI yaml 或 json 文件加上单个 HTML 页面，例如：

<!-- HTML for static distribution bundle build -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Swagger UI</title>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/swagger-ui-dist@3/swagger-ui.css" >
    <style>
      html
      {
        box-sizing: border-box;
        overflow: -moz-scrollbars-vertical;
        overflow-y: scroll;
      }    
      *,
      *:before,
      *:after
      {
        box-sizing: inherit;
      }

      body
      {
        margin:0;
        background: #fafafa;
      }
      .errors-wrapper {
         display: none !IMPORTANT;
      }
    </style>
  </head>    
  <body>
    <div id="swagger-ui"></div>    
    <script src="https://unpkg.com/swagger-ui-dist@3/swagger-ui-bundle.js"> </script>
    <script src="https://unpkg.com/swagger-ui-dist@3/swagger-ui-standalone-preset.js"> </script>    <script>
    window.onload = function() {          
      // Begin Swagger UI call region
      const ui = SwaggerUIBundle({
        "dom_id": "#swagger-ui",
        deepLinking: true,
        presets: [
          SwaggerUIBundle.presets.apis,
          SwaggerUIStandalonePreset
        ],
        plugins: [
          SwaggerUIBundle.plugins.DownloadUrl
        ],
        layout: "StandaloneLayout",
        validatorUrl: "https://validator.swagger.io/validator",
        //url: "https://iris-fhir-server.s3.amazonaws.com/openapi/Patient.yml",
        urls: [
          {url: "https://iris-fhir-server.s3.amazonaws.com/openapi/Organization.yml", name: "Organization"},
          {url: "https://iris-fhir-server.s3.amazonaws.com/openapi/Patient.yml", name: "Patient"},
          {url: "https://iris-fhir-server.s3.amazonaws.com/openapi/Practitioner.yml", name: "Practitioner"},
          {url: "https://iris-fhir-server.s3.amazonaws.com/openapi/Condition.yml", name: "Condition"},
          {url: "https://iris-fhir-server.s3.amazonaws.com/openapi/Medication.yml", name: "Medication"},
          {url: "https://iris-fhir-server.s3.amazonaws.com/openapi/Observation.yml", name: "Observation"}              
        ],
        "urls.primaryName": "Patient"
      })
      window.ui = ui
    }
  </script>
  </body>
</html>

【讨论】：