如何在AWS中启用Swagger UI

12

我使用 .Net Core 创建了无服务器应用,并在 AWS 上进行了托管。通过在 API 网关下发布 API 文档,我能够创建 swagger.json。

我正在寻找有关如何为这些 API 创建 swagger UI 的文档。 是否有可能在 AWS 内部查看 swagger UI。


你找到解决方案了吗? - LP13
2个回答

11
我不认为AWS在其服务中建立了一个swagger UI。至少,我不知道有这样的功能。
然而,可以使用S3轻松创建Swagger可视化界面。Medium上有一篇文章很好地解释了这一点。[1]
基本上,您需要编写的脚本包括:
- 创建带有静态网站托管的S3存储桶 - 从GitHub下载静态Swagger UI资源 - 将资源同步到S3桶 - 从API Gateway下载swagger.json文件[2] - 将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

1
您可以轻松地在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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接