質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.21%

vagrantのサーバー上でbrowser-syncを動作させたい

解決済

回答 2

投稿

  • 評価
  • クリップ 2
  • VIEW 3,164

t-book

score 34

はじめまして!以下、投稿させていただきます。

■やりたいこと
ローカルでファイルを修正し、vagrant側のサーバー上でその更新を感知してライブリロードさせたい
※修正ファイルはhtml, css, js, phpなどフロントに関するものです

■環境など
□ローカル側
・デスクトップPC(windows7)
・Desktop/.../vagrant/build/

□vagrant側
・Webサーバーを用意(centos+apache)
・192.168.33.10でブラウザ、sftpアクセス可能
・/var/www/html/public_html/ 
  ※public_html→ドキュメントルート

■やろうとしている手順
1. ローカルでgulpを使用し、公開ファイルを/build/以下に出力する
2. そのままgulp-sftpで、vagrant(192.168.33.10)の.../public_html/へ一式ファイルアップロードする
3. /var/www/html/public_htmlと同じ並びにgulpを用意し、gulpを使ってbrowser-syncを使用できるようにする
4. gulpで/public_html/以下のファイルを監視し、更新があればbrowser-syncを発動させる
5. ブラウザで192.168.33.10へアクセスし、ライブリロードを確認する

■困っていること■
上記4までは上手く行っているようなのですが、肝心のブラウザでのライブリロードを確認することができません。
※gulpのログ(vagrant ssh > gulp)には、変更に応じてReloading Browsers...と表示はされていきます

--------
<質問1:>
自分ではゲストOS/ホストOSのネットワーク周りの設定が不足しているのかなと思いはしますが、あまりその方面の知識が無いため、何をどう確認・設定してよいか検討が付きません。なにか怪しそうなところ、お分かりになりそうなことはありますでしょうか。。。

<質問2:>
やりたい動作が確認できていないのにアレですが、sftpでファイルを一括で送ると、かなりのファイル数が変更された!と見なされるかと思います。その度browserSyncが発動すると処理が重くなるのかとの心配もあります。ファイル送信が全て終わったらそこで1回のみreloadを実行する、もしくはreloadは連続して実行はさせない、といった処理は可能なものでしょうか。
--------

どうぞよろしくお願いいたします。

なお実行しているgulpfile.jsは以下の様なものです
var gulp        = require("gulp");
var browserSync = require('browser-sync');
var reload      = browserSync.reload;

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./public_html/"
        }
    });
});

gulp.task('bs-reload', function () {
    browserSync.reload();
});

gulp.task('default',['browser-sync'], function() {
    gulp.watch("./public_html/**/*", ['bs-reload']);
});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

0

自己解決したのでメモしておきます。

■質問1: vagrant上でライブリロードを実現させる

gulp.task("server", function() {
  browserSync.init({
    host: "192.168.33.10",
    open: false
  });
});

上記実行すると、browser-sync-client.xxx.jsを読み込めと言われるので
素直にhtmlに提示されたスクリプトを追加


■質問2: 連続して発生する処理の負荷を抑えたい

setTimeoutを使って連続処理を間引く

gulp.task("watch", function() {
  var timer;
  gulp.watch('監視するファイル').on("change", function() {
    clearTimeout(timer);
    timer = setTimeout(function () {
      // リロード処理
    }, 200);
  });
});

参考
http://webamb.com/javascript/1275.html

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

vagrantの共有フォルダの設定で
ホストOSのbuildフォルダが
ゲストOSのpublic_htmlになるように設定し、
browserSyncでproxyの設定をすればご希望の動作をするのではないかと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/02/18 21:43

    回答ありがとうございます!
    すみません、情報が不十分でした。

    vagrantの共有フォルダはかなり遅く処理に時間が掛かってしまい、今回のケースでは使い物にならなかったため、このようなsftpで送る方法を取りました。
    またvagrant1.5から使えるrsync-autoも試してみましたが(わざわざwindowsPCにrsyncをインストールしました...)、以下事情により断念しました。

      ・現状rsyncはホスト→ゲストの一方通行
      ・/public_html/中にサーバーから"も"出力されるファイルが入ってくる
      ・ローカルと同期されると、ファイルが消えてしまう
      →\(^o^)/

    またbrowserSyncのproxyオプションも試してみましたが(sftpの場合でですが)
    上手く動作しませんでした。

    proxy : '192.168.33.10' // この記述が間違っているのかもしれませんが...

    どうぞよろしくお願いします。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる