如何在2个不同的Docker容器中使用gulp浏览器同步?

时间:2019-01-25 14:24:34

标签: node.js docker gulp containers gulp-browser-sync

我正在尝试使用docker设置本地开发环境。

下面的设置已经可以使用这些功能:

容器1:节点正在运行gulp,如果主机系统上发生任何文件更改,则将文件复制到具有卷的容器2中。此方法

容器2:php的apache正在运行,因此我能够在浏览器中看到任何内容。 这也可以

这些功能尚无法解决,我需要您的帮助:

  • 如果我在主机系统上保存了任何文件,则browser-sync-autoreload应该刷新本地主机上的页面

  • 我想指定本地主机域。例如:我想使用www.dev.fancyprojectonlocalhost.com

该怎么做?

这是我的设置:

Dockerfile

FROM node:8.15.0-slim
WORKDIR /usr/src/html/
COPY . /usr/src/html
RUN cd /usr/src/html
RUN npm install --global gulp-cli
RUN npm install
EXPOSE 3000
CMD ["gulp"]

docker-compose.yml

#docker-compose-up -d 
version: '3'
services:
  gulp:
    stdin_open: true
    tty: true
    container_name: docker-gulp
    build: .
    volumes:
      - ".:/usr/src/html"
    ports:
      - "3000:3000"  
      - "3001:3001" 


  web:
    image: php:7.2.2-apache
    container_name: php_web
    volumes: 
      - ./web/:/var/www/html/
    ports:
      - "8888:80"

    stdin_open: true 
    tty: true

从我的口中出来的Browser-Sync.js

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

export function init(callback) {
    browserSync.init({
        //proxy: pkg.urls.dev,
        //proxy: "localhost:8888",  I did try a lot here but nothing did work.
        //port: 8888,
        //notify: false,
        // Do not open browser on start
        //open: false 


    });
    callback();
}

export function reload(callback) {
    browserSync.reload();
    callback();
}

有人知道如何获取自定义域并自动刷新吗?我确实做了很多尝试,但没有任何效果。例如,我确实尝试在gulpfile中使用代理/端口,更改了apache和node-server等的端口,但是我想到的最好结果是使用工作gulp的运行apache。没有自动刷新,也没有特殊的本地主机域。

非常感谢

1 个答案:

答案 0 :(得分:0)

有人确实帮助我找到了解决方案!

使浏览器同步工作:

首先,我的浏览器同步出现了一些问题:

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

export function init(callback) {
    browserSync.init({
        proxy: 'http://web',
        open: false
    });
    callback();
}

export function reload(callback) {
    browserSync.reload();
    callback();
}

我们确实需要http://web,因为docker在docker容器之间创建了默认链接。

在这种情况下, http 很重要。

web来自我的Docker-Compose.yml

version: '3'
services:
  gulp:
    stdin_open: true 
    tty: true
    container_name: docker-gulp
    build: . 
    volumes:
      - ".:/usr/src/html"

    ports:
      - "3000:3000"  
      - "3001:3001" 

  web:

    restart: always
    image: php:7.2.2-apache
    container_name: php_web
    volumes: 
      - ./web/:/var/www/html/
    ports:
      - "80:80"
    stdin_open: true 
    tty: true

我能够从CLI调试带有“ curl”的问题。 docker-compose exec gulp curl http://web进入我的“ gulp”容器,并检查它是否能够到达“ web”容器。如果不是这种情况,它将无法正常工作。另外,请确保为您的口开放端口3000:3000

可能的解决方案,可以在不更改本地主机上的VHOST-Config的情况下配置不同的VHOST-Url

这似乎是最好,最简单的解决方案:https://hub.docker.com/r/jwilder/nginx-proxy

我还没有时间找到解决方案,但是很高兴知道它的存在。