Как настроить gulp browser-sync для проекта node / response, который использует динамическую маршрутизацию URL-адресов

Я пытаюсь добавить BrowserSync в свой проект узла response.js. Моя проблема в том, что мой проект управляет маршрутизацией URL-адресов, портом прослушивания и соединением мангуста через файл server.js, что очевидно, когда я запускаю задачу синхронизации браузера и проверяю URL-адрес localhost http://localhost:3000 Я получаю сообщение Невозможно GET /.

Есть ли способ заставить синхронизацию браузера использовать мой файл server.js? Должен ли я использовать вторичный сервер nodemon или что-то в этом роде (и если я это сделаю, как может работать кроссбраузерная синхронизация)? Я действительно заблудился, и все примеры, которые я видел, вносят еще больше путаницы. Помощь!!

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./"
        },
        files: [
            'static/**/*.*',
            '!static/js/bundle.js'
        ],
    });
});

reactjs node.js gulp browser-sync
person Finglish    schedule 09.04.2015    source источник

Ответы (1)


arrow_upward
3
arrow_downward

У нас была аналогичная проблема, которую мы смогли исправить с помощью промежуточного программного обеспечения прокси (https://www.npmjs.com/package/proxy-middleware). BrowserSync позволяет добавлять промежуточное программное обеспечение, чтобы вы могли обрабатывать каждый запрос. Вот урезанный пример того, что мы делали:

var proxy = require('proxy-middleware');
var url = require('url');

// the base url where to forward the requests
var proxyOptions = url.parse('https://appserver:8080/api');
// Which route browserSync should forward to the gateway
proxyOptions.route = '/api'

// so an ajax request to browserSync http://localhost:3000/api/users would be 
// sent via proxy to http://appserver:8080/api/users while letting any requests
// that don't have /api at the beginning of the path fall back to the default behavior.

browserSync({
    // other browserSync options
    // ....
    server: {
        middleware: [
            // proxy /api requests to api gateway
            proxy(proxyOptions)
        ]
    }
});

Самое замечательное в этом то, что вы можете изменить место нахождения прокси-сервера, чтобы вы могли тестировать его в разных средах. Следует отметить, что все наши маршруты начинаются с / api, что значительно упрощает этот подход. Было бы немного сложнее выбрать маршруты для прокси, но, надеюсь, приведенный выше пример даст вам хорошую отправную точку.

Другой вариант - использовать CORS, но если вы не имеете дело с этим в производственной среде, возможно, не стоит возиться с вашей средой разработки.

person Ryan    schedule 09.04.2015
comment
это было именно то, что я хотел. Я пробовал использовать стандартный синтаксис прокси из документов синхронизации браузера, но безуспешно. - person Finglish; 11.04.2015