1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【swagger/nginx】CSS/JSが読み込まれないときの対処法

Posted at

経緯

  1. swagger-ui, swagger-editorをGitからクローンした。
  2. nginxでロケーション設定して、それぞれのindex.htmlが表示される様にした。
  3. しかし、なぜかCSS/JSだけ読み込まれない。(404エラーになる)
  4. とても困った。

対象ファイル(404エラー)

・swagger-ui
 ・swagger-ui-bundle.js
 ・swagger-ui.js
 ・swagger-ui.css

・swagger-editor
 ・swagger-editor-bundle.js
 ・swagger-editor.js
 ・swagger-editor.css

対処法

nginxのロケーションで、CSS・JSの絶対パスを指定するだけでした。
なんで、index.htmlに書いてあるパスで読み込んでくれないの・・・?

例:
/www/swagger/直下にswagger-uiをクローンしているとします。

初期のロケーションの設定は以下の通りです。

nginx.conf

location /swagger-ui{
   alias /www/swagger/swagger-ui/dist;
   index index.html;
}

この設定の後、index.htmlは表示できたが、
https://sample-site/swagger-ui/swagger-ui-bundle.jsのJSが読み込めず、
404エラーが出ているとします。

aliasを使って、jsファイルの絶対パスを指定してあげてください。

nginx.conf

location /swagger-ui{
   alias /www/swagger/swagger-ui/dist;
   index index.html;
}

location /swagger-ui/swagger-ui-bundle.js{
  alias /www/swagger/swagger-ui/dist/swagger-ui-bundle.js; <---- 絶対パス指定!!!!
}

他のファイルについても、同様にaliasを使って、絶対パスを指定してあげてください。
私の場合は、これで解決しました。

あんまり同じ現象で困ってる人いないと思いますが、
誰かの助けになれれば嬉しいです。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?