---
# System prepended metadata

title: 自行建立 Swagger server
tags: [build, Swagger-ui]

---

自行建立 Swagger server
===

[TOC]

## 前置
> 目錄準備
```bash=
$ pwd
/home/zong/data

# clone ui code and cp dist file into self file
$ git clone https://github.com/swagger-api/swagger-ui.git
$ ls 
swagger-ui
# 建立自己的api 目錄
$ mkdir swagger-doc
$ ls 
swagger-ui swagger-doc
$ cp swagger-ui/dist/* swagger-doc
$ cd swagger-doc
$ pwd
/home/zong/data/swagger-doc

```
## docker 建置
1. 拉 swagger-ui 的 image 
2. local 目錄 mount container 的 /usr/share/nginx/html 目錄
3. 指定 8001 對應 container 內的 8080 port
```bash=
# 拉 image
$ docker pull swaggerapi/swagger-ui
$ docker run -p 8001:8080 -v ~/data/swagger-doc:/usr/share/nginx/html -d swaggerapi/swagger-ui
```
## 目錄結構與相關檔案
![](https://i.imgur.com/luXcLGz.png)

index.html
```htmlmixed=
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>API目錄</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/markdown-it/8.3.2/markdown-it.js"></script>
<script>
  window.searchMap = location.search.substr(1).split('&').reduce(function(r, it) {
    var them = it.split('='); r[them[0]] = them[1]; return r;
  }, {});
  $.ajaxSetup({async: false});
</script>
</head>
<body style='width:70%; margin: auto;'>

<div class="markdown-html"><script>$.get("markdown/index.md", function(text) { document.write(markdownit().render(text)); });</script></div>
</body>
</html>
```

index.md
```mediawiki=
| Name | link | Note |
| -------- | -------- | -------- |
| 會員中心 | [member_center.html](/api/member_center.html)     | 2019-10-28     |
```
member_center.html
```htmlmixed=
<!-- 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="../swagger-ui.css" >
    <link rel="icon" type="image/png" href="../favicon-32x32.png" sizes="32x32" />
    <link rel="icon" type="image/png" href="../favicon-16x16.png" sizes="16x16" />
    <style>
      html
      {
        box-sizing: border-box;
        overflow: -moz-scrollbars-vertical;
        overflow-y: scroll;
      }

      *,
      *:before,
      *:after
      {
        box-sizing: inherit;
      }

      body
      {
        margin:0;
        background: #fafafa;
      }
    </style>
  </head>

  <body>
    <div id="swagger-ui"></div>

    <script src="../swagger-ui-bundle.js"> </script>
    <script src="../swagger-ui-standalone-preset.js"> </script>
    <script>
    window.onload = function() {
      var url = "doc/member_center.yaml";
      // Begin Swagger UI call region
      const ui = SwaggerUIBundle({
        url: url,
        "dom_id": "#swagger-ui",
        deepLinking: true,
        presets: [
          SwaggerUIBundle.presets.apis,
          SwaggerUIStandalonePreset
        ],
        plugins: [
          SwaggerUIBundle.plugins.DownloadUrl
        ],
        layout: "StandaloneLayout",
      })
      
      
      // End Swagger UI call region



      window.ui = ui
    }
  </script>
  </body>
</html>

```

## Issue - cached 問題
- nginx 那邊有 cached 問題
- 加入設定把 cached 設定為 no-cached
![](https://i.imgur.com/ulktZBJ.png)

```
// 決定可以儲存response的快取是哪種
// 是私有的 private cache (eg.瀏覽器快取 )
// 還是公用的 shared cache (如： CDN )
public : response可被任何共用、私有快取儲存
private : respone只能被私有快取儲存，共用快取不行，通常用於個人敏感資料
// 可不可以存快取
no-store : request和response的內容都完全不存，每次都要從server拿資源
no-cache : 可以存快取，但使用快取前每次都要送request 問server，server沒有更新的檔案版本才可以用
// 新鮮度
max-age : 指定從目前請求開始，允許擷取的回應重複使用的最長時間 (單位為秒)
```

![](https://i.imgur.com/T0ZfM71.png)


參考文件: [新手坑：讓人又愛又恨的 HTTP Caching](https://medium.com/frochu/http-caching-3382037ab06f)



---

> [name=zong xie] [time=Mon, Oct 28, 2019 4:40 PM]
###### tags: `build` `Swagger-ui`