Browsers in a Docker container

Question

I have a Wordpress / MySQL docker container that I use to develop themes and plugins. I am accessing this on localhost: 8000.

It uses the Gulp build process, and I'm trying to add a browser to the list. I find it difficult to get the browser actually proxy from the container. From the output of Gulp, I see that it generates changes, simply without making any changes to the browser.

Heres my docker-compose.yml, gulpfile, dockerfile and shell script.

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 refers to the following docker file:

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

which installs Gulp and node-sass, and also copies the following gulp -guild.sh script into the 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

The main problem with your configuration is that you point to localhost in gulpfile. This indicates the local container, not your host computer, so the browser will not be able to connect to Wordpress.

First you need to update gulpfile to point to the wordpress service on your internal port:

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

Then you need to add a port mapping to open the browsersync server from the node service. In the docker-compose.yml :

 node: ports: - 3001:3001 

Now you can access the browsersync proxy server on localhost:3001 .