JavaScriptのES6の拡張子.mjsのモジュールファイルをNginxで送る方法

背景

ブラウザで動くjavascriptエディター jsnoteを作っていた. ES6のmoduleのファイルの拡張子を.mjsにしたら、Nginxで送れなかった.

問題

mine typeが合わないからファイルを送れないとconsole画面で言われる.
nginxのmine.typesというファイルを見ると次のように書いてあった.

/etc/nginx/mine.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;

対処法

mine.typesを/etc/nginx/conf.dの下にコピーして, application/javascriptにmjsを加える.

/etc/nginx/conf.d/mine.types

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

さらに、nginxのconfファイルの中でmine.typesをincludeする.

/etc/nginx/conf.d/server.conf

server {
  listen 80 default_server;
  server_name server.com;
  include /etc/nginx/conf.d/mime.types;

  location / {
    root /usr/share/nginx/html;
    index index.html;
  }
}

サンプルコード

jsnoteで使っているコード
GitHub