Попытка запустить npm run serve (приложение vue-cli) внутри Laravel Homestead (VirtualBox + Vagrant) - PullRequest
0 голосов
/ 05 мая 2019

У меня есть приложение vue-cli, пытающееся запустить его в Laravel Homestead.

Что у меня есть :

Мой hosts на хост-машине:

127.0.0.1   localhost
127.0.1.1   PC
192.168.2.10 myvueapp.local

hosts внутри ВМ:

127.0.0.1       localhost
127.0.0.1       myvueapp.local
127.0.1.1       homestead       homestead

Бродячая версия: 2.2.4, Усадьба: v8.3.2, vue --version: 3.7.0

npm run serve выполняется без проблем внутри ВМ, но я получаю

К сожалению, myvueapp не работает должным образом без включенного JavaScript.Пожалуйста, включите его, чтобы продолжить.

в качестве тела ответа на запрос:

//response headers
Request URL: https://myvueapp.local/
Request Method: GET
Status Code: 200 
Remote Address: 192.168.2.10:443
Referrer Policy: no-referrer-when-downgrade

Страница браузера пуста.

Также есть один запрос favicon:

Request URL: https://myvueapp.local/%3C%=%20BASE_URL%20%%3Efavicon.ico
Request Method: GET
Status Code: 400 Bad Request
Remote Address: 192.168.2.10:443

Каким-то образом BASE_URL не компилируется в index.html:

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

My vue.config.js:

module.exports = {
  devServer: {
    host: 'myvueapp.local',
    https: true
  }
}

Homestead.yaml:

ip: "192.168.2.10"
#...
sites:
    - map: myvueapp.local
      to: /home/vagrant/path/to/myvueapp.local/public
#...
ports:
    - send: 8080
      to: 80

Порт, на котором обслуживается Vue (внутри VM, 8080), прослушивает.

lsof -i :8080
COMMAND  PID    USER   FD   TYPE DEVICE SIZE/OFF NODE NAME
node    3022 vagrant   22u  IPv4  31440      0t0  TCP localhost:http-alt (LISTEN)

Конфигурация Nginx:

server {
    listen 80;
    listen 443 ssl http2;
    server_name .myvueapp.local;
    root "/path/to/myvueapp.local/public";

    index index.html index.htm index.php;

    charset utf-8;



    location / {
        try_files $uri $uri/ /index.php?$query_string;

    }

PS Он работает нормально, когдаЯ работаю с моего хост-компьютера.

То, что я пробовал :

изменение host

module.exports = {
  devServer: {
    host: '0.0.0.0', //<-- here
    https: true
  }
}

, не помогло.


Редактирование # 1

Я перешел немного дальше, эта конфигурация Nginx теперь позволяет мне получать доступ к приложению Vue, обслуживаемому внутри ВМ, с использованием хостамашина:

   location / {
        try_files $uri $uri/ /index.html =404;
        proxy_pass http://localhost:8080; #<-- this might be the output from npm run serve, without last slash
        #  App running at:
        #  - Local:   http://localhost:8080/
        #             ^^^^^^^^^^^^^^^^^^^^^
   }

Но есть проблема: горячая перезагрузка не работает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...