如何在本地域中使用 vagrant 和 browsersync？

Question

我使用 vagrant 并将其配置为更新我的 etc/host 文件这是一个示例。

10.20.1.36  example.dev

然后我可以使用 http://example.dev/

访问 VM 的 apache 服务器

我想从命令行使用 browsersync，但我无法访问我的网站。我在 mac 主机和 vagrant VM 上安装了 browsersync。我已经使用以下命令从我的 mac 和虚拟机中进行了尝试，但它在任何一个环境中都不起作用。

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

这是虚拟机中发生的事情

[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 时，我可以在 http://localhost:3001/ 访问浏览器同步 ui 但不能访问我的网站。

我不确定我应该运行它在哪里。我应该如何在我的浏览器中访问该站点。如果我需要转发我的 VM 中的任何端口。

在网上搜索 returns 很多结果，但它们都是关于 g运行t 或 gulp 的，我都不使用它们。

编辑： 我将端口转发添加到 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

Answer 1

这是我的工作方式。

我向 vagrant 添加了端口转发，然后从 vm 中启动浏览器同步。 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

Answer 2

1.- 我用了盒子 cerobox

2.- 在 windows

上配置虚拟主机 C:\Windows\System32\drivers\etc\host

192.168.33.10   exampleurl.app

3.- 运行 vagrant up 在文件夹项目上

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 连接

http://192.168.1.77:3000

Answer 3

我知道这已经得到解答，我最初使用@KahunaCoder 的解决方案起床运行ning，非常感谢！

但是，我发现运行从 Vagrant 中下载我的 gulpfile 非常慢！所以，我想我会 post 这个解决方案，以防它有用。

我的主机文件是：

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

（Vagrant 中的 Apache 在端口 80 上运行ning。我没有费心转发端口 3001，因为它仅用于访问 Browsersync UI）

我现在运行我的 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 时，我会看到我的开发站点和控件中列出的所有连接的浏览器center - 因此它们 'synced' 具有 Browsersync，并且可以集中控制和操作镜像。

提供的外部地址允许我通过同一网络上的其他设备连接到我的开发服务器。

如何在本地域中使用 vagrant 和 browsersync？

How do I use vagrant and browsersync with local domain?

vagrant

browser-sync