JavaScriptのWeb Workerは超便利です。
でもこのような事態に遭遇
- Web Workerをローカルで動かしたい
- でもローカル環境ではエラーが…
- どうにかして動かす方法ないかな？
実はローカルでも動作させる方法はあります。
この方法が分かると開発効率も上がるため、
Web Workerのローカルでの動かし方まとめました。
このページの目次
Web Workerとは何か？簡単な説明
そもそもWeb Workerとは何かですが…
次記事を見てもらうのが手っ取り早いです。
▼ JavaScriptでマルチスレッド！Web Workerの使い方
▼ 端的に書くと次の特徴がある
- JavaScriptでマルチスレッドができる
- スレッドを別コードから呼びだせる
- 他言語と違って少しだけ成約とかもある
JavaScriptそのものはシングルスレッドです。
でもWeb Workerという仕組みが導入されたことで、
マルチスレッド的なのが実現できるようになりました。
Web Workerをローカルで動かすとエラー発生…
ただ冒頭に書いたように問題点が１つあります。
それがローカル環境で動かせないこと
具体的には以下のエラーが出ます。
▼ ローカル環境で発生したエラー
|
1 |
Failed to construct 'Worker': Script at 'file:///C:/path/to/worker.js' cannot be accessed from origin 'null'. |
このエラーが出るから実行できません。
それはWorkeが同一オリジンポリシーに従うからです。
▼ 同一オリジンポリシーって何だ？
同一オリジンポリシーは重要なセキュリティの仕組みであり、あるオリジンによって読み込まれた文書やスクリプトが、他のオリジンにあるリソースにアクセスできる方法を制限するものです。
二つのページのプロトコル、ポート番号 (もしあれば)、ホストが等しい場合、両者のページは同じオリジンです。これは「スキーム/ホスト/ポート番号のタプル」または時に単に「タプル」として参照されます (「タプル」は共に全体を構成する三つの部分の組み合わせを表します)。
引用元 ： https://developer.mozilla.org/ja/docs/Web/Security/Same-origin_policy
異なるオリジンからのアクセスを拒否する仕組み
だから file:///C:/path/to/worker.js のようなfileプロトコルで呼び出されるスクリプトだと、この同一オリジンに違反します。だから呼び出し先で拒否られます。
そこでこの制限を回避する方法ですが…
ローカルで動かすには以下の回避策があります。
方法１．Chromeに起動オプションを付けて実行
Chromeでは起動時オプションを付けれます。
それを使って同一オリジン問題を回避する策です。
例えばWindowsでの手順は以下になります。
▼ Win + Rからコマンドプロンプトを開く
▼ コマンドプロンプトから以下を実行
|
1 2 3 |
> cd "C:\Program Files\Google\Chrome\Application" > chrome.exe --disable-web-security --user-data-dir="C://Chrome dev session" |
これでCORS制限が解除されたChromeが起動します。
Web Workerが好きなように実行できて嬉しいです。
方法２．PHPから即席サーバーを立ててWorker実行
次の方法はPHPで即席サーバーを立てる方法です。
Web Workerがローカルで動かせないこと、
その原因は同一オリジンポリシーにありました。
それをPHPから以下の手順で回避できます。
- 対象のディレクトリに移動する
- PHPから localhost:port でサーバー起動
- 即席サーバーにアクセスして実行
- Web Workerなどを問題なく動かせる
詳しいやり方は以下記事で説明した感じです。
▼ PHPによる世界一簡単なローカルサーバーの立て方
とても簡単な回避策だと思う。
ローカル環境では同一オリジンに悩まされる場面が多いため、それを回避するにはローカルサーバーを立てるのも有効です。まあまあ良い方法かなと考えます。
以上、Web Workerをローカルで動かすにはでした。
他にも方法を知ってる方は教えてください。ではまた
