BrowserSync не работает с VPS с установленным Nginx

Я использую Cloud9 IDE на моем Ubuntu 14.04 VPS в качестве среды разработки, и сейчас я работая над приложением Nodejs + Express и пользуясь преимуществами gulp и удаленных ssh терминалов.

Но высокие порты (например, 8080, 8081, ...) заблокированы на моем рабочем месте, и все, что у меня есть, это порт 80!

Итак, я настроил Nginx для сопоставления всех моих доменов с их поддоменами с разными портами на моем локальном хосте VPS. Например, от domain1.com до http://localhost:8080 или от sub1.domain2.de до http://localhost:9090 и так далее, чтобы иметь возможность обслуживать разные приложения на одном VPS через порт 80.

Все работает нормально, пока я не попытаюсь настроить BrowserSync для автоматизации перезагрузки в браузере моего ПК. Вот псевдоконфиг:

Таблица карты Nginx: (Работает нормально)

  • ahs502.ir to http://localhost:8081
  • dev.ahs502.ir to http://localhost:8082
  • bs.ahs502.ir to http://localhost:8083
  • test.ahs502.ir to http://localhost:8084

Задача Gulp для BrowserSync: (Кажется, работает нормально)

var bs, browserSync = require("browser-sync");
...
gulp.task('bs', ['start-node'], () => {
    bs = browserSync.create();
    bs.init({
        proxy: "localhost:8081", // Address of my running local node server
        port: 8082, // dev. ...
        ui: {
            port: 8083, // bs. ...
            weinre: {
                port: 8084 // test. ...
            }
        }
    });
    bs.watch("app/views/*.jade").on("change", bs.reload);
});

Затем я запускаю задачу Gulp: (В моем удаленном терминале более ssh на моем VPS)

$ gulp bs

Он запускается без ошибок, и я могу прекрасно просматривать dev.ahs502.ir в браузере моего ПК, НО именно здесь я сталкиваюсь с периодически повторяющейся ошибкой в ​​консоли моего браузера:

GET http://dev.ahs502.ir:8082/browser-sync/socket.io/?EIO=3&transport=polling&t=LEye85F          browser-sync-client.2.11.2.js:1
net::ERR_CONNECTION_TIMED_OUT

GET http://dev.ahs502.ir:8082/browser-sync/socket.io/?EIO=3&transport=polling&t=LEyeEh8          browser-sync-client.2.11.2.js:1
net::ERR_CONNECTION_TIMED_OUT

GET http://dev.ahs502.ir:8082/browser-sync/socket.io/?EIO=3&transport=polling&t=LEyeLGy          browser-sync-client.2.11.2.js:1
net::ERR_CONNECTION_TIMED_OUT

...

И автоматическая перезагрузка не работает.

Он просто добавляет дополнительный :8082 в конец http://dev.ahs502.ir (который будет переведен в http://localhost:8082 на моем сервере сам по себе), поэтому запрос не может быть разрешен и истечет время ожидания.

Я сделал все, что мог, но не смог это исправить! Любая помощь будет приложена !!

Извините за долгую историю. Спасибо.


node.js nginx proxy gulp browser-sync
person Hessamoddin A Shokravi    schedule 28.03.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Наконец-то я нашел хороший ответ!

Я настроил Nginx на:

сопоставить dev.ahs502.ir с localhost:8082/ и

сопоставьте dev.ahs502.ir/browser-sync/socket.io/ с localhost:8083/browser-sync/socket.io/ следующим образом:

server {
    listen 80;
    server_name dev.ahs502.ir;

    location / {
        proxy_pass http://localhost:8082/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location /browser-sync/socket.io/ {
        proxy_pass http://localhost:8083/browser-sync/socket.io/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

затем установите свойство socket в параметрах BrowserSync:

var bs, browserSync = require("browser-sync");
...
gulp.task('bs', ['start-node'], () => {
    bs = browserSync.create();
    bs.init({
        proxy: "localhost:8081", // Address of my running local node server
        port: 8082, // dev. ...

        socket: {
            path: "/browser-sync/socket.io",
            clientPath: "/browser-sync",
            namespace: "/browser-sync",
            domain: "dev.ahs502.ir"
        },

        ui: {
            port: 9090, // bs. ...
            weinre: {
                port: 9091 // test. ...
            }
        }
    });
    bs.watch("app/views/*.jade").on("change", bs.reload);
});

Следующая важная вещь - не использовать порт 8083 ни для чего, когда вы используете порт 8082 в качестве порта browser-sync. Итак, я использовал порт 9090 для пользовательского интерфейса browser-sync вместо порта 8083.

Вот и все !

и всем спасибо.

person Hessamoddin A Shokravi    schedule 24.04.2016