How to run livereload with gulp within a docker container?(如何在 docker 容器中使用 gulp 运行 livereload?)
问题描述
我创建了一个 docker 容器来使用 gulp 运行任务.所有任务都在运行,问题是我无法在 Chrome 中启用 livrereload,尽管我在容器中暴露了 35729 端口.
I created a docker container to run tasks with gulp. All tasks are running, the problem is I can't enable livrereload in Chrome although I exposed the 35729 port in my container.
这里是 Dockerfile:
Here is the Dockerfile :
FROM ubuntu:latest
MAINTAINER jiboulex
EXPOSE 80 8080 3000 35729
RUN apt-get update
RUN apt-get install curl -y
RUN apt-get install software-properties-common -y
RUN add-apt-repository ppa:chris-lea/node.js
RUN apt-get update
RUN apt-get install nodejs -y
RUN curl -L https://www.npmjs.com/install.sh | sh
RUN npm install --global gulp -y
# overwrite this with 'CMD []' in a dependent Dockerfile
CMD ["/bin/bash"]
我使用以下命令创建图像:
I create the image with the following command :
docker build -t gulp_image .
我创建了一个容器:
docker run --name=gulp_container -i -t --rm -v /var/www/my_app:/var/www/my_app:rw gulp_image bash
然后在我的容器中
cd /var/www/my_app
gulp
这是我的 Gulpfile.js
Here is my Gulpfile.js
var gulp = require('gulp'),
livereload = require('gulp-livereload'),
exec = require('child_process').exec;
gulp.task('js', function() {
gulp.src([
'./src/js/*.js'
]).pipe(livereload());
});
gulp.task('watch', function(){
var onChange = function (event) {
console.log('File '+event.path+' has been '+event.type);
};
livereload.listen();
gulp.watch([
'./src/js/*.js'
], ['js'])
.on('change', onChange);
});
gulp.task('default', ['watch', 'js']);
当我编辑一个 js 文件时,我可以在我的容器中看到文件已被处理,但是当我尝试在我的浏览器 (Chrome) 中启用实时重新加载时,我收到以下消息:无法连接到 LiveReload 服务器.."
When I edit a js file, I can see in my container that the files are processed but when I try to enable live reload in my browser (Chrome), I got the following message : "Could not connect to LiveReload server.."
有人知道我错过了什么或没有做什么吗?感谢阅读!
Anyone got a clue about what I missed or didn't do ? Thanks for reading !
推荐答案
在容器中暴露端口并不意味着将在 docker 主机上打开端口.您应该使用 docker run
-p
选项.文档说:
Exposing ports in a container does not imply that the ports will be opened on the docker host. You should be using the docker run
-p
option. The documentation says:
-p=[] : 将容器的端口或一系列端口发布到主机
-p=[] : Publish a container᾿s port or a range of ports to the host
格式: ip:hostPort:containerPort
|ip::containerPort
|hostPort:containerPort
|containerPort
hostPort
和 containerPort
都可以指定为一个端口范围.
Both hostPort
and containerPort
can be specified as a range of ports.
为两者指定范围时,范围内的容器端口数必须与范围内的主机端口数匹配.(例如,-p 1234-1236:1234-1236/tcp
)(使用 'docker port' 查看实际映射)
When specifying ranges for both, the number of container ports in the range must match the number > of host ports in the range. (e.g., -p 1234-1236:1234-1236/tcp
)
(use 'docker port' to see the actual mapping)
由于您尝试了 -p containerPort
形式,当您运行 docker run
命令时,docker 会随机选择在您的主机(Linux mint)上打开的实际端口.要确定选择了哪个端口,您必须使用 docker port
命令.
Since you tried the -p containerPort
form, the actual port opened on your host (Linux mint) was randomly chosen by docker when you run the docker run
command. To figure out what port was chosen, you have to use the docker port
command.
由于不方便,所以应该使用-p hostPort:containerPort
形式,并指定hostPort
为35729
.(我还假设您希望端口 80、8080 和 3000 可以以相同的方式访问)
Since this is not convenient, you should use the -p hostPort:containerPort
form, and specify that hostPort
is 35729
. (I also assume you expect ports 80, 8080 and 3000 to be accessible in the same manner)
运行容器的命令是:
docker run --name=gulp_container -i -t --rm
-v /var/www/my_app:/var/www/my_app:rw
-p 35729:35729
-p 80:80
-p 8080:8080
-p 3000:3000
gulp_image bash
处理端口的更简单方法是在 主机网络模式下运行 docker 容器.在这种模式下,在容器上打开的任何端口实际上都是在主机网络接口上打开的(它们实际上都是共享同一个接口).
An easier way to deal with ports is to run your docker container in host networking mode. In this mode, any port opened on the container is in fact opened on the host network interface (they are actually both sharing the same interface).
然后您将使用以下命令启动您的容器:
You would then start your container with:
docker run --name=gulp_container -i -t --rm
-v /var/www/my_app:/var/www/my_app:rw
--net=host
gulp_image bash
这篇关于如何在 docker 容器中使用 gulp 运行 livereload?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:如何在 docker 容器中使用 gulp 运行 livereload?
基础教程推荐
- Chart.js 在线性图表上拖动点 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 直接将值设置为滑块 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01