openapi：搭建部署 swagger-ui/swagger-editor
主機環境：Centos 7.2
[root@test1280 ~]# cat /etc/redhat-release
CentOS Linux release 7.2.1511 (Core)
[root@test1280 ~]# uname -a
Linux test1280 3.10.0-327.el7.x86_64 #1 SMP Thu Nov 19 22:10:57 UTC 2015 x86_64 x86_64 x86_64 GNU/Linux
[root@test1280 ~]# npm -v
3.10.10
[root@test1280 ~]# node -v
v6.17.1
[root@test1280 ~]# openssl version
OpenSSL 1.0.2k-fips 26 Jan 2017
搭建部署：
1.下載 swagger-ui/swagger-editor 源碼
git clone https://github.com/swagger-api/swagger-ui
git clone https://github.com/swagger-api/swagger-editor
注：可以從github上下載歷史發佈版本：
- https://github.com/swagger-api/swagger-ui/releases
- https://github.com/swagger-api/swagger-editor/releases
我這裏下載的是：
- https://codeload.github.com/swagger-api/swagger-ui/tar.gz/v3.24.2
- https://codeload.github.com/swagger-api/swagger-editor/tar.gz/v3.7.0
[test1280@test1280 ~]$ tar zxf swagger-editor-3.7.0.tar.gz
[test1280@test1280 ~]$ tar zxf swagger-ui-3.24.2.tar.gz
[test1280@test1280 ~]$ ls
swagger-editor-3.7.0 swagger-editor-3.7.0.tar.gz swagger-ui-3.24.2 swagger-ui-3.24.2.tar.gz
2.使用 http-server 做服務端
2.1) 安裝 aliyun epel 源：
[root@test1280 ~]# wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo
安裝阿里雲epel源可以參考：
https://blog.csdn.net/test1280/article/details/102886522
2.2) 安裝 npm/node：
[root@test1280 ~]# yum install -y npm
2.3) 安裝 http-server ：npm install -g http-server
如果出現錯誤：
npm: relocation error: npm: symbol SSL_set_cert_cb, version libssl.so.10 not defined in file libssl.so.10 with link time reference
請參考以下文章解決：
https://blog.csdn.net/test1280/article/details/102937023
安裝 http-server 成功：
[root@test1280 ~]# npm install -g http-server
/usr/bin/http-server -> /usr/lib/node_modules/http-server/bin/http-server
/usr/bin/hs -> /usr/lib/node_modules/http-server/bin/http-server
/usr/lib
└─┬ [email protected]
├── [email protected]
├── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
├── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ └─┬ [email protected]
│ └── [email protected]
└─┬ [email protected]
└── [email protected]
[root@test1280 ~]# which http-server
/usr/bin/http-server
2.4) 啓動 http-server
- 啓動 swagger-ui：
[test1280@test1280 ~]$ http-server -p 8081 swagger-ui-3.24.2/dist
Starting up http-server, serving swagger-ui-3.24.2/dist
Available on:
http://127.0.0.1:8081
http://192.168.75.132:8081
Hit CTRL-C to stop the server
- 啓動 swagger-editor：
[test1280@test1280 ~]$ http-server -p 8082 swagger-editor-3.7.0
Starting up http-server, serving swagger-editor-3.7.0
Available on:
http://127.0.0.1:8082
http://192.168.75.132:8082
Hit CTRL-C to stop the server
2.5) 測試
關閉防火牆：（或者開放8081、8082端口）
[root@test1280 ~]# systemctl stop firewalld.service
瀏覽器訪問：http://192.168.75.132:8081/
瀏覽器訪問：http://192.168.75.132:8082/
將自己的 swagger 接口文件由 swagger-ui 渲染顯示
最近使用 apache service-center 做微服務註冊、發現中心，以 service-center 爲例：
service-center 的契約接口文件有 v3.yaml 和 v4.yaml 兩種：
- https://github.com/apache/servicecomb-service-center/blob/master/server/core/swagger/v3.yaml
- https://github.com/apache/servicecomb-service-center/blob/master/server/core/swagger/v4.yaml
將其下載到本地，上傳到 swagger-ui-3.24.2/dist 目錄下：
在瀏覽器中訪問 swagger-ui 的地址，然後查詢 v3.yaml 和 v4.yaml：
已經能渲染我們的接口文件啦！
將 http-server 啓動在後臺
[test1280@test1280 ~]$ nohup http-server -p 8082 swagger-editor-3.7.0 > swagger-editor.log 2>&1 &
[1] 40593
[test1280@test1280 ~]$ nohup http-server -p 8081 swagger-ui-3.24.2/dist > swagger-ui.log 2>&1 &
[2] 40614
這樣當我們關閉終端，http-server 也不會終止，仍能提供服務。
使用 nginx 做服務端
1.安裝 nginx，請參考：
https://blog.csdn.net/test1280/article/details/102876730
2.修改 nginx 配置文件：
$HOME/nginx/conf/nginx.conf
server {
listen 8083;
server_name localhost;
location / {
root /home/test1280/swagger-ui-3.24.2/dist;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
server {
listen 8084;
server_name localhost;
location / {
root /home/test1280/swagger-editor-3.7.0;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
3.啓動 nginx
nginx -c $HOME/nginx/conf/nginx.conf
4.渲染
參考：
1.https://swagger.io/
2.https://swagger.io/tools/swagger-ui/
3.https://swagger.io/tools/swagger-editor/
4.https://github.com/swagger-api/swagger-ui
5.https://github.com/swagger-api/swagger-editor
6.https://nodejs.org/dist/