Trình duyệt đồng bộ trong vùng chứa Docker

Question

Tôi có một thùng chứa dockpress WordPress/MySQL, mà tôi sử dụng để phát triển các chủ đề & plugin. Tôi truy cập này trên localhost: 8000.

Nó sử dụng quy trình xây dựng Gulp & Tôi đang cố gắng thêm trình duyệtync vào danh sách kết hợp. Tôi gặp khó khăn trong việc sử dụng trình duyệt để thực sự proxy ra khỏi vùng chứa. Từ đầu ra Gulp, tôi có thể thấy rằng nó tạo ra các thay đổi, thực sự không thực hiện bất kỳ thay đổi nào trong trình duyệt.

Heres docker-compose.yml, gulpfile, dockerfile & tập lệnh shell của tôi.

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

Các Docker-compose.yml đề cập đến dockerfile sau:

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

dùng để cài đặt ngụm và nút-sass, và cũng có thể sao chép kịch bản gulp-guild.sh sau vào vùng chứa:

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

Vấn đề chính với cấu hình của bạn là bạn đang trỏ đến localhost trong gulpfile. Điều này trỏ đến vùng chứa cục bộ chứ không phải máy chủ của bạn, do đó trình duyệt sẽ không thể kết nối với Wordpress.

Trước tiên, bạn cần phải cập nhật gulpfile để trỏ đến các dịch vụ wordpress, trên cổng nội bộ của mình:

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

Sau đó, bạn cần phải thêm một ánh xạ cổng để lộ máy chủ browsersync từ dịch vụ node của bạn. Trong docker-compose.yml tập tin của bạn:

node: 
    ports: 
     - 3001:3001 

Bây giờ bạn sẽ có thể truy cập proxy browsersync trên localhost:3001.