BrowserSync：代理子域

Question

我有一个 Django 应用程序，它为不同子域上的多个站点提供服务。在开发中，我访问以下站点：

www.myapp.local:8000
data.myapp.local:8000
publish.myapp.local:8000
admin.myapp.local:8000

Note this works using the django_hosts library and through modifying /etc/hosts file, e.g:
127.0.0.1 www.myapp.local
127.0.0.1 data.myapp.local
127.0.0.1 publish.myapp.local
127.0.0.1 admin.myapp.local

但是，我无法弄清楚如何在我基于 Gulp 的工作流程中配置 BrowserSync，以便代理所有子域，在我浏览网站时提供无缝体验，并重新加载我开发的浏览器。

配置 BrowserSync 以代理主站点，例如

browserSync.init(
    [paths.css + "/*.css", paths.js + "*.js", paths.templates + '/**/*.html'], {
    proxy: 'www.myapp.local:8000' 
})

只有 'captures' 主站点，如果您单击 link 到其中一个子域，您将导航出 BrowserSync 会话，Django 将在端口 8000 上直接提供服务。

Answer 1

使用 middleware (using http-proxy-middleware) and rewriteRules:

的组合使其完美运行

const proxy = require('http-proxy-middleware'),

browserSync.init([paths.css + "/*.css", paths.js + "*.js", paths.templates + '/**/*.html'], {
    middleware: [
        function (req, res, next) {
            let target = 'http://' + req.headers.host.replace('myapp.local:3000', 'myapp.local:8000');
            proxy({
                target,
                changeOrigin: true
            })(req, res, next);
        }
    ],
    rewriteRules: [
        {
            match: /myapp.local:8000/g,
            fn: function (req, res, match) {
                return 'myapp.local:3000';
            }
        }
    ]
});

中间件将任何url与父域myapp.local:3000匹配，并在不更改子域的情况下将请求代理到Django监听的端口8000。 rewriteRules 用于重写响应中的任何链接，因此后续导航通过代理正确反向。

BrowserSync：代理子域

BrowserSync: Proxy Subdomains

django

frontend

gulp

browser-sync