Flex99
@Flex99
Frontend Developer

Как настроить browser-sync для удаленного сервера?

У меня есть сервер с битриксом на бэкенде, практически все инструменты для комфортной разработки клиентской части я настроил, вся работа осуществляется на сервере. Необходимо сделать hot-reload, но не получается подружить browser-sync с бэкендом, возможно ли это, и как? Сборка всего фронта на gulp.
  • Вопрос задан
  • 8152 просмотра
Решения вопроса 1
Flex99
@Flex99 Автор вопроса
Frontend Developer
Решение проблемы таилось в другом. Оказалось, что фаервол резал 3000 порт, у нас в компании первым делом безопасность. После того как мне открыли порт, я без особых усилий смог настроить browser-sync.
'use strict';
const browserSync = require('browser-sync').create();

gulp.task('bs', function(){
    browserSync.init({
        proxy: "http://example.com/", // проксирование вашего удаленного сервера, не важно на чем back-end 
        logPrefix: 'example.com', // префикс для лога bs, маловажная настройка 
        host:      'example.com', // можно использовать ip сервера
        port:      3000, // порт через который будет проксироваться сервер
        open: 'external', // указываем, что наш url внешний 
        notify:    true,
        ghost:     true,
        files:     [/*массив с путями к файлам и папкам за которыми вам нужно следить*/]
    });
    browserSync.watch([/*массив с путями к файлам и папкам за которыми вам нужно следить*/]).on('change', browserSync.reload); //вотчер для команды перезагрузки bs
});

gulp.task('build', gulp.series('compile', gulp.parallel('watch', 'bs')));

Заходим по ssh на наш сервер и запускаем сборку.
Открываем http://example.com:3000/, и наслаждаемся всеми фишками browser-sync.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
gatilin222
@gatilin222
Frontend-разработчик
На основе вот этого видео попробуйте https://www.youtube.com/watch?v=wE-Oi84UJXE и потом обязательно напишите, удалось ли)
Ответ написан
Комментировать
@Boomerml
Может моё решение кому нибудь пригодиться, оставлю его здесь.

Исходя из комментария https://stackoverflow.com/a/35822444/8400413, настроил следующим образом.

Gulp
browserSync.init({
		socket: {
			domain: "localhost:3000"
		}
	});

Перед < /body> на удалённом сервере
<script id="__bs_script__">//<![CDATA[
			document.write("<script async src='http://localhost:3000/browser-sync/browser-sync-client.js?v=2.18.13'><\/script>");//.replace("HOST", location.hostname));
		//]]></script>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы