/var/www/yatta47.log

/var/www/yatta47.log

やったのログ置場です。スクラップみたいな短編が多いかと。

Swagger Viewerでプレビューが表示されない場合の対処

f:id:yatta47:20210105004924p:plain

VSCodeでSwaggerを書いていて、画面表示しようと思ってSwagger Viewerを入れてみたところ、トラブルに遭遇。

今日はそんなお話。

 

トラブル事象

入れたのはSwagger Viewer。

Swagger Viewer - Visual Studio Marketplace

 

色々なホームページに書いてあるやり方でやってもなぜか何も画面に表示されず。

黒い画面が表示されているだけで何も表示されない。

なんでや。

 

解決方法

ポート転送+ポート許可して解決。

というのも、自分のVSCodeの環境はRemote Developmentで開発を行っていて、ローカルPC内ではVSCodeを動かしているだけ。実際のデータ等はRemote Developmentでサーバに接続してそこで開発を行っています。

なので、リモート(サーバ)からのポート転送が無効になっているため、結果画面には何も表示されずっていう状態になっていました。

 

やるべきことは3つ。

  1. VSCodeのポート転送設定
  2. Swagger Viewerの設定確認
  3. 接続サーバのポート許可

まずはここでポート転送の設定をします。

f:id:yatta47:20210319220704p:plain

f:id:yatta47:20210319220757p:plain

 

そしてSwagger Viewerの設定を確認。転送するポートと同じポート番号を設定します。

f:id:yatta47:20210319221335p:plain

そして最後のポート許可に関して。ここが一番ハマッタ。このポート番号に対して、自PCから接続できる必要があります。AWSのEC2とかでやっている場合ヒア、SecurityGroupで18512を許可するか、もしくは開けているポートに設定を変えてあげる必要があります。

 

まとめ

開発環境に依存する問題だったかなと思います。

ローカルPCで開発している分には遭遇しない問題なのでなかなか解決方法が見つからず苦労しました。

誰かの参考になれば幸いです。

ではでは~。