Nginx html うまく表示できない エラー[ Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.]

きっかけ

1. viteでつくったサイトをwebブラウザで表示させようと思ったらなにも表示されない
2. コンソールを見るとエラー

Chrome コンソール

Failed to load module script:
Expected a JavaScript module script but the server responded
with a MIME type of "application/octet-stream". 
Strict MIME type checking is enforced 
for module scripts per HTML spec.

改善方法の結論

httpコンテキストに以下を追記

nging.conf

 http{
    + include       /etc/nginx/mime.types;
    + default_type  application/octet-stream;

..省略
}

• include /etc/nginx/mime.types;

  • includeされるmime.typesに型情報が記述されており記述された情報を読み込めるようになる

• default_type application/octet-stream;

  • incloudeの記述がよみこまれなかったさいにこのMIMEタイプが適応される
  • 記述がないと初期値である text/plain になるのでコードとして認識されない

MIMEタイプとは?

こちらによるとMIMEタイプは別名メディアタイプとよばれていて
IETFさんが定められた標準規格になるようです
参考までに開いてみた /etc/nginx/mime.types

/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/png                                        png;
    image/svg+xml                                    svg svgz;
    image/tiff                                       tif tiff;
    image/vnd.wap.wbmp                               wbmp;
    image/webp                                       webp;
    image/x-icon                                     ico;
    image/x-jng                                      jng;
    image/x-ms-bmp                                   bmp;

    font/woff                                        woff;
    font/woff2                                       woff2;

    application/java-archive                         jar war ear;
    application/json                                 json;
    application/mac-binhex40                         hqx;
    application/msword                               doc;
    application/pdf                                  pdf;
    application/postscript                           ps eps ai;
    application/rtf                                  rtf;
    application/vnd.apple.mpegurl                    m3u8;
    application/vnd.google-earth.kml+xml             kml;
    application/vnd.google-earth.kmz                 kmz;
    application/vnd.ms-excel                         xls;
    application/vnd.ms-fontobject                    eot;
    application/vnd.ms-powerpoint                    ppt;
    application/vnd.oasis.opendocument.graphics      odg;
    application/vnd.oasis.opendocument.presentation  odp

ファイル形式を識別できるようにしている

上記に該当しないものは

default_type  application/octet-stream

でしていした
ここよると application/octet-stream がデータ形式不明などの例外的なものは単なるバイト列として取り扱われるそうです｡