如何为使用动态 url 路由的节点/反应项目设置 gulp 浏览器同步

Question

我正在尝试将 BrowserSync 添加到我的 react.js 节点项目中。我的问题是我的项目通过 server.js 文件管理 url 路由、侦听端口和猫鼬连接，当我运行一个浏览器同步任务并检查本地主机 url http://localhost:3000 我得到一个 Cannot GET /。

有没有办法强制浏览器同步使用我的 server.js 文件？我应该使用辅助 nodemon 服务器或其他东西（如果我这样做，跨浏览器同步如何工作）？我真的迷路了，我看到的所有例子都增加了更多的混乱。求助！！

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

Answer 1

我们有一个类似的问题，我们可以通过使用代理中间件 (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，但如果您不在生产中处理它，可能不值得为您的开发环境搞乱。

如何为使用动态 url 路由的节点/反应项目设置 gulp 浏览器同步

How to setup gulp browser-sync for a node / react project that uses dynamic url routing

node.js

reactjs

gulp

browser-sync