Swagger Editor 主流環(huán)境安裝
1. 前言
本節(jié)會(huì)為大家介紹如何在當(dāng)下主流操作系統(tǒng)中安裝 Swagger Editor 開源 API 配置工具。
重點(diǎn)講解內(nèi)容:
-
如何基于 Node 環(huán)境安裝 Swagger Editor ;
-
如何基于 Docker 環(huán)境安裝 Swagger Editor ;
-
Swagger Editor 安裝是否成功的必要性測(cè)試。
2. 如何基于 Node 環(huán)境安裝 Swagger Editor
基于 Node 環(huán)境來安裝 Swagger Editor ,是 Swagger Editor 官方推薦使用的第一種方式,通過 Node 來安裝 Swagger Editor ,無論是 Windows 系統(tǒng)還是 OS X 系統(tǒng),都要求電腦中首先要有 Node ,如果你的電腦中還沒有 Node 環(huán)境,那么請(qǐng)先安裝 Node 。
Node.js 是一個(gè)基于 Chrome V8 引擎的 JavaScript 運(yùn)行時(shí)環(huán)境,同時(shí)提供了前臺(tái)界面和后臺(tái)服務(wù)的支持,而 Swagger Editor 的運(yùn)行首先需要一個(gè) http 服務(wù)器,所以在正式安裝 Swagger Editor 時(shí),我們首先需要安裝一個(gè) http 服務(wù)器。
2.1 第一步:在 Node 環(huán)境中安裝 Http 服務(wù)器
在 Node 環(huán)境中,提供了很多 http 服務(wù)器的支持,例如:Express 、 http server 等。針對(duì) Swagger Editor 的特點(diǎn)和后臺(tái)服務(wù)器的適用條件,這里我們采用 http server 來當(dāng)做 Swagger Editor 的服務(wù)器支持。
至于為什么選擇 http server 來做后臺(tái)服務(wù)器,這是不屬于本節(jié)所介紹的內(nèi)容,希望同學(xué)們可以在課下了解原因。
我們使用一下命令來在 Node 環(huán)境中安裝 Http Server 服務(wù)器:
npm install ‐g http‐server
-g 表示全局安裝 http-server 服務(wù)器,這樣我們就可以不用專門去 http-server 服務(wù)器目錄下啟動(dòng)該服務(wù)了。
我們看到如下提示信息就表明安裝 http-server 服務(wù)器成功:

2.2 第二步:在 http server 服務(wù)器中安裝運(yùn)行 Swagger Editor
要想在 http server 服務(wù)器中安裝 Swagger Editor ,需要我們首先將 Swagger Editor 的壓縮包下載下來,這就相當(dāng)于在安裝 Swagger Codegen 時(shí)的 Jar 包。出于方便考慮,我將 Swagger Editor 的資源壓縮包放到了我的 Git 上面,同學(xué)們可以通過訪問以下鏈接獲取:
在安裝好 http server 服務(wù)器之后,我們將下載好的壓縮包進(jìn)行解壓,在解壓完成后我們輸入以下命令來啟動(dòng) Swagger Editor 服務(wù):
http-server swagger-editor
我們看到下圖提示信息則表明 Swagger Editor 服務(wù)已經(jīng)安裝成功并成功運(yùn)行:

