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服务器。