Using Encore in a Virtual Machine

Encore is compatible with virtual machines such as VirtualBox and VMWare but you may need to make some changes to your configuration to make it work.

Encore は、VirtualBox や VMWare などの仮想マシンと互換性がありますが、動作させるために構成を変更する必要がある場合があります。

File Watching Issues

When using a virtual machine, your project root directory is shared with the virtual machine using NFS. This introduces issues with files watching, so you must enable the polling option to make it work:

仮想マシンを使用する場合、プロジェクトのルート ディレクトリは NFS を使用して仮想マシンと共有されます。これにより、ファイルの監視に問題が発生するため、ポーリング オプションを有効にして機能させる必要があります。
1
2
3
4
5
6
7
8
 
// webpack.config.js

// ...

// will be applied for `encore dev --watch` and `encore dev-server` commands
Encore.configureWatchOptions(watchOptions => {
    watchOptions.poll = 250; // check for changes every 250 milliseconds
});

Development Server Issues

Configure the Public Path

Note

ノート

You can skip this section if your application is running on http://localhost instead a custom local domain-name like http://app.vm.

アプリケーションが http://app.vm のようなカスタム ローカル ドメイン名ではなく http://localhost で実行されている場合は、このセクションをスキップできます。

When running the development server, you will probably see the following errors in the web console:

開発サーバーを実行すると、Web コンソールに次のエラーが表示される可能性があります。
1
2
3
 
GET http://localhost:8080/build/vendors~app.css net::ERR_CONNECTION_REFUSED
GET http://localhost:8080/build/runtime.js net::ERR_CONNECTION_REFUSED
...

If your Symfony application is running on a custom domain (e.g. http://app.vm), you must configure the public path explicitly in your package.json:

Symfony アプリケーションがカスタム ドメイン (例: http://app.vm) で実行されている場合、yourpackage.json で明示的にパブリック パスを構成する必要があります。
1
2
3
4
5
6
7
8
 
{
      ...
      "scripts": {
-        "dev-server": "encore dev-server",
+        "dev-server": "encore dev-server --public http://app.vm:8080",
          ...
      }
  }

After restarting Encore and reloading your web page, you will probably see different issues in the web console:

Encore を再起動して Web ページをリロードすると、Web コンソールにさまざまな問題が表示される可能性があります。
1
2
 
GET http://app.vm:8080/build/vendors~app.css net::ERR_CONNECTION_REFUSED
GET http://app.vm:8080/build/runtime.js net::ERR_CONNECTION_REFUSED

You still need to make other configuration changes, as explained in the following sections.

次のセクションで説明するように、その他の構成変更を行う必要があります。

Allow External Access

Add the --host 0.0.0.0 argument to the dev-server configuration in your package.json file to make the development server accept all incoming connections:

--host 0.0.0.0 引数を package.json ファイルの dev-server 構成に追加して、開発サーバーがすべての着信接続を受け入れるようにします。
1
2
3
4
5
6
7
8
 
{
      ...
      "scripts": {
-        "dev-server": "encore dev-server --public http://app.vm:8080",
+        "dev-server": "encore dev-server --public http://app.vm:8080 --host 0.0.0.0",
          ...
      }
  }

Caution

注意

Make sure to run the development server inside your virtual machine only; otherwise other computers can have access to it.

開発サーバーは仮想マシン内でのみ実行してください。そうしないと、他のコンピューターがアクセスできてしまいます。

Fix "Invalid Host header" Issue

Webpack will respond Invalid Host header when trying to access files from the dev-server. To fix this, set the allowedHosts option:

Webpack は、開発サーバーからファイルにアクセスしようとすると、Invalid Host ヘッダーを応答します。これを修正するには、allowedHosts オプションを設定します。
1
2
3
4
5
6
7
8
9
 
// webpack.config.js
// ...

Encore
    // ...

    .configureDevServerOptions(options => {
        options.allowedHosts = all;
    })

Caution

注意

Beware that it's not recommended to set allowedHosts to all in general, but here it's required to solve the issue when using Encore in a virtual machine.

通常、allowedHosts を all に設定することはお勧めしませんが、仮想マシンで Encore を使用する際の問題を解決する必要があることに注意してください。