3. 如何基于 Docker 環(huán)境安裝 Swagger Editor
基于 Docker 環(huán)境來安裝 Swagger Editor 是 Swagger Editor 官方提供的第二種方式,同樣地,想在 Docker 中安裝 Swagger Editor ,需要電腦中首先要有 Docker 環(huán)境。
關(guān)于 Docker 的安裝過程以及基礎(chǔ)知識(shí),由于不是本節(jié)文章所需要介紹的內(nèi)容,所以該方面的知識(shí)點(diǎn)希望同學(xué)們可以在課下了解。
3.1 第一步 拉取 Swagger Editor Docker Image 鏡像
眾所周知,Docker 是一個(gè)容器服務(wù),其是通過提供眾多工具的鏡像文件來將對(duì)應(yīng)的服務(wù)集成到容器中,而且 Docker 官方整理了全球主流工具的鏡像文件,并且將其放到了 DockerHub 上面。
所以,要想在 Docker 中安裝 Swagger Editor ,我們首先需要從 Docker 官方的 DockerHub 上面將 Swagger Editor 的鏡像文件拉取(下載)下來,在 Docker 容器中命令如下:
docker pull swaggerapi/swagger-editor
運(yùn)行以上指令,等待 Swagger Editor 的鏡像文件拉取完畢。
3.2 第二步 在 Docker 中安裝并運(yùn)行 Swagger Editor
在 Swagger Editor 鏡像拉取完畢之后,我們可以直接運(yùn)行該鏡像文件,如果運(yùn)行成功,則表明 Swagger Editor 在Docker 環(huán)境中已經(jīng)安裝成功,運(yùn)行 Swagger Editor 鏡像文件的命令如下:
docker run -d -p 80:8080 swaggerapi/swagger-editor
代碼解釋:
docker run -d -p 為固定寫法,同學(xué)們目前不用知道表示什么意思,只需要知道這是運(yùn)行鏡像文件的固定命令即可。
80:8080 表示將 Docker 容器中的 Swagger Editor 服務(wù)映射到我們本機(jī)的 80 端口上,
swaggerapi/swagger-editor 表明我們所運(yùn)行的鏡像文件的名稱。
在運(yùn)行 Swagger Editor 服務(wù)時(shí),如果已經(jīng)提供了 json 文件,那么我們可以使用以下命令進(jìn)行啟動(dòng),從而修改該 json 文件:
docker run -d -p 80:8080 -v $(pwd):/tmp -e SWAGGER_FILE=/tmp/swagger.json swaggerapi/swagger-editor
在運(yùn)行上述指令后,我們等待 Swagger Editor 鏡像文件在 Docker 容器中運(yùn)行完畢即可。
4. Swagger Editor 安裝是否成功的必要性測(cè)試及注意事項(xiàng)
無論使用哪種環(huán)境安裝的 Swagger Editor ,檢測(cè)安裝是否成功的標(biāo)志已經(jīng)在上述內(nèi)容中提及,接下來我們需要做的是訪問我們已經(jīng)安裝并運(yùn)行的 Swagger Editor 服務(wù)。
一般而言,當(dāng)我們的 Swagger Editor 服務(wù)啟動(dòng)之后,可以通過以下方式來訪問:
http://localhost
如果在啟動(dòng) Swagger Editor 服務(wù)的時(shí)候,你自定了服務(wù)的端口,則要通過以下方式來訪問:
http://localhost:8080(端口號(hào))
在瀏覽器中輸入訪問地址之后,我們可以看到如下 Swagger Editor 的引導(dǎo)界面就表明 Swagger Editor 已經(jīng)成功安裝并且可以正常使用了:

Tips :
- 在安裝 Swagger Editor 之前,都需要我們首先將 Node 環(huán)境和 Docker 環(huán)境安裝好,這是使用 Swagger Editor 的前提,在安裝 Node 環(huán)境和 Docker 環(huán)境時(shí),一定要注意版本的差異,一本推薦使用最新版本來安裝
- 一般在使用 Swagger Editor 的時(shí)候,很多情況都需要我們從零開始配置我們的 API 配置文件,很少情況會(huì)在基于已經(jīng)配置好的 API 配置文件上進(jìn)行修改。
- 由于種種原因?qū)е掳惭b Swagger Editor 失敗的同學(xué),可以通過訪問 Swagger 官方提供的 Swagger Editor 在線使用地址(https://editor.swagger.io/)來了解 Swagger Editor:
5.小結(jié)

本小節(jié)針對(duì)當(dāng)下主流環(huán)境,分別詳細(xì)介紹了在 Node 環(huán)境和 Docker 環(huán)境中安裝 Swagger Editor 的步驟,以及在安裝時(shí)候容易出現(xiàn)的問題,針對(duì) Swagger Editor 所需的壓縮文件,考慮到自行下載可能下不動(dòng)的情況,所以又額外提供了相關(guān)資源連接,同學(xué)們可以直接下載。
在安裝 Swagger Editor 時(shí),由于用到了 Node 環(huán)境和 Docker 環(huán)境,所以需要同學(xué)們先了解一下上述環(huán)境的基本使用方法,這樣才可以隨心應(yīng)手的使用 Swagger Editor。