経緯
- swagger-ui, swagger-editorをGitからクローンした。
- nginxでロケーション設定して、それぞれのindex.htmlが表示される様にした。
- しかし、なぜかCSS/JSだけ読み込まれない。(404エラーになる)
- とても困った。
対象ファイル(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を使って、絶対パスを指定してあげてください。
私の場合は、これで解決しました。
あんまり同じ現象で困ってる人いないと思いますが、
誰かの助けになれれば嬉しいです。