Dockerコンテナー内のBrowsersync
テーマとプラグインの開発に使用するWordpress/MySQL Dockerコンテナーを持っています。私はlocalhost：8000でこれにアクセスします。
それはGulpビルドプロセスを使用しており、私はbrowsersyncをミックスに追加しようとしています。 browsersyncが実際にコンテナからプロキシされるのに苦労しています。 Gulpの出力から、ブラウザで実際に変更を加えていないだけで、変更が生成されていることがわかります。
ここに私のdocker-compose.yml、gulpfile、dockerfile、シェルスクリプトがあります。
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
設定の主な問題は、gulpfileでlocalhostを指していることです。これはホストマシンではなくローカルコンテナーを指しているため、browsersyncはWordpressに接続できません。
まず、内部ポートでwordpressサービスを指すようにgulpfileを更新する必要があります。
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,
// Do not open browser on start
open: false
})
次に、ポートマッピングを追加して、nodeサービスからbrowsersyncサーバーを公開する必要があります。 docker-compose.ymlファイル：
node:
ports:
- "3000:3000"
- "3001:3001"
これで、localhost:3001のbrowsersyncプロキシにアクセスできるようになります。
追伸1つのngninx Dockerコンテナーで複数のサイトを提供している場合は、/ etc/nginx/conf.d/somesite.confで特定のサイトのnginx構成ファイルを編集し、新しい行を追加します：listen：3000;