Использование Encore на виртуальной машине

Дата обновления перевода 2023-09-18

Использование Encore на виртуальной машине

Encore совместим с виртуальными машинами, такими как VirtualBox и VMWare, но вам может потребоваться внести некоторые изменения в вашу конфигурацию, чтобы заставить его работать.

Проблемы с просмотром файлов

При использовании виртуальной машины корневой каталог вашего проекта используется совместно с виртуальной машиной с помощью NFS. Это создает проблемы с просмотром файлов, поэтому вы должны включить опцию polling, чтобы это работало:

1
2
3
4
5
6
7
8
// webpack.config.js

// ...

// будет применено к командам `encore dev --watch` и `encore dev-server`
Encore.configureWatchOptions(watchOptions => {
    watchOptions.poll = 250; // проверять на предмет изменений каждые 250 миллисекунд
});

Проблемы с сервером разработки

Сконфигурируйте публичный путь

Note

Вы можете пропустить этот раздел, если ваше приложение работает на http://localhost вместо пользовательского имени домена вроде http://app.vm.

При запуске сервера разработки вы, вероятно, увидите следующие ошибки в веб-консоли:

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
...

Если ваше приложение Symfony работает на пользовательском домене (например. http://app.vm), вы должны явно настроить публичный путь в вашем package.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",
          ...
      }
  }

После перезапуска Encore и повторной загрузки веб-страницы вы, вероятно, увидите различные проблемы в веб-консоли:

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

Вам все еще необходимо внести другие изменения в конфигурацию, как описано в следующих разделах.

Позвольте внешний доступ

Добавьте аргумент --host 0.0.0.0 к конфигурации dev-server в вашем файле package.json, чтобы сервер разработки принимал все входящие соединения:

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

Убедитесь, что сервер разработки запущен только внутри вашей виртуальной машины; иначе другие компьютеры смогут иметь к нему доступ.

Исправьте проблему "Невалидный заголовок хоста"

Webpack будет отвечать Invalid Host header при попытке получить доступ к файлам с сервера разработки. Чтобы исправить это, установите опцию allowedHosts:

1
2
3
4
5
6
7
8
9
// webpack.config.js
// ...

Encore
    // ...

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

Caution

Имейте в виду, что не рекомендуется устанавливать allowedHosts в значение all в целом, но в данном случае это необходимо для решения проблемы при использовании Encore на виртуальной машине.