手動改寫請求特定的網址Browsersync

我使用BrowserSync在一個有些奇怪的設置，在那裏我進行代理我的網絡服務器（Apache的一個碼頭工人的容器），但也從一個服務的WebPack熱模塊更換（HMR） dev服務器。手動改寫請求特定的網址Browsersync

在我的本地開發環境，設置看起來是這樣的：

https://mytestsite.localhost - 在一個碼頭工人容器

https://localhost:8888一個Apache服務 - 的WebPack開發服務器，服務HMR

https://localhost:3000 - BrowserSync`

對於硬重載，這一切工作正常 - 中的WebPack開發服務器似乎對消息傳遞需要重新加載和所有爲w埃爾。

是我遇到的問題是用熱重載。由BS代理服務的文檔應該讀取由webpack-dev-server提供的hotupdate.json。一旦接收到熱更新，頁面試圖加載/hotupdate.json（我認爲告訴它該代碼片段回暖），但是，因爲它是一個相對URL，瀏覽器嘗試GET https://localhost:3000/hotupdate.json，其中404，因爲這hotupdate.json實際放送通過Webpack服務器，例如https://localhost:8888/hotupdate.json。

因爲我知道這個資源的絕對URL，所以我想強制BrowserSync將任何請求重定向到/hotupdate.json到https://localhost:8888/hotupdate.json。我認爲我可以用一些中間件來做到這一點，但是我很掙扎，可能是因爲我從來沒有完全使用Express風格的中間件。

我試過這樣的東西，但沒有工作！

browserSync({ 
    proxy: { 
     target: `https://${process.env.APP_HOST_PATH}`, 
     middleware: [ 
      dontProxyHotUpdate, 
      require('webpack-dev-middleware')(bundler, { 
       noInfo: true, 
       publicPath: webpackConfig.output.path 
      }), 
     ] 
    }, 
    files: [ 
     'app/css/*.css', 
     'app/*.html' 
    ] 
}); 

function dontProxyHotUpdate (req, res, next){ 
    if(req.url === '/hotupdate.json'){ 
     req.url = 'https://127.0.0.1:8888/hotupdate.json'; 
    } 
    next(); 
}

這絕對加載中間件，因爲我可以，比方說，console.log(req.url)，但我不能夠重寫URL請求。我想可能的解決方案要麼是重寫請求URL，要麼直接覆蓋響應。

N.B.有人可能會問爲什麼我不直接使用webpack-dev-server，因爲它自己很好地服務於HMR。它的確如此，但是它也不能很好地重寫頁面內的錨元素，例如，將https://mytestsite.localhost/link更改爲https://localhost:3000/link。這對於在開發過程中瀏覽網站非常重要（這很好，但不是必需的），但對於重寫資源鏈接尤其重要 - 特別是SVG，除非路徑，主機和端口都匹配，否則將無法加載。

來源

2016-09-16 shankie_san

那麼，最後我整理了我自己的問題！

我結束了使用http-proxy-middlware寫我自己的中間件 - 這樣。

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

browserSync({ 
    proxy: { 
     target: `https://${process.env.APP_HOST_PATH}`, 
     middleware: [ 
      dontProxyHotUpdate, 
      require('webpack-dev-middleware')(bundler, { 
       noInfo: true, 
       publicPath: webpackConfig.output.path 
      }), 
      // require("webpack-hot-middleware")(bundler) // I don't think that we want this here as it can be handled by the webpack dev server 
     ], 
    }, 

    // no need to watch '*.js' here, webpack will take care of it for us, 
    // including full page reloads if HMR won't work 
    files: [ 
     path.join(source, '**/*.php'), 
     path.join(source, 'style.css') 
    ] 
}); 

var dontProxyHotUpdate = proxy('/hotupdate*', { 
    target: 'https://127.0.0.1:8888/', 
    changeOrigin: true, // for vhosted sites, changes host header to match to target's host 
    logLevel: 'debug', 
    secure: false 
});

來源

2016-09-19 13:12:31

手動改寫請求特定的網址Browsersync

回答

相關問題