BrowserSync在Laradock中不起作用(使用laravel-mix)

Question

在Windows 10上使用Docker Desktop w/WSL2时，Ubuntu 20.04是发行版。使用Laradock在本地部署项目。

我的Windows hosts文件中的项目域是mgkg.test。(默认情况下，Ubuntu使用与Windows相同的hosts文件；我假设它复制或链接到该文件。)在容器启动并运行的情况下(除了这个项目的容器之外，没有其他容器在运行)，http://mgkg.test工作得很好。

这是我的webpack.mix.js文件(默认注释已被删除；我当前的注释被保留)：

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps()
    .browserSync({
        logLevel: "debug",
        notify: true, // For debugging
        open: false,
        /**
         * Proxy an EXISTING vhost. Browsersync will wrap your vhost
         * with a proxy URL to view your site.
         */
        // proxy: "mgkg.test", // test domain
        // proxy: "nginx" // Docker Compose Service name
        // proxy: "mgkg_nginx_1" // Docker container name
        proxy: {
            target: "http://mgkg.test" // Project URL
        }
    });

(如您所见，我已经为proxy选项尝试了许多不同的值；输出和结果都是相同的。)

当我运行npm run watch时，这是输出(启用了调试)：

laradock@8ae999bf55c6:/var/www/mgkg$ npm run watch                                                                                                                                                                                                                                            > @ watch /var/www/mgkg                                                                                                                        > npm run development -- --watch                                                                                                                                                                                                                                                                                                                                                                                                             > @ development /var/www/mgkg                                                                                                                  > cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"                                                                                                                                                                                                                                                                                          10% building 1/1 modules 0 active                                                                                                              webpack is watching the files…                                                                                                                                                                                                                                                                98% after emitting SizeLimitsPlugin                                                                                                                                                                                                                                                            DONE  Compiled successfully in 4779ms                                                                                               5:57:51 PM                                                                                                                                               [debug] -> Starting Step: Finding an empty port                                                                                                       Asset      Size   Chunks             Chunk Names                                                                                        /css/app.css   178 KiB  /js/app  [emitted]  /js/app                                                                                              /js/app.js  2.91 MiB  /js/app  [emitted]  /js/app                                                                                            [debug] Found a free port: 3000                                                                                                                [debug] Setting Option: port - 3000                                                                                                            [debug] +  Step Complete: Finding an empty port                                                                                                [debug] -> Starting Step: Getting an extra port for Proxy
[debug] +  Step Complete: Getting an extra port for Proxy                                                                                      [debug] -> Starting Step: Checking online status                                                                                               [debug] Resolved www.google.com, setting online: true
[debug] Setting Option: online - true
[debug] +  Step Complete: Checking online status
[debug] -> Starting Step: Resolve user plugins from options
[debug] +  Step Complete: Resolve user plugins from options
[debug] -> Starting Step: Set Urls and other options that rely on port/online status
[debug] Setting multiple Options
[debug] +  Step Complete: Set Urls and other options that rely on port/online status
[debug] -> Starting Step: Setting Internal Events
[debug] +  Step Complete: Setting Internal Events
[debug] -> Starting Step: Setting file watchers
[debug] +  Step Complete: Setting file watchers
[debug] -> Starting Step: Merging middlewares from core + plugins
[debug] Setting Option: middleware - List []
[debug] +  Step Complete: Merging middlewares from core + plugins
[debug] -> Starting Step: Starting the Server
[debug] Proxy running, proxing: http://[whatever proxy is set to]
[debug] Running mode: PROXY
[debug] +  Step Complete: Starting the Server
[debug] -> Starting Step: Starting the HTTPS Tunnel
[debug] +  Step Complete: Starting the HTTPS Tunnel
[debug] -> Starting Step: Starting the web-socket server
[debug] Setting Option: clientEvents - List [ "scroll", "scroll:element", "input:text", "input:toggles", "form:submit", "form:reset", "click" ][debug] +  Step Complete: Starting the web-socket server
[debug] -> Starting Step: Starting the UI
[debug] Setting Option: session - 1605376671887
[UI] Starting Step: Setting default plugins
[UI] Step Complete: Setting default plugins
[UI] Starting Step: Finding a free port
[UI] Step Complete: Finding a free port
[UI] Starting Step: Setting options also relevant to UI from BS
[UI] Step Complete: Setting options also relevant to UI from BS
[UI] Starting Step: Setting available URLS for UI
[debug] Getting option via path: [ 'urls' ]
[UI] Step Complete: Setting available URLS for UI
[UI] Starting Step: Starting the Control Panel Server
[UI] Using port 3001
[UI] Step Complete: Starting the Control Panel Server
[UI] Starting Step: Add element events
[UI] Step Complete: Add element events
[UI] Starting Step: Registering default plugins
[UI] Step Complete: Registering default plugins
[UI] Starting Step: Add options setting event
[UI] Step Complete: Add options setting event
[debug] +  Step Complete: Starting the UI
[debug] -> Starting Step: Merge UI settings
[debug] Setting Option: urls - Map { "local": "http://localhost:3000", "external": "http://172.28.0.5:3000", "ui": "http://localhost:3001", "ui-external": "http://localhost:3001" }
[debug] +  Step Complete: Merge UI settings
[debug] -> Starting Step: Init user plugins
[debug] Setting Option: userPlugins -
[debug] +  Step Complete: Init user plugins
[Browsersync] Proxying: http://[whatever proxy is set to]
[Browsersync] Access URLs:
 -----------------------------------
       Local: http://localhost:3000
    External: http://172.28.0.5:3000
 -----------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -----------------------------------
