問題描述
我有一個 Wordpress/MySQL docker 容器，用于開發主題和插件.我在 localhost:8000 上訪問它.
I've got a Wordpress/MySQL docker container, which I use for developing themes & plugins. I access this on localhost:8000.
它使用 Gulp 構建過程 &我正在嘗試將 browsersync 添加到組合中.我很難讓 browsersync 真正代理出容器.從 Gulp 輸出中，我可以看到它生成了更改，實際上并沒有在瀏覽器中進行任何更改.
It uses a Gulp build process & I am trying to add browsersync to the mix. I'm having a hard time getting the browsersync to actually proxy out of the container. From the Gulp output I can see that its generating the changes, just not actually making any changes in the browser.
這是我的 docker-compose.yml、gulpfile、dockerfile 和外殼腳本.
Heres my docker-compose.yml, gulpfile, dockerfile & 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 引用以下 dockerfile:
The docker-compose.yml refers to the following 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 腳本復制到容器中:
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
推薦答案
您的配置的主要問題是您在 gulpfile 中指向 localhost.這指向本地容器，而不是您的主機，因此 browsersync 將無法連接到 Wordpress.
The primary problem with your configuration is that you're pointing to localhost in the gulpfile. This points to the local container, not your host machine, so browsersync won't be able to connect to Wordpress.
您首先需要更新 gulpfile 以在其內部端口上指向 wordpress 服務:
You first need to update the gulpfile to point to the wordpress service, on its internal port:
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 文件中:
Then you need to add a port mapping to expose the browsersync server from your node service. In your docker-compose.yml file:
node:
ports:
- "3000:3000"
- "3001:3001"
您現在應該可以訪問 localhost:3001 上的 browsersync 代理了.
You should now be able to access the browsersync proxy on localhost:3001.
附:如果您在一個 ngninx docker 容器中提供多個站點，您可以在/etc/nginx/conf.d/somesite.conf 中編輯特定站點的 nginx 配置文件并添加新行:聽:3000；
P.S. In case you have more than one site serving in one ngninx docker container, you can edit nginx config file for specific site in /etc/nginx/conf.d/somesite.conf and add new line: listen: 3000;
這篇關于Docker 容器中的 Browsersync的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！