『REST入門』Swagger Editorのインストール(Windows )

OpenAPI(Swagger) Swagger

ここではSwagger EditorをWeb上で利用するのではなく、ローカルで利用また、サーバ上に構築してチームで利用したといった場合のインストール方法を解説していきます。

Web版のSwagger Editorを利用する場合は以下にアクセスしてください。

https://editor.swagger.io/

Windows10で環境構築した際の記事になります。

Swagger Editorのクローンを作成

以下のサイトにアクセスします。

https://swagger.io/tools/swagger-editor/download/

「Download」>「Clone or Download」とクリックし、「URI」のクリップボードをとります。

Swagger Editor Install -01

 

Swagger Editor Install -02

 

コマンドプロンプトにクリックボードの内容を貼りつけて実行します。これによりGitHubからSwagger Editorのクローンを作成します。

Swagger Editor Install -03

 

Swagger Editorをインストール

Swagger Editorのクローンを作成したフォルダで、以下のコマンドを実行します。これによりpackage.jsonで管理されたパッケージがインストールされます。

Swagger Editor Install -04

※Node.jsをインストールすることでnpmもインストールされコマンドを利用できるようになります。以下の記事にインストール方法が記載されているので参考にしてください。

npmとは|Node.js(npm)をインストール(Windows)
npmでパッケージのインストールを行いたく、Node.jsをインストールしたので、npmとは何かとインストール手順を記事にまとめます。環境はWindows10にまります。

 

Swagger Editorのビルド

インストールが完了したら次はビルドを行います。これによりpackage.jsonのscriptsフィールドに記述されたbuildタスクが実行されてプロジェクトのビルドを行います。

Swagger Editor Install -05

 

ビルドが完了したら、以下の「index.html」をブラウザで開くとSwagger Editorを表示できます。

Swagger Editor Install -06

 

Swagger EditorをWebサーバで共有して利用

ローカルまたはWebサーバの任意のパスに次の2つをコピーします。

・distフォルダ

・index.html

Swagger Editor Install -07

 

この状態で、index.htmlをブラウザで開くことでSwagger Editorを表示できます。

Swagger Editor Install -08

 

IISでWebサイトを構築することで共有してSwagger Editorを利用できます。

Swagger Editor Install -09

IISでの公開方法は以下を参考にして下さい。

 

IISでサイトを構築する(Windows10)
ここでは、Windows10の環境にIISをインストールして、サイトを構築する方法を記載します。

 

タイトルとURLをコピーしました