首页 > 解决方案 > 已解决 - Docker 上的 BrowserSync 运行正常并且能够检测到更改,但浏览器似乎没有被触发/重新加载

问题描述

源代码可以从以下位置找到:https ://github.com/kevinchu-work/Docker_with_BrowserSync (现已解决并完全正常工作)

我正在尝试一个非常简单的 Node Docker + BrowserSync + Gulp 一起工作,但浏览器永远无法重新加载

节点:app.js

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/html');
  res.end('<h1>Hello World</h1><div>'+Math.random().toString(36)+'</div>');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

gulpfile.js:nodemon 和浏览器同步

'use strict';

var gulp = require('gulp');
var browserSync = require('browser-sync');
var nodemon = require('gulp-nodemon');

gulp.task('nodemon', function (cb) {

  var started = false;

  return nodemon({
    script: 'app.js',
    env: {
      port: 3000
    },
    ignore: [
      'gulpfile.js',
      'node_modules/'
    ]
  }).on('start', function () {
    if (!started) {
      started = true;
      cb();
    }
  });
});

gulp.task('browser-sync', gulp.series(['nodemon'], function () {
// gulp.task('browser-sync', function () {
  browserSync.init('*.js', {
    open: false,
    proxy: "localhost:3000",
    // files: ["**/*.js"],
    // port: 3000,
    // notify: false
  });
// });
}));

gulp.task('default', gulp.series('browser-sync', function () {
  gulp.watch(["*.*"], function() { console.log("sync"); browserSync.reload; });
}));

startDocker:设置泊坞窗

docker pull node
docker run -t -i -v $(pwd):/app -p 3000:3000 -p 3001:3001 -p:3002:3002 dev /bin/bash

已经,一旦 docker 启动并运行,以下命令触发节点

cd /app
yarn install
yarn global add gulp
gulp

节点,nodemon 运行良好,但端口从 3000 转移到 3001(好吧,我可以忍受),但它永远不会触发浏览器端的刷新。我确实打开了 localhost:3001 并且它运行得很好。

这是运行上一个命令时的输出

root@5f80167a4a37:/project# gulp
[16:20:01] Using gulpfile /project/gulpfile.js
[16:20:01] Starting 'default'...
[16:20:01] Starting 'browser-sync'...
[16:20:01] Starting 'nodemon'...
[16:20:01] Finished 'nodemon' after 405 ms
[16:20:01] Starting '<anonymous>'...
[16:20:01] [nodemon] 2.0.4
[16:20:01] [nodemon] to restart at any time, enter `rs`
[16:20:01] [nodemon] watching path(s): *.*
[16:20:01] [nodemon] watching extensions: js,mjs,json
[16:20:01] [nodemon] starting `node app.js`
Server running at http://127.0.0.1:3000/
[Browsersync] Proxying: http://localhost:3000
[Browsersync] Access URLs:
 -----------------------------------
       Local: http://localhost:3001
    External: http://172.17.0.2:3001
 -----------------------------------
          UI: http://localhost:3002
 UI External: http://localhost:3002
 -----------------------------------
[Browsersync] Watching files...
[16:21:14] [nodemon] restarting due to changes...
[16:21:14] [nodemon] starting `node app.js`
Server running at http://127.0.0.1:3000/
[Browsersync] Reloading Browsers...

Browsersync 确实检测到文件的更改并执行重新加载但浏览器。任何想法?

标签: node.jsdockerbrowser-sync

解决方案


推荐阅读