自动化脚本，一键配置 noVNC 远程浏览器-HQY 一个和谐有爱的空间

29

2025
06
22:58:41

自动化脚本，一键配置 noVNC 远程浏览器

想要利用 GitHub Codespace 的 Ubuntu 来享受超快的没有额外限制的网络，不能说的太明显。除了上一篇文章提到的安装一个操作系统容器，如 Win11，还可以直接利用 noVNC+浏览器的方法，但是 VNC 只传输屏幕像素不支持音频，可能比较卡顿，只能看到画面，听不到声音。

另外，如果不想使用这种方法，也不想安装庞大的操作系统容器，文末也有直接安装 Chrome 容器的 yml 文件。

下面提供的 novnc-install.sh 是一键自动安装脚本。

# 在GitHub Codespace中novnc-install.sh脚本建议创建在/workspaces下，
# 这是 Codespace 的默认持久化存储位置
# 生产环境优化建议，通过SSH隧道访问（推荐）
# ssh -L 6080:localhost:6080 codespace@your-codespace-url
# 仅依赖内置组件，零额外资源消耗，自动重定向至VNC界面
# GitHub Codespace NoVNC 安装脚本
# 如果修改过 /usr/share/novnc/下的html，可能会导致noVNC页面空白，
# 可以删掉这个目录并卸载noVNC，novnc-install.sh脚本会安装需要的软件

#!/bin/bash

# 环境初始化
set -e
USERNAME=codespace
DATA_DIR="/workspaces/novnc_data"
LOG_FILE="$DATA_DIR/setup.log"
NOVNC_DIR="/usr/share/novnc"
CERT_DIR="$DATA_DIR/certs"

# 创建持久化目录
mkdir -p "$DATA_DIR""$CERT_DIR"
chown -R "$USERNAME""$DATA_DIR"

# 日志函数
log(){
localtimestamp=$(date'+%Y-%m-%d %H:%M:%S')
echo -e "[$timestamp] $1"|tee -a "$LOG_FILE"
}

# 颜色输出
green(){echo -e "\033[32m$1\033[0m";}
red(){echo -e "\033[31m$1\033[0m";}

# 开始执行
log "开始 NoVNC 部署..."

# 安装必要组件（只安装 midori，不装 firefox/chromium）
log "检测并安装必要组件..."
sudoapt update -y
sudoaptinstall -y novnc tightvncserver x11-xserver-utils midori websockify openssl openbox
log "组件安装完成"

# 生成自签名证书
log "生成HTTPS证书..."
openssl req -new -x509 -days 365 -nodes -out "$CERT_DIR/cert.pem"\
  -keyout "$CERT_DIR/key.pem" -subj "/CN=localhost"
chmod600"$CERT_DIR/cert.pem""$CERT_DIR/key.pem"
log "HTTPS证书生成完成"

# 生成安全的 VNC 密码
log "生成 VNC 密码..."
VNC_PASS=$(openssl rand -base64 16|tr -dc 'a-zA-Z0-9'|head -c 8)
echo -n "$VNC_PASS"| vncpasswd -f >"$DATA_DIR/vnc.pass"
chmod600"$DATA_DIR/vnc.pass"
log "VNC 密码已生成并安全存储"

# 配置 X 会话启动 - 仅启动 openbox 和 midori
log "配置浏览器专用 VNC 环境..."
mkdir -p "/home/$USERNAME/.vnc"
cat>"/home/$USERNAME/.vnc/xstartup"<<'EOF'
#!/bin/sh
unset SESSION_MANAGER
unset DBUS_SESSION_BUS_ADDRESS
export XDG_RUNTIME_DIR="/run/user/$(id -u)"

xrdb "$HOME/.Xresources"
xsetroot -solid grey
openbox-session &
sleep 2
midori https://www.google.com &
EOF
chmod +x "/home/$USERNAME/.vnc/xstartup"
log "浏览器专用 VNC 环境配置完成"

# 创建自动重定向页面 - 无提示重定向
log "配置自动重定向..."
cat<<'EOF'|sudotee"$NOVNC_DIR/index.html"> /dev/null
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="refresh" content="0; url=vnc.html">
  </head>
  <body>
    <p>Redirecting to <a href="vnc.html">vnc.html</a>...</p>
  </body>