[Browsersync] Watching files...

请注意，External URL指向IP地址(而不是测试域)。该IP地址列在nginx容器内运行的ifconfig命令的结果中：

bash-5.0# ifconfig
eth0      Link encap:Ethernet  HWaddr 02:42:AC:1C:00:07  
          inet addr:172.28.0.7  Bcast:172.28.255.255  Mask:255.255.0.0
          UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
          RX packets:405 errors:0 dropped:0 overruns:0 frame:0
          TX packets:353 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:0 
          RX bytes:229638 (224.2 KiB)  TX bytes:131732 (128.6 KiB)

eth1      Link encap:Ethernet  HWaddr 02:42:AC:1B:00:03  
          inet addr:172.27.0.3  Bcast:172.27.255.255  Mask:255.255.0.0
          UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
          RX packets:18 errors:0 dropped:0 overruns:0 frame:0
          TX packets:0 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:0 
          RX bytes:1396 (1.3 KiB)  TX bytes:0 (0.0 B)

lo        Link encap:Local Loopback  
          inet addr:127.0.0.1  Mask:255.0.0.0
          UP LOOPBACK RUNNING  MTU:65536  Metric:1
          RX packets:2 errors:0 dropped:0 overruns:0 frame:0
          TX packets:2 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:1000 
          RX bytes:129 (129.0 B)  TX bytes:129 (129.0 B)

但是，使用这两个IP地址中的任何一个都无法在浏览器中访问测试站点；localhost或127.0.0.1也无法工作(使用或不使用BrowserSync端口#3000)。但是http://localhost:3001链接确实可以在浏览器中显示BrowserSync UI。然而，单击BrowserSync UI中的任何测试站点链接都会导致404错误(由nginx生成)或this site cannot be reached (由浏览器生成)。

有谁能解释一下：

• 为什么“裸”测试网址可以工作，但代理网址不能？
• 为什么BrowserSync将IP地址替换为测试域？
• 为什么IP地址不能工作？
• 如何使其正确工作？

提前感谢！

Answer 1

我已经设法通过添加webpack.mix.js来使其正常工作

​

mix.browserSync({
    open: false,
    proxy: {
        target: "nginx", // replace with your web server container
        proxyReq: [
            function(proxyReq) {
                proxyReq.setHeader('HOST', 'mydomain.test'); // replace with your site host
            }
        ]
    }
})

​

Answer 2

我通过在webpack.mix.js中添加以下代码来实现这一点

mix.browserSync({
    open: false,
    proxy: {
        target: "nginx", // replace with your web server container
        proxyReq: [
            function(proxyReq) {
                proxyReq.setHeader('HOST', 'mydomain.test:3000'); // replace with your site host and port of BrowserSync
            }
        ]
    }
})

注意:设置BrowserSync主机的端口非常重要。

proxyReq.setHeader('HOST', 'mydomain.test:3000');