Browsersync in einem Docker Container

Question

Ich habe einen WordPress/MySQL Docker Container, den ich für die Entwicklung von Designs & Plugins verwende. Ich greife auf localhost: 8000 zu.

Es verwendet einen Gulp-Build-Prozess & Ich versuche Browsersync zum Mix hinzuzufügen. Es fällt mir schwer, den Browsersync dazu zu veranlassen, sich tatsächlich aus dem Container herauszulösen. Von der Gulp-Ausgabe kann ich sehen, dass sie die Änderungen erzeugt, nur keine Änderungen im Browser vorgenommen.

Heres mein docker-compose.yml, gulpfile, dockerfile & Shell-Skript.

version: '2' 

services: 
    wordpress_db: 
     image: mariadb 
     restart: 'always' 
     ports: 
      - 3360:3306 
     volumes: 
      - ./db_data:/docker-entrypoint-initdb.d 
     environment: 
      MYSQL_ROOT_PASSWORD: wordpress 
      MYSQL_DATABASE: wordpress 

    wordpress: 
     depends_on: 
      - wordpress_db 
     image: wordpress 
     restart: 'always' 
     environment: 
      WORDPRESS_DB_NAME: wordpress 
      WORDPRESS_DB_USER: root 
      WORDPRESS_DB_PASSWORD: wordpress 
     ports: 
      - 8000:3000 
     volumes: 
      - ./uploads:/var/www/html/wp-content/uploads 
      - ./plugins:/var/www/html/wp-content/plugins 
      - ./theme:/var/www/html/wp-content/themes/theme 
     links: 
      - wordpress_db:mysql 

    composer: 
     image: composer/composer:php7 
     depends_on: 
      - wordpress 
     restart: 'no' 
     environment: 
      ACF_PRO_KEY: this_would_be_my_ACF_pro_key_:) 
     volumes_from: 
      - wordpress 
     working_dir: /var/www/html/wp-content/themes/theme 
     command: install 

    node: 
     restart: 'no' 
     image: node:slim 
     depends_on: 
      - wordpress 
     volumes_from: 
      - wordpress 
     working_dir: /var/www/html/wp-content/themes/theme 
     build: 
      context: . 
      dockerfile: WordpressBuild 
      args: 
       - SITE_VERSION=0.0.1 

var browserSync = require('browser-sync'); 
var reload  = browserSync.reload; 
var watchify  = require('watchify'); 
var browserify = require('browserify'); 
var source  = require('vinyl-source-stream'); 
var buffer  = require('vinyl-buffer'); 
var gulp   = require('gulp'); 
var gutil  = require('gulp-util'); 
var gulpSequence = require('gulp-sequence'); 
var processhtml = require('gulp-minify-html'); 
var sass   = require('gulp-sass'); 
var autoprefixer = require('gulp-autoprefixer'); 
var watch  = require('gulp-watch'); 
var cleanCSS = require('gulp-clean-css'); 
var uglify  = require('gulp-uglify'); 
var streamify = require('gulp-streamify'); 
var sourcemaps = require('gulp-sourcemaps'); 
var concat  = require('gulp-concat'); 
var babel  = require('gulp-babel'); 
var fontawesome = require('node-font-awesome'); 
var prod   = gutil.env.prod; 

var onError = function(err) { 
    console.log(err.message); 
    this.emit('end'); 
}; 

// bundling js with browserify and watchify 
var b = watchify(browserify('./src/js/app', { 
    cache: {}, 
    packageCache: {}, 
    fullPaths: true 
})); 

gulp.task('js', bundle); 
b.on('update', bundle); 
b.on('log', gutil.log); 

