Как использовать vagrant и browsersync с локальным доменом?

Я использую vagrant, и я настроил его для обновления моего файла etc/host вот пример.

10.20.1.36  example.dev

затем я могу получить доступ к серверу apache виртуальной машины с http://example.Дэв/

Я хочу использовать browsersync от командной строки, но я не смог получить доступ к моему сайту. У меня есть browsersync, установленный на моем хосте mac и в виртуальной машине vagrant. Я пробовал это с моего mac и VM, используя следующую команду, но она не работает ни в одном окружающая среда.

browser-sync start --proxy "example.dev" --files "public/*.html,public/css/*.css,public/js/*.js"

вот что я получаю от Mac

[BS] Proxying: http://example.dev
[BS] Access URLs:
 -------------------------------------
   Local: http://localhost:3000
External: http://192.168.0.10:3000
 -------------------------------------
      UI: http://localhost:3001
 UI External: http://192.168.0.10:3001
 -------------------------------------
[BS] Watching files...

и вот что происходит в VM

[BS] Proxying: http://example.dev
[BS] Now you can access your site through the following addresses:
[BS] Local URL: http://localhost:3000
[BS] External URL: http://10.0.2.15:3000
[BS] Watching files...

когда я запускаю его на mac, я могу получить доступ к интерфейсу browsersync по адресу http://localhost:3001/ но не мой сайт.

Я не уверен, где я должен запустить его. Как я должен получить доступ к сайту в моем браузере. Если мне нужно переслать какие-либо порты в моей виртуальной машине.

поиск в интернете возвращает много результатов, но они все о ворчании или глотке, и я не использую ни один из них.

EDIT: я добавил переадресацию портов в vagrant, а затем запустил синхронизацию браузера из виртуальной машины. Теперь все работает на http://example.dev:3000 и http://example.dev:3001.

вот что я добавил в свой Vagrantfile: config.vm.network :forwarded_port, guest: 3000, host: 3000, auto_correct: true config.vm.network :forwarded_port, guest: 3001, host: 3001, auto_correct: true

28
browser-sync vagrant

3 ответов

вот как я заставил его работать.

я добавил переадресацию портов в vagrant, а затем запустил синхронизацию браузера из виртуальной машины. Теперь все работает на http://example.dev:3000 и http://example.dev:3001.

вот что я добавил в свой Vagrantfile: config.vm.network :forwarded_port, guest: 3000, host: 3000, auto_correct: true config.vm.network :forwarded_port, guest: 3001, host: 3001, auto_correct: true

6

Я знаю, что на это был ответ, и я изначально использовал решение @KahunaCoder, чтобы встать и работать, так что спасибо!

тем не менее, я обнаружил, что запуск моего gulpfile изнутри Vagrant ужасно медленный! Итак, я думал, что опубликую это решение, если оно будет полезно.

мой файл hosts:

192.168.5.10    www.develop.local

и я в конечном итоге использовал следующее В моем Vagrantfile:

server_ip = "192.168.5.10"    
config.vm.network :forwarded_port, guest: 80, host: 3000, auto_correct: true

(Apache в Vagrant работает на порту 80. Я не потрудился переадресовать порт 3001, поскольку это только для доступа к интерфейсу Browsersync)

теперь я запускаю свои задачи Gulp из проекта и получаю следующее:

[Browsersync] Proxying: http://www.develop.local
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://151.101.129.69:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://151.101.129.69:3001
 -------------------------------------

теперь, когда я открываю http://localhost:3001 Я вижу Центр управления Browsersync, и когда я открываю http://localhost:3000 в моих различных браузерах я вижу свой сайт разработки и все подключенные браузеры, перечисленные в центре управления - поэтому они "синхронизируются" с Browsersync и могут быть централизованно управляются и зеркально отражаются.

Внешний указанный адрес позволяет мне подключаться к моему серверу разработки через другие устройства в той же сети.

1

1.- Я использовал окно cerobox

2.- настройка виртуального хоста C:\Windows\System32\drivers\etc\host на windows

192.168.33.10   exampleurl.app

3.- запустить vagrant up на папке project

4.- установить браузер-синхронизация

npm install -g browser-sync

5.- запустить обзор-синхронизация

browser-sync start -p "exampleurl.app" -f "public, resources, otherfolder, namefiles, etc"

вы увидите эту информацию для подключения устройств

[BS] Proxying: http://exampleurl.app
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.77:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.77:3001
 -------------------------------------
[BS] Watching files...

6.- используйте этот ip для conect

http://192.168.1.77:3000
0