醋醋百科网

Good Luck To You!

「今日分享」vue中使用xtermjs 远程连接docker虚拟化容器

大家可能会问

docker系统虚拟容器可以通过命令行远程连接吗?

答:是的,可以通过xtermjs远程实现连接。

下面我们在docker中安装centos7容器,然后通过xtermjs实现远程连接。

docker远程

如何通过xtermjs 远程链接和操作docker虚拟服务呢?

通过官网查看,可以通过websocket进行访问,如下:

打开2375监听端口

2375端口-docker提供对外访问的api,对外提供服务。

1、修改
/usr/lib/systemd/system/docker.service,在[service]的ExecStart ,添加 -H tcp://0.0.0.0:2375

ExecStart=/usr/bin/dockerd -H tcp://0.0.0.0:2375 -H fd:// --containerd=/run/containerd/containerd.sock

2、刷新配置文件,重启docker

systemctl daemon-reload
systemctl restart docker

3、添加防火墙2375/tcp ,并重载防火墙

firewall-cmd --zone=public --add-port=2375/tcp --permanent
firewall-cmd --reload

4、查看系统网络端口2375是否被docker所监听

netstat -tulp

如果此时docker启动失败,报错信息出现 : iptables: No chain/target/match by that name

则重启docker

service docker restart
或
systemctl restart  docker

Vue安装使用

安装xterm

npm install --save xterm

安装xterm-addon-fit

xterm.js的插件,使终端的尺寸适合包含元素。

//xterm.js的插件,使终端的尺寸适合包含元素。
npm install --save xterm-addon-fit

安装xterm-addon-attach

xterm.js的附加组件,用于附加到Web Socket

//xterm.js的附加组件,用于附加到Web Socket
npm install --save xterm-addon-attach

Vue源码实现



<script>
import 'xterm/css/xterm.css'
import { Terminal } from 'xterm'
import { FitAddon } from 'xterm-addon-fit'
import { AttachAddon } from 'xterm-addon-attach'

export default {
  name: 'Terminal',
  data() {
    return {
      containerId: '3d407466c3df'
    }
  },
  mounted() {
    var term = new Terminal(); var fitAddon = new FitAddon()
    var socket = new WebSocket(`ws://192.168.203.132:2375/containers/${this.containerId}/attach/ws?logs=0&stream=1&stdin=1&stdout=1&stderr=1`)
    var attachAddon = new AttachAddon(socket)

    term.loadAddon(attachAddon)
    term.loadAddon(fitAddon)
    term.open(document.getElementById('terminal'))
    fitAddon.fit()
    term.focus()
    socket.onopen = () => { socket.send('\n') } // 当连接建立时向终端发送一个换行符,不这么做的话最初终端是没有内容的,输入换行符可让终端显示当前用户的工作路径

    window.onresize = function() { // 窗口尺寸变化时,终端尺寸自适应
      fitAddon.fit()
    }

    this.term = term
    this.socket = socket
  },
  beforeDestroy() {
    this.socket.close()
    this.term.dispose()
  }
}
</script>

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言