文章目录[x]
- 1:# 什么是WebTop
- 2:# Webtop 优势
- 3:# 适用场景
- 4:# Linux系统管理系统
- 5:# 基础镜像构建相关脚本
- 5.1:## Node+Vscode基础镜像
# 什么是WebTop
Webtop（项目地址：https://github.com/linuxserver/docker-webtop）是一款基于Docker的轻量级容器，能在浏览器中操作完整的Linux桌面环境。它支持Xfce、KDE、MATE等多种桌面环境，自带音频支持/剪贴板同步/文件上传下载等实用功能，堪称移动端Linux神器。
# Webtop 优势
1. 跨平台作战：有浏览器就能用
2. 桌面环境任选：Alpine/Ubuntu双系统，并且可以构建自己的系统
3. 资源占用友好：1GB内存即可流畅运行，比传统虚拟机节省70%资源
4. 企业级安全：支持HTTPS加密访问，可配置双重身份验证
5. 无缝数据同步：浏览器标签页关闭自动保存工作状态，支持挂载本地目录
# 适用场景
1. 临时需要Linux环境的Windows用户
2. 移动端轻量级开发调试
3. 给学生党搭建编程实验环境
4. 企业内网部署安全沙箱环境
# Linux系统管理系统
基于Webtop的特点我们开发了一套企业内部Linux系统环境管理系统，系统分为管理端和用户端，管理员可以通过管理端为用户创建基础环境，用户使用账号密码通过浏览器进行系统操作。
管理端环境管理看板
管理端环境创建界面
管理端环境管理界面
用户选择所属系统环境界面
用户-Ubuntu系统界面
用户-Kylin系统界面
# 基础镜像构建相关脚本
## Node+Vscode基础镜像
dockerfile
# 基于 linuxserver.io 的 KDE Webtop 镜像
FROM lscr.io/linuxserver/webtop:ubuntu-kde
# 如需代理
ENV http_proxy=http://192.168.2.19:7897
ENV https_proxy=http://192.168.2.19:7897
# 1. 安装常用依赖和 Node.js 所需工具
RUN apt-get update && \
apt-get install -y --no-install-recommends \
curl \
wget \
ca-certificates \
git \
gnupg \
apt-transport-https \
software-properties-common \
&& \
apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
# 2. 安装 Node.js (使用 NodeSource 官方仓库安装最新 LTS 版本)
ENV NODE_MAJOR=20
RUN curl -fsSL https://deb.nodesource.com/setup_${NODE_MAJOR}.x | bash - && \
apt-get install -y nodejs && \
apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
# 验证 Node.js 和 npm 安装
RUN node --version && npm --version
# 3. 配置 npm 全局目录（避免权限问题）
RUN mkdir -p /opt/npm-global && \
npm config set prefix /opt/npm-global && \
echo "export PATH=/opt/npm-global/bin:\$PATH" >> /etc/bash.bashrc && \
echo "export PATH=/opt/npm-global/bin:\$PATH" >> /etc/profile
ENV PATH=/opt/npm-global/bin:$PATH
# 4. 安装常用的全局 npm 包（可选）
RUN npm install -g yarn pnpm
# 5. 下载并安装 VS Code
RUN wget -q --show-progress -O /tmp/vscode.deb \
'https://code.visualstudio.com/sha/download?build=stable&os=linux-deb-x64' && \
apt-get update && \
apt-get install -y /tmp/vscode.deb && \
rm /tmp/vscode.deb && \
apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
# 6. 创建 VS Code 的桌面快捷方式（KDE 菜单图标）
RUN cat >/usr/share/applications/code.desktop <<'EOF'
[Desktop Entry]
Version=1.0
Type=Application
Name=Visual Studio Code
GenericName=Text Editor
Comment=Code Editing. Redefined.
Icon=/usr/share/pixmaps/vscode.png
Exec=/usr/bin/code --no-sandbox --user-data-dir=/config/.vscode %F
Terminal=false
Categories=Development;IDE;
MimeType=text/plain;inode/directory;
StartupNotify=true
StartupWMClass=Code
EOF
# 7. 创建符号链接，便于命令行使用
RUN ln -sf /usr/bin/code /usr/local/bin/vscode
# 8. 设置 npm 和 VS Code 目录权限
RUN chmod -R 755 /opt/npm-global && \
chown -R abc:abc /opt/npm-global || true
# 9. 构建完成后清除代理环境变量
ENV http_proxy=
ENV https_proxy=
WORKDIR /config
# 构建镜像 sudo docker build -t lscr.io/linuxserver/webtop:ubuntu-kde-node . # 启动镜像 sudo docker run -d \ --name=webtop-kde-node \ -e PUID=1000 \ -e PGID=1000 \ -e LANG=zh_CN.UTF-8 \ -e LANGUAGE=zh_CN:zh \ -e LC_ALL=zh_CN.UTF-8 \ -e TZ=Asia/Shanghai \ -p 13300:3000 \ -p 13301:3001 \ -v $(pwd)/selkies-kde-node:/config \ --shm-size="1gb" \ --restart unless-stopped \ lscr.io/linuxserver/webtop:ubuntu-kde-node # 镜像导出为文件 sudo docker save -o ubuntu-kde-node.tar lscr.io/linuxserver/webtop:ubuntu-kde-node # 加载镜像 sudo docker load -i ubuntu-kde-node.tar # 进入容器交互 sudo docker exec -it <容器id/容器名称> /bib/bash # 查看容器最近的日志 sudo docker logs <容器id/容器名称> --tail 50