Docker容器中的Browsersync

Question

我有一個Wordpress/MySQL碼頭容器，我用它來開發主題&插件。我在localhost：8000上訪問它。

它使用一個Gulp構建過程&我想添加browsersync到混合。我很難讓瀏覽器同步代碼出容器。從Gulp輸出中，我可以看到它產生的變化，只是沒有做任何更改瀏覽器。

繼承人我的docker-compose.yml，gulpfile，dockerfile & shell腳本。

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')); 

的搬運工-compose.yml是指以下dockerfile：

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"] 

它安裝吞和節點青菜，並且還複製以下gulp-guild.sh腳本進容器：

#!/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

配置的主要問題是您指向localhost在gulp文件中。這指向本地容器，而不是您的主機，因此瀏覽器同步將無法連接到Wordpress。

你首先需要更新gulpfile指向wordpress服務，其內部端口：

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

然後，你需要添加一個端口映射，從node服務暴露browsersync服務器。在您的docker-compose.yml文件：

node: 
    ports: 
     - 3001:3001 

您現在應該能夠訪問localhost:3001的browsersync代理。