我有以下的基于wordpress docker的环境
version: '3.2' services: node: depends_on: - wordpress image: node:latest volumes: - ~/Documents/Git/gblsf-wp-child-theme:/usr/src/app:rw - wordpress-data:/var/www/html:rw # - /Users/kendallarneaud/Documents/SERVER/htdocs/gblsf/wp-content/uploads:/var/www/html/wp-content/uploads - /usr/src/app/node_modules working_dir: /usr/src/app entrypoint: yarn command: install ports: - '3000:3000' - '3001:3001' mysql: image: mysql:latest ports: - '3306:3306' volumes: - mysql-data:/var/lib/mysql:rw environment: - MYSQL_ROOT_PASSWORD=wordpress restart: always wordpress: depends_on: - mysql links: - mysql image: visiblevc/wordpress:latest ports: - 8000:80 - 443:443 volumes: - ./wordpress/upload.ini:/usr/local/etc/php/conf.d/uploads.ini # Optional tweaks to the php.ini config - ~/Documents/SERVER/htdocs/gblsf/wp-content/uploads:/app/wp-content/uploads:rw - wordpress-data:/app environment: DB_HOST: mysql DB_NAME: wordpress DB_PASS: wordpress THEMES: >- [Parallax-One]https://downloads.themeisle.com/Parallax-One/latest/Parallax-One.zip, gblsf-parallax-one PLUGINS: >- pods, icegram-rainmaker, wordpress-countdown-widget, wp-media-library-categories, [WP-API]https://github.com/WP-API/WP-API/archive/master.zip, URL_REPLACE: globalsercurityforum.com,192.168.99.100:8000 WP_DEBUG: 'true' WP_DEBUG_LOG: 'true' WP_DEBUG_DISPLAY: 'true' volumes: wordpress-data: driver_opts: type: none device: /Users/kendallarneaud/Documents/SERVER/htdocs/gblsf o: bind,rw,uid=1000 mysql-data: driver: local 正如你会注意到我有一个运行WordPress的框架的PHP服务器。 然后我有一个节点服务器运行webpack /浏览器同步我的主题发展。
这是我的webpackconfiguration。
/* eslint default-case:0 */ const path = require('path'); const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); // extracts css into its own file instead of inlining it in js bundle const NPMInstallPlugin = require('npm-install-webpack2-plugin'); const BrowserSyncPlugin = require('browser-sync-webpack-plugin'); const bsOptions = require('./start'); // =========================================================================== // CONSTANTS // =========================================================================== const { THEME_NAME, PROXY_TARGET, THEME_PATH, PATHS } = require('./env.config'); const LOADER_INCLUDES = [ PATHS.src ]; const DEVELOPMENT = 'development'; const PRODUCTION = 'production'; // =========================================================================== // SETUP ENV // =========================================================================== const ENV = process.env.NODE_ENV === 'production' ? PRODUCTION : DEVELOPMENT ; // =========================================================================== // CONFIG EXPORT // =========================================================================== module.exports = { entry: getEntry(ENV), watch:true, output: { path: PATHS.build, filename: '[name].js', //publicPath: '.', sourceMapFilename: '[file].map', }, module: { loaders: getLoaders(ENV), }, plugins: getPlugins(ENV), target: 'web', }; function getEntry(env) { const entry = {}; entry.main = [ path.resolve(PATHS.src, 'js/main.js') ]; entry.style = path.resolve(PATHS.src, 'sass/style.scss'); return entry; } function getLoaders(env) { const loaders = [ { test: /\.js$/, include: LOADER_INCLUDES, loader: 'babel-loader', query: { cacheDirectory: true, }, }, { test: /\.(DS_Store)$/, include: LOADER_INCLUDES, loader: 'ignore-loader', query: { cacheDirectory: false, }, }, { test: /\.(jpe?g|png|gif|svg)$/i, loaders: [ 'file-loader?name=images/[name].[ext]', 'image-webpack-loader' ], exclude: /node_modules/, include: __dirname, }, { test: /\.(woff|woff2|eot|ttf|svg)$/, include:LOADER_INCLUDES, loader: 'url-loader?limit=100000&context=src/fonts&name=fonts/[name].[ext]' } , { test: /\.s?css$/, include: LOADER_INCLUDES, loader: ExtractTextPlugin.extract(( '' + 'css-loader' + '?sourceMap=true' + '!' + 'sass-loader' + '?sourceMap=true' )), }]; return loaders; } function getPlugins(env) { const plugins = [ new webpack.DefinePlugin({ 'ENV': JSON.stringify(env) // sets ENV constant to development or production }) ]; switch (env) { case PRODUCTION: // optimizations plugins.push(new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })); plugins.push(new webpack.optimize.DedupePlugin()); plugins.push(new webpack.optimize.OccurenceOrderPlugin()); break; case DEVELOPMENT: plugins.push(new NPMInstallPlugin({ save: true })); plugins.push(new webpack.NoEmitOnErrorsPlugin()); plugins.push(new BrowserSyncPlugin(bsOptions)); break; } plugins.push(new ExtractTextPlugin('style.css')); return plugins; } function getCssLoader() { if (ENV === 'production') { return ExtractTextPlugin.extract({ fallbackLoader: "style-loader", loader: "css-loader?importLoaders=1!postcss-loader" }); } else { return 'style-loader!css-loader?importLoaders=1!postcss-loader'; } }
当我运行Docker环境时，我可以从端口8000访问网站，并且可以访问端口3001上的BrowserSync UI。但由于某种原因，我无法通过端口3000上的Browsersync环境访问网站。
这是我的BrowserSyncconfiguration
/* eslint default-case:0 */ const path = require('path'); const fs = require('fs-extra'); // const browserSync = require('browser-sync').create(); const htmlInjector = require('bs-html-injector'); // =========================================================================== // CONFIG // =========================================================================== const { PROXY_TARGET, PATHS, THEME_PATH } = require('./env.config'); module.exports= { port: 3000, files: [{ match: ['wp/wp-content/themes/gblsf-parallax-one/**/*.php'], fn : function (event, file) { console.log('event'); let self = this; fs.copy(path.resolve(__dirname, 'wp/wp-content/themes/gblsf-parallax-one'), path.resolve(PATHS.base) ) .then(() => self.reload() ) .catch(err => console.error(err)) } }], proxy: { // proxy local WP install target: PROXY_TARGET, }, watchOptions: { usePolling: true }, // this gets annoying open: false, };
PROXY_TARGET设置在“ http：// localhost：8000 ”，我可以成功导航。 那么，为什么我不能通过端口3000访问该网站？