本地启动Swagger-ui查看Swagger导出的Json文件

当我们获取项目中其他小伙伴给出的Swagger导出的API定义Json文件时，本地缺少查看环境直接使用文本编辑器打开是一件十分痛苦的事情。在这里我将带你用git, node和npm带你快速搭建本地服务，查看swagger导出的json文件。

依赖

git - 任何版本的git都可以，用于从github拉取最新的swagger-ui程式

Npm - 6.x 以上版本

使用官方推荐列表中的node.js版本会更具有稳定性。

安装

这里我更推荐使用homebrew去安装git与node, npm。

1. 首先，我们需要安装homebrew，通过官方网站提供的安装方式：

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

或者通过mac自带的ruby：

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

或者指定ruby路径：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

来实现homebrew的安装。

2. 接下来可以通过homebrew安装git：

brew update
brew install git

成功安装git后可以通过git --version命令查看git是否成功安装。

3. 通过homebrew安装node和npm:

brew update
brew install node

成功安装后可以通过node -v和npm -v来检查是否成功安装。

4. 安装swagger-ui并启动

通过git拉取swagger-ui代码并启动项目：

git clone https://github.com/swagger-api/swagger-ui.git
cd swagger-ui
npm install
npm run dev

稍后可以看到启动成功的标示，并且打开http://localhost:3200/ 就能看到本地启动的swagger-ui服务

5. 安装http-server并在swagger-ui中查看

我们看到在swagger-ui中查看的json原地址必须是在服务器中提供了web-server可以查看的json地址，为了实现本地查看，需要在本地启动web server。

这里推荐直接使用http-server：

npm install --global http-server

接下来进入到需要查看的json文件的目录中，假设我们要查看/path/Downloads/swagger.json文件，那么执行：

cd /path/Downloads/
http-server --cors

这样就可以在本地启动http-server。

在Swagger-ui页面中输入：http://localhost:8080/swagger.json 便可以查看我们需要的swagger文件。