时间戳

首页 > 解决方案 > BrowserSync：代理子域

django - BrowserSync：代理子域

问题描述

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

请注意，这可以使用django_hosts库并通过修改/etc/hosts文件来工作，例如：

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' 
})

仅“捕获”主站点，如果单击指向其中一个子域的链接，则导航出 BrowserSync 会话，并将由 Django 在端口 8000 上直接提供服务。

标签： djangogulpfrontendbrowser-sync

解决方案

使用中间件（使用http-proxy-middleware）和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 用于重写响应中的任何链接，因此后续导航通过代理正确地反向返回。

推荐阅读