Zenn
🐙

application/wasm MIMEtype問題を解決しつつ開発サーバを建てる方法

2021/08/30に公開
Node.js
Rust
WebAssembly
rollup
tech

rollup-plugin-serveを使う

関連記事

WebAssemblyを扱っていると、
こんなエラーが出た

🤔 ムムム

ブラウザ側ではMimeTypeチェックをしてるんだけど、
サーバー側が発してくれないから警戒してますよ
みたいな内容。

この手の問題はnginxなどのWebサーバー側にMimeTypeを設定すれば良いのだが、
開発用の簡易サーバーにMimeTypeを変更するおしゃれな機能はあまりついてない。
ここではいくつか回避方法をお伝えしておこう。
新しく見つけたら追記していく。

ヾ(・ω<)ﾉ"　三三三●　ⅱⅲ コロコロ♪

------------------- ↓ 本題はここから ↓-------------------

emscriptenのWebサーバーを使う方法

EmScriptenとはCやC++コードをasm.jsやWebassemblyに変換して使うためのフレームワーク、
コンパイラから何からついているのだが、
emrunという開発用のWebサーバーも搭載している。
WebAssemblyを使うことを前提にしているフレームワークなので、
簡易サーバー側にもMimeTypeが設定されている
ここでは詳しく説明しないので、インストールなどは以下を参照のこと

https://emscripten.org

インストールしたら以下を実行

emrun

/etc/mime.typesに記述する

使っているディストリビューションによって変わってくるかもだが、
/etc/mime.typesに追記するという手がある。
使用しているサーバーによっては有効のようだ。

/etc/mime.types
+ application/wasm    wasm

TypeError: Incorrect response MIME type. Expected 'application/wasm' #5

rollup-plugin-serveを使う方法

rollupのプラグインにrollup-plugin-serveという簡易サーバー機能がある
これにはMimeType設定項目があるので手軽でいい

npm i -D rollup rollup-plugin-serve rollup-plugin-livereload

メインで使うrollupの設定ファイルに、
watch指定の時だけ動くようにする。

rollup.config.mjs
import livereload from "rollup-plugin-livereload"
import serve from "rollup-plugin-serve"

const production = !process.env.ROLLUP_WATCH;

export default {
・・・
  plugins:[
    !production && livereload('dist'),
    !production && serve({
      contentBase: "dist",
      mimeTypes: {
        "application/wasm": ["wasm"],
      },
    }),    
  ]
}

npx rollup -c -w

expressで頑張る

アプリケーションサーバであるexpressをそのまま使う
特に説明はいいか。

./express.cjs
const express = require('express')
const app = express()
const port = 3000

express.static.mime.define({'application/wasm': ['wasm']})

app.use(express.static('./dist', {
  setHeaders: (res) => {
    res.set('Cross-Origin-Opener-Policy', 'same-origin');
    res.set('Cross-Origin-Embedder-Policy', 'require-corp');
  }
}));

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

実行コマンド

npm i -D express
DEBUG=express:* node ./express.cjs

------------------- ↓ 後書きはここから ↓-------------------

Discussion