web-dev-qa-db-ja.com

Swagger-UIでローカルファイルを開く方法

ローカルコンピューターで、自己生成のswagger仕様ファイルmy.jsonを swagger-ui で開こうとしています。

そこで、私は ダウンロード済み 最新のタグv2.1.8-M1を使用してZipを抽出しました。次に、サブフォルダーdist内に移動し、ファイルmy.jsonをその中にコピーしました。 index.htmlを開いて、my.jsonを探索したいと思います。そして、ここから問題が始まります。

File in windows ExplorerEnter path to file in barWill be prefixed by current url and cannot find the file

ローカルパスを入力すると、index.htmlを含む現在のURLが常に接頭辞になります。そのため、ファイルを開くことができません。次のすべての組み合わせを試してみましたが成功しませんでした。

  • my.jsonはfile:///D:/swagger-ui/dist/index.html/my.jsonにつながります
  • file:///D:/swagger-ui/dist/my.jsonはfile:///D:/swagger-ui/dist/index.html/file:///D:/swagger-ui/dist/my.jsonにつながります
fileswaggerswagger-uiswagger-2.0
50
Adam Taras

動作するのは、file://- protocolなしで相対パスまたは絶対パスを入力することです。

  • ../my.jsonはfile:///D:/swagger-ui/dist/index.html/../my.jsonにつながり、動作します
  • /D:/swagger-ui/dist/my.jsonはfile:///D:/swagger-ui/dist/my.jsonにつながり、動作します

ヒント

この回答は、Win7上のFirefoxで機能します。 Chromeブラウザについては、以下のコメントをご覧ください。

3
Adam Taras

Adam Tarasの仕事に対する答えを得ることができませんでした（つまり、相対パス../my.jsonを使用）。

ここに私の解決策がありました（ノードがインストールされている場合は非常に迅速で痛みがありません）：

  • Nodeを使用して、パッケージをグローバルにインストールしますhttp-servernpm install -g http-server
  • my.jsonがあるディレクトリに移動し、コマンドhttp-server --corsを実行します（これを機能させるには、CORSを有効にする必要があります）
  • Swagger UI（つまり、dist/index.html）を開きます
  • 入力フィールドにhttp://localhost:8080/my.jsonと入力し、[探索]をクリックします
48
MandM

specパラメーター を使用します。

以下の手順。

Swagger JSONを含むspec.jsファイルを作成する

Index.htmlと同じディレクトリに新しいjavascriptファイルを作成します（/ dist /）

次に、spec変数宣言を挿入します。

var spec =

次に、swagger.jsonファイルの内容を貼り付けます。 =記号と同じ行にある必要はありません。

例：

var spec =

{
    "swagger": "2.0",
    "info": {
        "title": "I love Tex-Mex API",
        "description": "You can barbecue it, boil it, broil it, bake it, saute it. Dey's uh, Tex-Mex-kabobs, Tex-Mex creole, Tex-Mex gumbo. Pan fried, deep fried, stir-fried. There's pineapple Tex-Mex, lemon Tex-Mex, coconut Tex-Mex, pepper Tex-Mex, Tex-Mex soup, Tex-Mex stew, Tex-Mex salad, Tex-Mex and potatoes, Tex-Mex burger, Tex-Mex sandwich..",
        "version": "1.0.0"
    },
    ...
    }
}

Swagger UI index.htmlを変更します

これは、Ciaraのような2ステップです。

Spec.jsを含める

/dist/index.htmlファイルを変更して、外部spec.jsファイルを含めます。

 <script src='spec.js' type="text/javascript"></script>

