web-dev-qa-db-ja.com

ローカルドメインでvagrantとbrowsersyncを使用するにはどうすればよいですか？

私はvagrantを使用しており、etc/Hostファイルを更新するように構成しています。ここに例を示します。

10.20.1.36  example.dev

次に、 http://example.dev/ を使用してVMのApacheサーバーにアクセスできます。

コマンドラインからbrowsersyncを使用したいのですが、自分のサイトにアクセスできません。 macsyncとvagrant VMにbrowsersyncをインストールしています。 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で実行すると、 http：// localhost：3001 / でbrowsersync uiにアクセスできますが、私のWebサイトにはアクセスできません。

どこで実行すればよいかわかりません。ブラウザでサイトにアクセスする方法。 VMのポートを転送する必要がある場合。

Webを検索すると多くの結果が返されますが、それらはすべて不快なものであり、私はどちらも使用していません。

EDIT：vagrantにポート転送を追加してから、vm内からbrowser-syncを起動します。すべてが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

vagrantbrowser-sync
32
KahunaCoder

ここに私がそれを機能させた方法があります。

Vagrantにポート転送を追加してから、vm内からbrowser-syncを起動します。すべてが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

7
KahunaCoder

私はこれが答えられたことを知っています、そして私は最初に@KahunaCoderのソリューションを使って立ち上がって実行したので、ありがとう！

ただし、Vagrant内からgulpfileを実行すると、非常に遅くなることがわかりました。だから、私はそれが役立つ場合に備えてこの解決策を投稿すると思いました。

私の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

（VagrantのApacheはポート80で実行されています。ポート3001はBrowsersync UIにアクセスするためだけなので、私はポート3001の転送を気にしませんでした）

ここで、プロジェクトから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と「同期」されており、一元的に制御してアクションをミラーリングできます。

提供された外部アドレスにより、同じネットワーク上の他のデバイスを介して開発サーバーに接続できます。

2
Rodent

1.-私はボックスを使用しました cerobox

2.-構成仮想ホストC:\Windows\System32\drivers\etc\Host Windows

192.168.33.10   exampleurl.app

3.-実行するvagrant upフォルダープロジェクト

4.- browser-syncをインストールする

npm install -g browser-sync

5.- browse-syncを実行する

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
1
chandzul