Docker容器中的Browsersync
我有一个WordPress的/ MySQLdocker容器，我用它来开发主题和插件。 我在localhost：8000上访问这个。
它使用Gulp构build过程，我正在尝试将浏览器同步添加到组合中。 我很难让浏览器同步代理出容器。 从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'));
docker-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和node-sass，并将以下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
你configuration的主要问题是你在gulpfile中指向localhost 。 这指向本地容器，而不是您的主机，所以browsersync将无法连接到Wordpress。
您首先需要在其内部端口上更新gulp文件以指向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服务中的浏览器同步服务器。 在你docker-compose.yml文件中：
node: ports: - 3001:3001
您现在应该可以访问localhost:3001上的浏览器同步代理。