# webssh

**Repository Path**: qs0010/webssh

## Basic Information

- **Project Name**: webssh
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-05
- **Last Updated**: 2026-03-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WebSSH

基于 Web 的 SSH 终端客户端，支持文件管理、系统监控和多会话。

## 截图预览

![登录页面](screenshot-login.jpg)

![工作区](screenshot-workspace.jpg)

## 功能特性

- 🖥️ **Web 终端** - 基于 xterm.js 的完整终端体验
- 📁 **文件管理** - SFTP 文件浏览、上传、下载、编辑
- 📊 **系统监控** - 实时 CPU、内存、磁盘、网络流量监控
- 📜 **登录历史** - 查看服务器登录记录，检测异常登录
- 🔐 **多种认证** - 支持密码和私钥认证
- 🔑 **凭据存储** - AES-256 加密存储，支持一键连接
- 📱 **响应式设计** - 适配桌面和移动设备
- 🔄 **自动重连** - 断线自动重连机制
- 💾 **多标签会话** - 同时管理多个 SSH 连接，切换时保持状态
- 🎨 **主题切换** - 支持亮色/暗色主题，可自定义终端字体
- 📋 **右键菜单** - 终端复制粘贴（Ctrl+V 支持）、文件管理操作
- ✨ **现代化 UI** - 毛玻璃效果、粒子动画、圆润设计

## 快速部署

### Docker 部署（推荐）

```bash
docker run -d \
  --name webssh \
  -p 4000:4000 \
  -v webssh-data:/app/data \
  --restart unless-stopped \
  webssh:latest
```

或使用 Docker Compose：

```yaml
services:
  webssh:
    image: webssh:latest
    container_name: webssh
    ports:
      - "4000:4000"
    volumes:
      - webssh-data:/app/data  # 持久化凭据存储
    environment:
      - TZ=Asia/Shanghai
      - NODE_ENV=production
      - CREDENTIAL_KEY=your-64-char-hex-key-here  # 使用 openssl rand -hex 32 生成
      # - ACCESS_PASSWORD=your-secret-password  # 可选：设置访问密码保护面板
    restart: unless-stopped
    logging:
      driver: "json-file"
      options:
        max-size: "10m"
        max-file: "3"

volumes:
  webssh-data:
```

```bash
docker-compose up -d
```

访问 `http://your-server:4000`

### 从源码构建

```bash
# 克隆代码
git clone https://gitee.com/qs0010/webssh.git webssh
cd webssh

# 设置npm源（可选，加速依赖安装）
npm config set registry https://registry.npmmirror.com

# 安装依赖
cd backend && npm install && cd ..
cd frontend && npm install && cd ..

# 开发模式
cd backend && npm run dev    # 后端 :4000
cd frontend && npm run dev   # 前端 :3000

# 构建生产版本
cd frontend && npm run build
cd ../backend && npm run build
NODE_ENV=production node dist/index.js

## 编译文件说明

### 前端编译文件

前端编译后会生成在 `frontend/dist` 目录：

- `index.html` - 主页面文件
- `assets/` - 静态资源目录，包含：
  - CSS 文件（如 `index-C501ZyBa.css`）
  - JavaScript 文件（如 `index-BjTp20QZ.js`）
  - 页面组件文件（如 `ConnectionPage-B3OM9Of_.js`、`WorkspacePage-DK0ONbzr.js`）

### 后端编译文件

后端编译后会生成在 `backend/dist` 目录：

- `index.js` - 编译后的主入口文件
- 其他编译后的 TypeScript 文件

### 编译文件使用方法

1. **开发环境启动**：
   ```bash
   # 启动后端服务（会自动使用编译后的前端文件）
   cd backend && npm run dev
   ```

2. **生产环境启动**：
   ```bash
   # 构建前端和后端
   cd frontend && npm run build && cd ../backend && npm run build
   
   # 启动生产服务（无密码）
   NODE_ENV=production node dist/index.js
   
   # 启动生产服务（设置访问密码）
   NODE_ENV=production ACCESS_PASSWORD=your-secret-password node dist/index.js
   ```

3. **部署编译文件**：
   - 前端编译文件会自动复制到 `backend/public` 目录
   - 后端服务启动时会从 `public` 目录提供静态文件
   - 访问 `http://your-server:4000` 即可使用

### 构建 Docker 镜像

```bash
docker build -t webssh:latest .
docker push webssh:latest
```

## 功能说明

### 系统监控与登录历史

点击右侧边缘的箭头按钮展开侧边面板：

**系统监控**
- CPU 使用率
- 内存占用（已用/总量，悬停显示 Top 10 进程）
- 磁盘使用（已用/总量）
- 网络流量（上传/下载速率）
- 系统负载和运行时间

**登录历史**
- 查看最近登录记录
- 显示当前在线用户
- 检测失败的登录尝试（安全警告）

### 凭据存储

保存连接时可选择"记住凭据"：
- 凭据使用 AES-256-GCM 加密存储在服务器
- 下次连接时可一键登录，无需重复输入密码/密钥
- 已保存凭据的连接会显示 🔑 图标

### 终端操作

- 选中文本后右键：复制
- 无选中内容时右键：粘贴
- 支持 Ctrl+V 粘贴
- 多标签支持：可同时连接多个服务器，标签页切换

### 文件管理

- 支持文件/文件夹的创建、重命名、删除
- 支持文件上传和下载
- 支持在线编辑文本文件
- 支持文件夹和文件添加收藏，点击一键直达
- 右键菜单可在当前目录打开新终端

## 环境变量

| 变量 | 说明 | 默认值 |
|------|------|--------|
| PORT | 服务端口 | 4000 |
| NODE_ENV | 运行环境 | development |
| ACCESS_PASSWORD | 访问密码（可选，设置后需要输入密码才能访问） | 空（不需要密码） |
| CREDENTIAL_KEY | 凭据加密密钥（64位hex字符串） | 随机生成 |
| CREDENTIAL_STORE_PATH | 凭据存储路径 | ./data/credentials.json |

### 设置访问密码

如果你想保护 WebSSH 面板，可以设置访问密码：

```yaml
services:
  webssh:
    image: webssh:latest
    environment:
      - ACCESS_PASSWORD=your-secret-password  # 设置访问密码
```

设置后，访问页面时会弹出密码输入框，支持"记住密码"功能（7天有效）。

### 生成加密密钥

```bash
# 使用 openssl 生成 64 位 hex 密钥
openssl rand -hex 32

# 或使用 Python
python3 -c "import secrets; print(secrets.token_hex(32))"

# 或使用 Node.js
node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"
```

## 技术栈

- **前端**: React + TypeScript + Tailwind CSS + xterm.js + Framer Motion
- **后端**: Node.js + Express + ssh2 + WebSocket
- **部署**: Docker + Docker Compose

## 安全说明

- 密码和私钥不会存储在浏览器本地
- 凭据使用 AES-256-GCM 加密存储在服务器
- 建议在生产环境设置固定的 CREDENTIAL_KEY
- 建议配合 HTTPS 和反向代理使用

## 许可证

MIT License © 2026