使用Browsersync完成DDEV-局部任务

Question

我使用DDEV作为本地托管环境，我的许多项目通过Gulp实现前端自动化。Browsersync是我们前端设置的一个主要组件，并要求端口由DDEV容器向主机公开。当前的问题有两个方面，从容器向主机公开端口的最佳方法是什么?在DDEV环境中，浏览器同步杯任务的最佳设置是什么？

Answer 1

暴露必要的端口

这种情况的第一部分要求使用Docker组合文件将容器的端口暴露到软管机器上。基于这个答案，您需要在.ddev目录中创建一个docker-compose.browsersync.yaml文件。

用于Browser-Sync的文件示例如下：

# Override the web container's standard HTTP_EXPOSE and HTTPS_EXPOSE
# This is to expose the browsersync port.
version: '3.6'
services:
  web:
    # ports are a list of exposed *container* ports
    expose:
      - '3000'
    environment:
      - HTTP_EXPOSE=${DDEV_ROUTER_HTTP_PORT}:80,${DDEV_MAILHOG_PORT}:8025,3001:3000
      - HTTPS_EXPOSE=${DDEV_ROUTER_HTTPS_PORT}:80,${DDEV_MAILHOG_HTTPS_PORT}:8025,3000:3000

我们在这里公开了端口3000，因为它是Browser-Sync的默认版本，但是可以进行更新以反映项目的需要。

注意:在将该文件添加到.ddev目录后，您应该重新启动ddev项目。

有关使用docker组合定义新服务的更多信息，请参见阅读DDEV文档。

在Gulp中设置浏览器同步

这假设您已经准备好使用已经包含的其他必需的包来处理工作的gulpfile.js。如果您不完全熟悉Browser-Sync和Gulp，请参考他们的医生获得详细信息。

const browserSync = require('browser-sync').create();

/*
* Set 'url' (the host and proxy hostnames) to match the canonical url of your ddev project.
* Do not include the http/s protocol in the url. The ddev-router will route the
* host machine's request to the appropriate protocol.
* 
* ex: yoursite.ddev.site
*/
const url = 'yoursite.ddev.site';

/*
* This function only includes the most basic browser-sync settings needed
* to get a watch server running. Please refer to the browser-sync docs for other
* available options.
*/
const startServer = function (done) {
    // Initialize BrowserSync
    browserSync.init({
        proxy: url,
        host: url,
        port: 3000,
    });
    done();
};

exports.startServer = startServer;

您可以在初始设置之后使用gulp startServer进行测试。Gulp将输出一个http作为测试的外部URL。但是，由于有了ddev路由器，可以通过http或https访问它。

Answer 2

为HTTP和HTTPS公开用于BrowserSync的端口3000

小猪-从@TXChetG和答:马里奥·埃尔南德斯得到的答案

在隐藏的/.ddev/ config文件夹中创建一个名为"docker-compose.browsersync.yaml“的文件，下面有代码，并正确地标签(这是非常重要的)，然后运行命令"ddev restart”

# Override the web container standard HTTP_EXPOSE and HTTPS_EXPOSE
# This is to expose the browsersync port.
version: '3.6'
services:
  web:
    # ports are a list of exposed *container* ports
    expose:
      - '3000'
    environment:
      - HTTP_EXPOSE=${DDEV_ROUTER_HTTP_PORT}:80
      - HTTPS_EXPOSE=${DDEV_ROUTER_HTTPS_PORT}:80

Answer 3

如果您是mac用户，而且浏览器同步仍然不能使用上面的解决方案，那么您可能需要像我一样更新/etc/host文件。

您可以在这个答案中查看更多细节。