例：

  <!-- Some basic translations -->
  <!-- <script src='lang/translator.js' type='text/javascript'></script> -->
  <!-- <script src='lang/ru.js' type='text/javascript'></script> -->
  <!-- <script src='lang/en.js' type='text/javascript'></script> -->

  <!-- Original file pauses -->
  <!-- Insert external modified swagger.json -->
  <script src='spec.js' type="text/javascript"></script>
  <!-- Original file resumes -->

  <script type="text/javascript">

    $(function () {
      var url = window.location.search.match(/url=([^&]+)/);
      if (url && url.length > 1) {
        url = decodeURIComponent(url[1]);
      } else {
        url = "http://petstore.swagger.io/v2/swagger.json";
      }

スペックパラメータを追加

SwaggerUiインスタンスを変更して、specパラメーターを含めます。

  window.swaggerUi = new SwaggerUi({
    url: url,
    spec: spec,
    dom_id: "swagger-ui-container",
16
paragbaxi

少し苦労した後、私はより良い解決策を見つけました。

  1. swaggerという名前のディレクトリを作成します

    mkdir C:\swagger

Linuxを使用している場合は、次を試してください。

    mkdir /opt/swagger

  1. 以下のコマンドでswagger-editorを取得します。

    git clone https://github.com/swagger-api/swagger-editor.git

  2. 現在作成されているswagger-editorディレクトリに移動します

    cd swagger-editor

  3. 以下のコマンドでswagger-uiを取得します。

    git clone https://github.com/swagger-api/swagger-ui.git

  4. 今、あなたのswaggerファイルをコピーします、私は以下のパスにコピーしました：

    ./swagger-editor/api/swagger/swagger.json

  5. すべてのセットアップが完了したら、以下のコマンドでswagger-editを実行します

    npm install
npm run build
npm start

  6. 2つのURLが表示されますが、そのうちの1つは次のようになります。

    http://127.0.0.1:3001/

    上記はswagger-editor URLです

  7. 次を参照します。

    http://127.0.0.1:3001/swagger-ui/dist/

    上記はswagger-ui URLです

それで全部です。

Swagger-uiまたはswagger-editorのいずれかからファイルを参照できるようになりました

インストール/ビルドには時間がかかりますが、完了すると素晴らしい結果が得られます。

私にとっては約2日間の苦労があり、1回のインストールには約5分しかかかりませんでした。

これで、右上でローカルファイルを参照できます。

幸運を祈ります。

9
Manohar Reddy Poreddy

表示したいファイル./docs/specs/openapi.ymlを含むローカルディレクトリで、次を実行してコンテナを起動し、http://127.0.0.1:8246の仕様にアクセスできます。

docker run -t -i -p 8246:8080 -e SWAGGER_JSON=/var/specs/openapi.yml -v $PWD/docs/specs:/var/specs swaggerapi/swagger-ui
4
simesy

私の環境、
Firefox 45.9、Windows 7
swagger-uiすなわち3.x

解凍すると、ペットストアがFirefoxタブで正常に表示されます。次に、新しいFirefoxタブを開き、[ファイル]> [ファイルを開く]に移動して、swagger.jsonファイルを開きました。ファイルは、つまりファイルとしてクリーンになります。

次に、Firefoxから「ファイルの場所」をコピーしました（例：URLの場所：file：/// D：/My%20Applications/Swagger/swagger-ui-master/dist/MySwagger.json）。

次に、Swagger UIタブに戻り、ファイルの場所のテキストをSwagger UIエクスプローラウィンドウに貼り付けたところ、Swaggerがきれいに表示されました。

お役に立てれば。

1
Mike Wilcox

私はその問題を抱えていましたが、ここにもっと簡単な解決策があります：

  • 公開ディレクトリにディレクトリ（例：swagger-ui）を作成し（静的パス：ルートは不要）、swagger-uiからそのディレクトリにdistをコピーし、localhost/swagger-ui
  • デフォルトのペットストアの例でswagger-uiが表示されます

  • Dist/index.htmlのデフォルトのpetstore URLをlocalhost/api-docsに置き換えるか、より一般化するには、これとともに：

    location.protocol + '//' + location.hostname +（location.port？ '：' + location.port： ''）+ "/ api-docs";

  • もう一度ヒットlocalhost/swagger-ui

出来上がり！ローカルSwagger実装の準備ができました

1
keshav

LINUX

パスとspecパラメータの試行中に常に問題が発生しました。

そのため、SwaggerでJSONを自動的に更新し、再インポートする必要のないオンラインソリューションを探しました。

Npmを使用してswaggerエディターを起動する場合は、jsonファイルのシンボリックリンクを追加する必要があります。

cd /path/to/your/swaggerui where index.html is
ln -s /path/to/your/generated/swagger.json

キャッシュの問題が発生する場合があります。これを解決する簡単な方法は、私のURLの最後にトークンを追加することでした...

window.onload = function() {

var noCache = Math.floor((Math.random() * 1000000) + 1);

// Build a system
const editor = SwaggerEditorBundle({
url: "http://localhost:3001/swagger.json?"+noCache,
  dom_id: '#swagger-editor',
  layout: 'StandaloneLayout',
  presets: [
    SwaggerEditorStandalonePreset
  ]
})

window.editor = editor
}
1
itachi42

これが、ローカルSwagger JSONでの作業方法です

  1. Tomcatをローカルマシンで実行する
  2. Swagger UIアプリケーションをダウンロードし、Tomcatの/ webapps/swaggerフォルダーに解凍します
  3. Tomcatの/ webapps/swaggerフォルダー内にローカルswagger jsonファイルをドロップします
  4. Tomcatを起動します（/ bin/sh startup.sh）
  5. ブラウザーを開いて http：// localhost：8080/swagger / に移動します
  6. swagger Exploreテストボックスにswagger jsonファイルを入力すると、APIがレンダリングされます。

これがあなたのために働くことを願っています

0
Abhi

Firefoxの場合：I：

  1. ダウンロード済み およびSwagger.IOのバージョンをC：\ Swagger \に解凍しました
  2. C：\ Swagger\distにDefinitionsというフォルダーを作成しました
  3. swagger.json定義ファイルをそこにコピーし、
  4. Exploreボックスに「Definitions/MyDef.swagger.json」と入力しました

スラッシュの方向に注意してください!!

迷惑なことに、フォルダ構造をドリルダウンすることはできますが、アップすることはできません。

0
SteveCinq

ファイルとしてswagger uiを開く代わりに、ブラウザfile：/// D：/swagger-ui/dist/index.htmlに配置できます：参照を可能にし、D：/ swagger-uiを指すiis仮想ディレクトリを作成します。

  1. mmcを開き、iisサービスを追加し、デフォルトのWebサイトを展開して仮想ディレクトリを追加し、エイリアスを配置：swagger-ui、物理パス：（your path ...）D：/ swagger-ui
  2. 中央ペインのmmcで「ディレクトリ参照」をダブルクリックします
  3. 右ペインのmmcで[有効化]をクリックします
  4. その後、ブラウザーでURLを入力してローカルのswagger-uiを開きます http：// localhost/swagger-ui/dist /
  5. ファイルをdistフォルダーにコピーした場合は../my.jsonを使用できます。または、サンプル用に別のforlderを作成できます。たとえば、D：/ swagger-ui/samplesを使用して../samples/my.jsonまたは http：//localhost/swagger-ui/samples/my.json
0
Sasha Bond

さらに別のオプションは、Dockerを使用してswaggerを実行することです。このdockerイメージを使用できます。

https://hub.docker.com/r/madscientist/swagger-ui/

このゲットーの小さなBASHスクリプトは、実行中のコンテナーを削除して再構築するために作成したものです。したがって、基本的に仕様を変更し、それを確認するには、スクリプトを実行するだけです。 APP_NAME変数にアプリケーションの名前を入れてください

#!/bin/bash

# Replace my_app with your application name
APP_NAME="my_app"

# Clean up old containers and images
old_containers=$(docker ps -a | grep $APP_NAME | awk '{ print $1 }')
old_images=$(docker images | grep $APP_NAME | awk '{ print $3 }')

if [[ $old_containers ]];
    then
        echo "Stopping old containers: $old_containers"
        docker stop $old_containers
        echo "Removing old containers: $old_containers"
        docker rm $old_containers
fi

if [[ $old_images ]];
    then
        echo "Removing stale images"
        docker rmi $old_images
fi

# Create new image
echo "Creating new image for $APP_NAME"
docker build . -t $APP_NAME

# Run container
echo "Running container with image $APP_NAME"
docker run -d --name $APP_NAME -p 8888:8888 $APP_NAME
echo "Check out your swaggery goodness here:

http://localhost:8888/swagger-ui/?url=http://localhost:8888/swagger-ui/swagger.yaml"
0
MrName