</html>
EOF
sudochmod +r "$NOVNC_DIR/index.html"
log "自动重定向配置完成"

# 不要覆盖 vnc.html，保持官方原版

# 创建启动脚本 - 强制HTTPS
log "生成智能启动脚本..."
cat>"/workspaces/start-novnc.sh"<<EOF
#!/bin/bash
# 固定分辨率为1920x1080，适配大多数显示器
RES="1920x1080"

# 清理旧进程
tightvncserver -kill :1 > /dev/null 2>&1 || true
pkill -f websockify || true
sleep 1

# 创建日志目录
mkdir -p "$DATA_DIR"

# 启动 VNC 服务
echo "启动 VNC 服务..."
tightvncserver :1 -geometry \$RES -depth 24 -rfbauth "$DATA_DIR/vnc.pass" > "$DATA_DIR/xvnc.log" 2>&1

# 等待 VNC 服务启动
sleep 10

# 启动 NoVNC 代理 - 强制HTTPS
echo "启动 NoVNC 代理 (HTTPS)..."
websockify --web "$NOVNC_DIR" --cert "$CERT_DIR/cert.pem" --key "$CERT_DIR/key.pem" 6080 localhost:5901 \
  > "$DATA_DIR/novnc.log" 2>&1 &

# 等待服务启动
sleep 15

# 验证服务状态
echo "验证服务状态..."
if pgrep -f "Xtightvnc" > /dev/null && pgrep -f "websockify" > /dev/null; then
  echo "✅ NoVNC 服务已成功启动"
  echo "VNC 密码: $VNC_PASS"
  echo "HTTPS 访问地址: https://localhost:6080"
else
  echo "错误：NoVNC 服务启动失败"
  echo "请检查日志：cat $DATA_DIR/xvnc.log 或 cat $DATA_DIR/novnc.log"
  exit 1
fi
EOF
chmod +x "/workspaces/start-novnc.sh"
log "启动脚本生成完成"

# 配置 Codespace 自动启动
log "设置 Codespace 启动任务..."
mkdir -p "/home/$USERNAME/.codespace"
cat>"/home/$USERNAME/.codespace/startup.sh"<<EOF
#!/bin/bash
/workspaces/start-novnc.sh &
sleep 25
echo "✅ NoVNC 服务已启动"
echo "VNC 密码: $VNC_PASS"
echo "HTTPS 访问地址: https://localhost:6080"
EOF
chmod +x "/home/$USERNAME/.codespace/startup.sh"
log "启动任务配置完成"

# 启动服务进行测试
log "测试启动 NoVNC 服务..."
/workspaces/start-novnc.sh

# 输出访问指南
log "====================================="
green "? NoVNC 部署成功完成！访问步骤："
echo"1. 点击左侧边栏 'Ports' 图标"
echo"2. 找到 6080 端口，点击 'Advanced' 按钮"
echo"3. 选择 'HTTPS' 选项卡，点击 'Preview' 按钮"
echo"4. 在弹出的安全提示中选择'继续访问'"
echo"5. 自动进入VNC界面，输入密码: $VNC_PASS"
echo""
echo"管理命令："
echo"  启动服务: /workspaces/start-novnc.sh"
echo"  停止服务: tightvncserver -kill :1 && pkill -f websockify"
echo"  查看日志: cat $DATA_DIR/novnc.log"
echo"  VNC 日志: cat $DATA_DIR/xvnc.log"
log "====================================="

可以直接使用 docker-compose -f chrome.yml up -d 命令来执行下面的 yml 文件，这种浏览器容器的方式，有些情况下屏幕分布情况不好，不能铺满整个屏幕，调整缩放或者分辨率参数也很难解决。比较推荐的方式还是比较厚重的操作系统容器，虽然占资源稍多，但是速度很快和功能完善，是非常好的 VPS 实现方式。

services:  kasm_chrome:    image: kasmweb/chrome:1.17.0    container_name: kasm_chrome    ports:      - "443:6901"      - "6901:6901"    environment:      - VNC_PW=kasm123      - RESOLUTION=1920x1080      - KASM_AUTO_LOGIN=true      - KASM_USER=kasm_user      - CHROME_ARGS=--window-size=1920,1080    shm_size: 512m    restart: unless-stopped    deploy:      resources:        limits:          memory: 2g

推荐本站淘宝优惠价购买喜欢的宝贝: