How to use gulp browser-sync with 2 different docker containers?

Question

I am trying to setup a local development environment with docker.

Those things are already working with my setup below:

container 1: node is running gulp, copy files if any file is changed on the host-system to the container 2 with volumes this works

container 2: apache with php is running, so I am able to see anything in the browser. this works too

Those things do not work yet and I need your help:

• if I save any file on the host-system the browser-sync-autoreload should refresh the page on my localhost

• I would like to specify the localhost-domain. for example: I would like to use www.dev.fancyprojectonlocalhost.com

How to do those things?

This is my setup:

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 from my gulp

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();
}

Anybody got an idea how to get a custom domain and autorefresh working? I did try a lot of things but nothing works. For example I did try to use proxy/ports inside the gulpfile, changed the ports from the apache and the node-server etc. but the best result I came up with is the running apache with the working gulp. Without autorefresh and also no special localhost-domain.

Thanks a lot in advance

Answer 1

Somebody did help me to find a solution!

Get browser-sync to work:

First of all my browser-sync had some problems:

    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();
}

We do need http://web because docker creates a default link between docker containers.

In this case http is important.

web is coming from my 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

I were able to debug the problem with "curl" from the CLI. docker-compose exec gulp curl http://web is going into my "gulp"-container and checks if it is able to reach the "web"-container. If it is not the case it will not work. Also make sure to open port 3000:3000 for your gulp.

Possible solution to configure different VHOST-Urls without changing the VHOST-Config on your local host

This one seems to be the best and easiest solution: https://hub.docker.com/r/jwilder/nginx-proxy

I haven't had time to find a solution yet, but it's good to know it exists.