javascript - 如何在 docker 容器中使用 gulp 运行 livereload?

标签 javascript docker gulp livereload

我创建了一个 docker 容器来使用 gulp 运行任务。 所有任务都在运行,问题是我无法在 Chrome 中启用 livrereload,尽管我在容器中暴露了 35729 端口。

这里是 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"]

我使用以下命令创建图像:

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

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 服务器。 。”

有人知道我错过了什么或没有做什么吗? 感谢阅读!

最佳答案

在容器中公开端口并不意味着这些端口将在 docker 主机上打开。您应该使用 docker run -p选项。文档说:

-p=[] : Publish a container᾿s port or a range of ports to the host

format: ip:hostPort:containerPort | ip::containerPort | hostPort:containerPort | containerPort

Both hostPort and containerPort can be specified as a range of ports.

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命令。

由于不方便,所以应该使用-p hostPort:containerPort形式,并指定hostPort35729(我还假设您希望端口 80、8080 和 3000 可以以相同的方式访问)

运行容器的命令是:

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

处理端口的更简单方法是在 host networking mode 中运行 docker 容器。 .在这种模式下,在容器上打开的任何端口实际上都是在主机网络接口(interface)上打开的(它们实际上都是共享同一个接口(interface))。

然后您将使用以下命令启动您的容器:

docker run --name=gulp_container -i -t --rm \
    -v /var/www/my_app:/var/www/my_app:rw \
    --net=host \ 
    gulp_image bash

关于javascript - 如何在 docker 容器中使用 gulp 运行 livereload?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32265998/

相关文章:

javascript - 在模态对话中打开完整的 html(带有 head、css 等)

node.js - 在 Windows 主机上通过 Docker 执行 npm 安装

javascript - 在我的 Angularjs 应用程序中使用 Node 模块

javascript - Gulp-rev-all 在每次运行时创建新文件

docker-compose 创建目录而不是文件

javascript - 与普通 'gulp less' 命令相比,“Gulp watch”事件需要双倍的编译时间

javascript - 如何从数组数组创建 "flattened"组?

javascript - 如何使jsp表格行可点击来调用javascript函数

javascript - 如何在 ionic 列表中显示两个右对齐的图标?

postgresql - docker postgres,无法在 Windows 中映射卷