Как использовать gulp browser-sync с 2 разными контейнерами Docker? - PullRequest
Новая
       57

Как использовать gulp browser-sync с 2 разными контейнерами Docker?

0 голосов
/ 25 января 2019

Я пытаюсь настроить локальную среду разработки с помощью Docker.

Эти вещи уже работают с моей настройкой ниже:

контейнер 1: на узле выполняется gulp, копируйте файлы, если какой-либо файл в хост-системе изменяется наКонтейнер 2 с томами это работает

Контейнер 2: Apache с PHP работает, поэтому я могу видеть что-либо в браузере. это тоже работает

Эти вещи пока не работают, и мне нужна ваша помощь:

  • , если я сохраню какой-либо файлв хост-системе браузер-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 из моего 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();
}

У кого-нибудь возникла идея, как получить настраиваемый домен и работать с автообновлением?Я много чего пробовал, но ничего не работает.Например, я попытался использовать прокси / порты внутри gulpfile, изменил порты из apache и node-server и т. Д., Но лучший результат, который я придумал, это запуск apache с работающим gulp.Без автообновления, а также без специального localhost-домена.

Заранее большое спасибо

1 Ответ

0 голосов
/ 04 февраля 2019

Кто-то помог мне найти решение!

Включите синхронизацию браузера для работы:

Прежде всего, у моей синхронизации браузера были некоторые проблемы: 

    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

Мне удалось отладить проблему с "curl" из CLI.docker-compose exec gulp curl http://web входит в мой "gulp" -контейнер и проверяет, может ли он добраться до "web" -контейнера.Если это не так, это не сработает.Также обязательно откройте порт 3000: 3000 для вашего глотка.

Возможное решение для настройки различных VHOST-URL-адресов без изменения VHOST-Config на локальном хосте

Это лучшее и простое решение: https://hub.docker.com/r/jwilder/nginx-proxy

У меня еще не было времени найти решение, но приятно знать, что оно существует.

...