function bundle() { 
    return b.bundle() 
    .on('error', onError) 
    .pipe(source('app.js')) 
    .pipe(buffer()) 
    .pipe(sourcemaps.init()) 
    .pipe(prod ? babel({ 
     presets: ['es2015'] 
    }) : gutil.noop()) 
    .pipe(concat('app.js')) 
    .pipe(!prod ? sourcemaps.write('.') : gutil.noop()) 
    .pipe(prod ? streamify(uglify()) : gutil.noop()) 
    .pipe(gulp.dest('./assets/js')) 
    .pipe(browserSync.stream()); 
} 

// fonts 
gulp.task('fonts', function() { 
    gulp.src(fontawesome.fonts) 
    .pipe(gulp.dest('./assets/fonts')); 
}); 

// sass 
gulp.task('sass', function() { 
    return gulp.src('./src/scss/**/*.scss') 
    .pipe(sourcemaps.init()) 
     .pipe(sass({ 
     includePaths: [].concat(require('node-bourbon').includePaths, ['node_modules/foundation-sites/scss', 'node_modules/motion-ui/src', fontawesome.scssPath]) 
     })) 
     .on('error', onError) 
     .pipe(prod ? cleanCSS() : gutil.noop()) 
     .pipe(prod ? autoprefixer({ 
     browsers: ['last 2 versions'], 
     cascade: false 
     }) : gutil.noop()) 
    .pipe(!prod ? sourcemaps.write('.') : gutil.noop()) 
    .pipe(gulp.dest('./assets/css')) 
    .pipe(browserSync.stream()); 
}); 

gulp.task('watch', function(){ 
    gulp.watch('./src/scss/**/*.scss', ['sass']); 
    gulp.watch('./src/js/**/*.js', ['js']); 
}); 

// browser-sync task for starting the server. 
gulp.task('serve', function() { 
    //watch files 
    var files = [ 
    './assets/css/*.scss', 
    './*.php' 
    ]; 

    //initialize browsersync 
    browserSync.init(files, { 
    //browsersync with a php server 
    proxy: "localhost", 
    notify: false 
    }); 
    gulp.watch('./src/scss/**/*.scss', ['sass']); 

    // gulp.task('default', gulpSequence(['fonts', 'sass', 'js', 'watch'])); 
}); 

// use gulp-sequence to finish building html, sass and js before first page load 
gulp.task('default', gulpSequence(['fonts', 'sass', 'js'], 'serve')); 

Der Andockfensters-compose.yml auf die folgende dockerfile bezieht:

FROM node 

# Grab our version variable from the yml file 
ARG SITE_VERSION 

# Install gulp globally 
RUN npm install -g gulp node-gyp node-sass 

# Install dependencies 
COPY ./gulp-build.sh/
RUN chmod 777 /gulp-build.sh 
ENTRYPOINT ["/gulp-build.sh"] 
CMD ["run"] 

, die in den Zug und die Knoten-Sass, und kopiert auch den folgenden gulp-guild.sh Skript installiert Container:

#!/bin/bash 

cd /var/www/html/wp-content/themes/theme 
# npm rebuild node-sass && npm install && gulp --dev 
npm rebuild node-sass && npm install && gulp 

Answer 1

Das Hauptproblem bei der Konfiguration ist, dass Sie zeigt auf localhost in der gulpfile. Dies verweist auf den lokalen Container und nicht auf Ihren Hostcomputer. Daher kann browsersync keine Verbindung zu Wordpress herstellen.

Sie müssen zuerst die gulpfile aktualisieren den wordpress Dienst auf seinem internen Port-zu-Punkt:

browserSync.init(files, { 
    // The hostname is the name of your service in docker-compose.yml. 
    // The port is what's defined in your Dockerfile. 
    proxy: "wordpress:3000", 
    notify: false 
}) 

Dann brauchen Sie ein Port-Mapping hinzufügen, um den browsersync-Server von Ihrem node Dienst auszusetzen. In Ihrer docker-compose.yml Datei:

node: 
    ports: 
     - 3001:3001 

Sie sollten nun in der Lage sein, den browsersync Proxy für den Zugriff auf localhost:3001.