node.js - 已解决 - 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 确实检测到文件的更改并执行重新加载但浏览器。任何想法?
解决方案
推荐阅读
- android-youtube-api - 使用 YouTube Android Player API 时的数据隐私
- batch-file - 将特定文件类型移动到子文件夹中的批处理文件
- javascript - Javascript,更改对象值然后调用 Object.keys( ).forEach 中的函数
- asp.net - ASP.NET CORE MVC - 将相同的操作重定向到视图中的另一个控制器
- sql - 如何从 SQL 中的 2 个表中获取最小值和最大值
- xamarin.forms - Xamarin Forms Converter 在页面消失时被调用?
- awk - 使用 ksh(AIX) 时如何在 awk 中调用变量?
- r - 使用 ggplot2 的箱线图看起来很压缩
- r - write.csv() 从 Mac OS 写入的结果与从 Windows 10 写入的结果不同?
- python - 想要在 google colab 中训练模型时遇到编码错误