【Nginx】CSSが読み込まれない問題の解消

......Dockerで立てたNginxでCSSが反映されてない！何故だ！
以前の記事で立てたNginxのサーバにアクセスしたところ...

どうして......

ビルドする前のvueのlocalでは動いているのでビルドのオプションが悪い説を提唱.

とりあえずキャッシュの削除

CSSが反映されない場合は大体キャッシュが悪い。Chromeの履歴からキャッシュの削除.

-> 変わらず

google先生で検索

見つかった解決策

1. httpdのsendfileという設定が キャッシュされたファイルを送らない設定 をoffにする

2. nginx.confにmime.typeを読み込む設定を追加する

1のこれは...本番環境だとoffにできないので却下.
2はnginx.confのhttp内に include /etc/nginx/mime.types; を追記する方法、mime.typesの中身を見てみると...

# cat /etc/nginx/mime.types

types {
    text/html                                        html htm shtml;
    text/css                                         css;
    text/xml                                         xml;
    image/gif                                        gif;
    image/jpeg                                       jpeg jpg;
    application/javascript                           js;
    application/atom+xml                             atom;
    application/rss+xml                              rss;

    text/mathml                                      mml;
    text/plain                                       txt;
    text/vnd.sun.j2me.app-descriptor                 jad;
    text/vnd.wap.wml                                 wml;
    text/x-component                                 htc;

    image/avif                                       avif;
    image/png                                        png;
    image/svg+xml                                    svg svgz;
    image/tiff                                       tif tiff;

......................................................

どうやらmimeTypeと拡張子を相互に変換してくれる設定っぽい、これが読み込まれていなかったので.cssファイルを渡す方法がわからなかったと...どうして最初から設定されていないんだ???

command + Shift + R でスーパーリロード.

ちゃんと text/css で読み込まれた！

nginxの設定次第ではcssが読み込めないことがあるんですね...！また賢くなりました。

参考

1. NginxでCSS、JSが反映されない時の対応メモ - yikegaya’s blog