¿Cómo uso vagrant y browsersync con dominio local?

browser-sync (3)

Uso vagrant y lo tengo configurado para actualizar mi archivo etc / host aquí hay un ejemplo.

10.20.1.36 example.dev

Luego puedo acceder al servidor apache de la máquina virtual con http://example.dev/

Quiero usar browsersync desde la línea de comandos pero no he podido acceder a mi sitio. Tengo browsersync instalado en mi host mac y en la máquina virtual errante. Lo he intentado desde mi mac y la máquina virtual utilizando el siguiente comando, pero no funciona en ninguno de los entornos.

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

Esto es lo que obtengo de la 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...

Y esto es lo que pasa en la máquina virtual.

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

Cuando lo ejecuto en el mac, puedo acceder a la interfaz de usuario de browsersync en http://localhost:3001/ pero no a mi sitio web.

No estoy seguro de dónde debería ejecutarlo. Cómo debo acceder al sitio en mi navegador. Si necesito reenviar algún puerto en mi VM.

Al buscar en la web se obtienen muchos resultados, pero todos se tratan de gruñidos o tragos y no uso ninguno de ellos.

EDITAR: Agregué el reenvío de puertos a vagrant y luego ejecuté el navegador sincronizado desde la máquina virtual. Todo funciona ahora en http://example.dev:3000 y http://example.dev:3001 .

Esto es lo que agregué a mi 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

1.- Utilicé caja cerobox

2.- config host virtual C:/Windows/System32/drivers/etc/host en Windows

192.168.33.10 exampleurl.app

3.- ejecutar vagrant up en el proyecto de carpeta

4.- instalar el navegador de sincronización

npm install -g browser-sync

5.- ejecutar browse-sync

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

Verás esta información para la conexión de los dispositivos.

[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.- Usa esta ip para conectarte.

http://192.168.1.77:3000

Así es como lo tengo funcionando.

Agregué el reenvío de puertos a vagrant y luego ejecuté la sincronización del navegador desde la máquina virtual. Todo funciona ahora en http://example.dev:3000 y http://example.dev:3001 .

Sé que esto ha sido respondido, e inicialmente usé la solución de @ KahunaCoder para comenzar a trabajar, ¡así que gracias!

Sin embargo, encontré que ejecutar mi gulpfile desde Vagrant es terriblemente lento. Entonces, pensé que publicaría esta solución en caso de que fuera útil.

Mi archivo de hosts es:

192.168.5.10 www.develop.local

Y terminé usando lo siguiente en mi Vagrantfile:

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

(Apache en Vagrant se está ejecutando en el puerto 80. No me molesté en reenviar el puerto 3001 ya que solo es para acceder a la IU de Browsersync)

Ahora ejecuto mis tareas Gulp desde el proyecto y obtengo lo siguiente:

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

Ahora cuando abro http://localhost:3001 veo el centro de control de Browsersync, y cuando abro http://localhost:3000 en mis diversos navegadores, veo mi sitio de desarrollo y todos los navegadores conectados que figuran en el centro de control - por lo tanto, están ''sincronizados'' con Browsersync, y pueden ser controlados de forma centralizada y acción reflejada.

La dirección externa proporcionada me permite conectarme a mi servidor de desarrollo a través de otros dispositivos en la misma red.