WordPress的重定向通過的WebPack開發服務器

Question

我試圖做一個相對簡單的設置與被代理的時候到本地主機，而不是虛擬主機：

• 一個Apache服務器的HTML虛擬主機。
• Webpack和Webpack Dev Server用於資產重新加載和生成。

要完成此操作，Webpack Dev Server proxies其他服務器要通過它不知道如何處理的請求。

使用基本的Python服務器（工作）：

1. 上http://localhost:5000啓動蟒蛇網絡服務器。
2. 運行npm start。
3. Webpack Dev Server使用http://localhost:9090啓動並代理python服務器。
4. 訪問http://localhost:9090並查看python服務器加Webpack資產的HTML結果。

使用Apache服務器：

1. 啓動Apache服務器。
2. 運行npm start。
3. Webpack dev服務器啓動並使用http://localhost:9090代理Apache服務器。
4. 訪問本地主機：9090瀏覽器自動重定向到http://localhost並顯示「It works！」。

如果我在瀏覽器中單獨訪問http://vhost.name，我會看到正確的HTML。我的環境是默認的Apache Server版本：Mac OSX El Capitan上的Apache/2.4.16（Unix）。

的package.json

"scripts": { 
    "test": "node server.js", 
    "start": "npm run start-dev-server", 
    "start-dev-server": "webpack-dev-server 'webpack-dev-server/client?/' --host 0.0.0.0 --port 9090 --progress --colors", 
    "build": "webpack" 
}, 

webpack.config.js

/*global require module __dirname*/ 
var webpack = require('webpack'); 

module.exports = { 
    entry: { 
     app: [ 
      'webpack-dev-server/client?http://localhost:9090', 
      'webpack/hot/only-dev-server', 
      './src/app.js' 
     ] 
    }, 
    output: { 
     path: __dirname + '/dist', 
     filename: '[name]_bundle.js', 
     publicPath: 'http://localhost:9090/dist' 
    }, 
    devServer: { 
     historyApiFallback: true, 
     proxy: { 
      // Python server: works as expected at localhost:9090 
      // '*': 'http://localhost:5000' 

      // Apache virtual host: redirects to localhost instead of 
      // serving localhost:9090 
      '*': 'http://vhost.name' 
     } 
    }, 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin() 
    ] 
}; 

的httpd-vhosts.conf

<VirtualHost vhost.name:80> 
    DocumentRoot "/Path/To/vhost.name" 
    ServerName vhost.name 
     <Directory "/Path/To/vhost.name"> 
      Options FollowSymLinks Indexes MultiViews 
      AllowOverride All 
      # OSX 10.10/Apache 2.4 
      Require all granted 
     </Directory> 
</VirtualHost> 

個主機

127.0.0.1 localhost 

127.0.0.1 vhost.name 

Answer 1

WordPress的來自不同來源的內容使用canonical URLs to help normalize URLs：

[Y] OU無法控制誰鏈接到你的，打字的時候第三方可以犯錯誤或複製粘貼您的網址。這種規範的URL變性有一種傳播方式。也就是說，網站A使用非規範網址鏈接到您的網站。然後站點B查看站點A的鏈接，並將其複製粘貼到他們的博客中。如果您允許非規範網址留在地址欄中，則會有人使用它。這種用法對您的搜索引擎排名不利，並且會損害組成Web的鏈接網絡。通過重定向到規範網址，我們可以幫助阻止這些錯誤的傳播，並且至少會生成301個重定向，以處理人們在鏈接到您的博客時可能犯的錯誤。

此重寫是在嘗試代理時剝離Webpack-dev-server端口號。解決的辦法是在你的主題/ functions.php中添加：

remove_filter('template_redirect', 'redirect_canonical'); 

我們顯然不希望在網站上標出這個運行，因此一個變量添加到wp_config.php根據環境設置：

WP-config.php中

// Toggle to disable canonical URLs to allow port numbers. 
// Required for Webpack-dev-server proxying. 
define('DISABLE_CANONICAL', 'Y', true); 

yourtheme/functions.php的

// Hack for Webpack dev server 
if (DISABLE_CANONICAL == 'Y') { 
    remove_filter('template_redirect', 'redirect_canonical'); 
} 

我遇到瀏覽器「緩存」前一個URL重定向的問題，所以當你做出改變時，它可能不會立即出現。嘗試以隱身模式打開網址，使用其他瀏覽器或重新啓動Webpack和Apache服務器。