Jak korzystać z vagrant i browsersync z domeną lokalną?

Question

Używam vagrant i mam to skonfigurowany do aktualizacji mojego pliku etc/host tutaj jest przykład.

10.20.1.36 example.dev 

mogę wtedy dostęp do serwera apache VM jest z http://example.dev/

chcę użyć browsersync z linii poleceń, ale nie udało się uzyskać dostępu do witryny. Mam zainstalowany browsersync na moim hoście mac oraz w VM Vag. Próbowałem go z mojego mac i VM za pomocą następującego polecenia, ale nie działa w żadnym środowisku.

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

Oto co mam z 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... 

I tu jest to, co dzieje się w 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... 

Kiedy uruchamiam go w mac jestem w stanie uzyskać dostęp do browsersync ui at http://localhost:3001/ ale nie moja strona internetowa.

Nie jestem pewien, gdzie powinienem go uruchomić. Jak mam uzyskać dostęp do strony w mojej przeglądarce. Jeśli potrzebuję przesłać wszystkie porty w mojej maszynie wirtualnej.

Wyszukiwanie w Internecie przynosi wiele wyników, ale wszystkie dotyczą chrząknięć i łyków, a ja nie używam żadnego z nich.

EDIT: dodałem przekierowanie portów do Vagrant a potem uruchomić przeglądarkę synchronizację z poziomu VM. Wszystko działa teraz pod http://example.dev:3000 i http://example.dev:3001.

Oto co dodałem do mojego 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

Answer 1

Oto jak mam to działa.

Dodałem przekierowanie portów do włóczęgi, a następnie uruchomiłem synchronizację przeglądarki z poziomu vm. Wszystko działa teraz pod http://example.dev:3000 i http://example.dev:3001.

Oto co dodałem do mojego 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

Answer 2

1.- I pudełko cerobox

2.- config wirtualnego hosta C:\Windows\System32\drivers\etc\host na oknach

192.168.33.10 exampleurl.app 

3.- run vagrant up używany na projekt folderu

4.- zainstaluj synchronizację przeglądarki

npm install -g browser-sync 

5.- run browse sync

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

Zobaczysz te informacje do podłączenia urządzeń

[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.- korzystać z tego IP do conect

http://192.168.1.77:3000 

Answer 3

wiem, że to zostało odebrane, a ja początkowo stosowany @ rozwiązania KahunaCoder by wstać i działa, więc dzięki!

Jednak znalazłem uruchomiony mój plik gulp z Vagrant, aby być strasznie wolno! Pomyślałem, że opublikuję to rozwiązanie na wszelki wypadek.

Mój plik hosts jest:

192.168.5.10 www.develop.local 

i skończyło się za pomocą następujących w moim Vagrantfile:

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

(Apache w Vagrant jest uruchomiony na porcie 80. Nie przeszkadza przekierowania port 3001, ponieważ służy tylko do uzyskiwania dostępu do interfejsu użytkownika Browsersync)

Teraz wykonuję zadania związane z Gulpem z projektu i uzyskuję następujące informacje:

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

Teraz, kiedy otwierają się http://localhost:3001 widzę centrum sterowania Browsersync, a kiedy otworzy http://localhost:3000 w moich różnych przeglądarek, widzę moją stronę rozwoju i wszystkie podłączone przeglądarek wymienionych w centrum sterowania - dlatego są zsynchronizowane "z Browsersync i mogą być sterowane centralnie, a akcja dublowana.

Podany adres zewnętrzny pozwala mi połączyć się z serwerem rozwoju za pośrednictwem innych urządzeń w tej samej sieci.