Використання 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

Переконайтесь в тому, що запускаєте сервер машини тільки всередині вашої віртуальної машини: інакше інші компʼютери теж матимуть до нього доступ.

Виправіть проблему "Invalid Host header"

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 для всіх не рекомендується в цілому, але тут це необхідно для вирішення проблеми при використанні Encore на віртуальній машині.