我使用DDEV作为我的本地托管环境,我的许多项目通过Gulp实现前端自动化。Browsersync是我们前端设置的主要组件,需要通过DDEV容器向主机公开端口。目前的问题有两个方面,从容器向主机公开端口的最佳方式是什么?在DDEV环境中,什么是浏览器同步Gulp任务的最佳设置?
我使用DDEV作为我的本地托管环境,我的许多项目通过Gulp实现前端自动化。Browsersync是我们前端设置的主要组件,需要通过DDEV容器向主机公开端口。目前的问题有两个方面,从容器向主机公开端口的最佳方式是什么?在DDEV环境中,什么是浏览器同步Gulp任务的最佳设置?
5条答案
按热度按时间yzuktlbb1#
公开必要的端口
这种情况的第一部分需要使用Docker Compose文件向软管机公开容器的端口。根据此答案,您需要在
.ddev
目录中创建一个docker-compose.browsersync.yaml
文件。浏览器同步文件示例如下:
我们在这里公开端口3000,因为它是浏览器同步的默认端口,但可以更新以反映项目的需要。
**注意:**将此文件添加到
.ddev
目录后,应重新启动ddev项目.有关使用Docker compose定义新服务的更多信息,请阅读DDEV文档。
设置浏览器同步
这是假设你已经有了一个可以运行的
gulpfile.js
来处理你所需要的其他软件包。如果你还不完全熟悉浏览器同步和Gulp,请参考their docs以获得完整的细节。您可以在初始设置后使用
gulp startServer
进行测试。Gulp将输出一个http
作为测试的外部URL。不过,由于ddev路由器,它可以通过http
或https
访问。uqxowvwt2#
为BrowserSync的HTTP和HTTPS公开端口3000
借用@TXChetG和@Mario埃尔南德斯的答案
在隐藏的/.ddev/ config文件夹中创建一个名为“docker-compose.browsersync.yaml”的文件,并使用下面的代码,正确标记(这非常重要),然后运行命令“ddev restart”
bwleehnv3#
如果你是一个mac用户,而browsersync仍然不能使用上面的解决方案,你可能需要像我一样更新你的/etc/hosts文件。
您可以在this answer中查看更多详细信息。
ql3eal8s4#
我无法从 * 容器内 * 运行browsersync。我更新了本地系统并 * 在本地 * 运行browsersync
我在本页的其他地方使用了Stephen的解决方案(https://stackoverflow.com/a/70190271/18779供快速参考)。
我运行的是Mac,因此我还执行了以下操作:
cd [subtheme dir]
和npm run watch
lymnna715#
上面的提示和从其他职位喜欢:
Using Docker Compose to expose DDEV web container ports to host machine
Chrome can't open localhost:3000 with Gulp / BrowserSync
对于HTTP协议上的网站可能没问题,但对于HTTPS协议上的网站就不行了。
具体来说,我正在DDEV中测试CMS安装,前端/后端中有安全URL。运行
ddev start
命令后,显示我在浏览器中使用https://myproject.ddev.site
或https://127.0.0.1:62751
访问它(套接字随着每次运行DDEV而变化)。我没有安装
drud/ddev-browsersync
包,因为它不代理到HTTPS,在我的情况下,它没有帮助我在所有。我在一个目录中创建了gulpfile.js文件来对scss,js,css,html文件执行复杂的任务。为了不在浏览器中手动重新加载页面,我显然需要BrowserSync。唯一起作用的配置如下:
当我运行
gulp startServer
命令时,首先https://localhost:3002
显示在地址栏中,然后过一会儿它重定向到https://myproject.ddev.site
。我遇到的唯一问题是,每次运行
ddev start
命令后,我必须手动更改https://127.0.0.1:XXXXX
行中的端口。如果DDEV提供了此值,我可以使用它,然后问题就解决了。