625 lines
19 KiB
Markdown
625 lines
19 KiB
Markdown
# Web 远程桌面 HTTPS 配置指南（新手完整版）
|
||
|
||
本指南帮助你从零配置 HTTPS，实现手机/平板通过浏览器访问远程桌面。
|
||
|
||
## 方案架构图
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────────────┐
|
||
│ 互联网 │
|
||
│ │
|
||
│ ┌──────────┐ ┌─────────────────────────────────────────────┐ │
|
||
│ │ 手机 │ │ 公网服务器 (Linux/Windows) │ │
|
||
│ │ 平板 │ HTTPS │ ┌─────────────┐ ┌─────────────────┐ │ │
|
||
│ │ 电脑 │ ──────── │ │ Nginx │ ──── │ FRP Server │ │ │
|
||
│ │ (浏览器) │ :8080 │ │ (SSL证书) │ :9000│ (frps) │ │ │
|
||
│ └──────────┘ │ └─────────────┘ └────────┬────────┘ │ │
|
||
│ │ 域名: your.domain.com │ │ │
|
||
│ └────────────────────────────────┼────────────┘ │
|
||
│ │ │
|
||
│ TCP 隧道 │
|
||
│ │ │
|
||
└───────────────────────────────────────────────────────────┼────────────────┘
|
||
│
|
||
┌───────────────────────────────────────────────────────────┼────────────────┐
|
||
│ 本地网络 │ │
|
||
│ │ │
|
||
│ ┌─────────────────────────────────────┐ │ │
|
||
│ │ Windows 电脑 (主控) │ │ │
|
||
│ │ ┌─────────────┐ ┌─────────────┐ │ ┌────────────▼───────────┐ │
|
||
│ │ │ Yama │───│ FRP Client │◄─┼───│ FRP 隧道 │ │
|
||
│ │ │ Web服务 │ │ (frpc) │ │ └────────────────────────┘ │
|
||
│ │ │ :9000 │ └─────────────┘ │ │
|
||
│ │ └──────┬──────┘ │ │
|
||
│ └─────────┼───────────────────────────┘ │
|
||
│ │ │
|
||
│ │ 远程控制 │
|
||
│ ▼ │
|
||
│ ┌──────────────────────────────────────────────────────────────────┐ │
|
||
│ │ 被控设备 (支持 Windows / Linux) │ │
|
||
│ │ │ │
|
||
│ │ ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌───────────┐ │ │
|
||
│ │ │ Windows A │ │ Windows B │ │ Linux A │ │ Linux B │ ... │ │
|
||
│ │ └───────────┘ └───────────┘ └───────────┘ └───────────┘ │ │
|
||
│ └──────────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
└───────────────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**数据流向**：手机浏览器 → HTTPS → Nginx → FRP Server → FRP Client → Yama → 被控设备
|
||
|
||
---
|
||
|
||
## Web 远程桌面的优势
|
||
|
||
### 随时随地，即开即用
|
||
|
||
- **无需安装客户端** - 打开浏览器就能用，手机、平板、任意电脑都行
|
||
- **跨平台支持** - iOS、Android、Windows、Mac、Linux 通吃
|
||
- **移动办公** - 出差、外出时用手机就能处理紧急事务
|
||
|
||
### 多人协作，团队共享
|
||
|
||
- **多人同时在线** - 传统 Windows 客户端一人使用时他人无法登录，Web 端支持多人同时访问
|
||
- **权限分离** - 不同成员可同时监控不同设备，互不干扰
|
||
- **便于展示** - 分享链接即可让同事/客户查看，无需安装任何软件
|
||
|
||
### 降低成本，提升效率
|
||
|
||
- **零部署成本** - 无需在每台电脑上安装客户端软件
|
||
- **快速响应** - 收到告警通知，掏出手机就能处理
|
||
- **安全加密** - HTTPS 传输，数据安全有保障
|
||
|
||
---
|
||
|
||
## 前置条件
|
||
|
||
在开始配置前，请确认你已具备以下条件：
|
||
|
||
| 条件 | 说明 | 必需 |
|
||
|------|------|------|
|
||
| **Yama 程序授权** | 需要有效的软件授权才能使用 Web 功能 | ✅ |
|
||
| **Windows 电脑** | 用于运行 Yama 主控程序（见下方说明） | ✅ |
|
||
| **公网服务器** | 用于运行 FRP + Nginx，需有固定公网 IP | ✅ |
|
||
| **域名** | 用于申请 HTTPS 证书，可购买或免费获取 | ✅ |
|
||
|
||
> 💡 **关于 Windows 电脑**：Yama 主控程序需要在 Windows 上运行。如果你的公网服务器是 Windows 系统，可以直接在上面运行 Yama；如果公网服务器是 Linux，则需要另外准备一台 Windows 电脑。
|
||
|
||
### 没有这些条件？
|
||
|
||
如果你有 Web 远程桌面的需求，但缺少上述条件，欢迎联系作者：
|
||
|
||
- **咨询方案** - 我们可以提供服务器、域名等一站式解决方案
|
||
- **购买授权** - 获取 Yama 程序授权，解锁全部功能
|
||
- **技术支持** - 协助完成配置，快速上手使用
|
||
|
||
📬 **Telegram**：[@doge_grandfather](https://t.me/doge_grandfather)
|
||
|
||
---
|
||
|
||
## 目录
|
||
|
||
1. [为什么需要 HTTPS](#1-为什么需要-https)
|
||
2. [技术准备](#2-技术准备)
|
||
3. [获取域名](#3-获取域名)
|
||
4. [配置域名解析](#4-配置域名解析)
|
||
5. [申请 SSL 证书](#5-申请-ssl-证书)
|
||
6. [安装配置 Nginx](#6-安装配置-nginx)
|
||
7. [配置 FRP](#7-配置-frp)
|
||
8. [启动服务](#8-启动服务)
|
||
9. [手机访问测试](#9-手机访问测试)
|
||
10. [常见问题](#10-常见问题)
|
||
|
||
---
|
||
|
||
## 1. 为什么需要 HTTPS
|
||
|
||
浏览器出于安全考虑，H264 视频解码功能只能在**安全上下文**中使用：
|
||
|
||
| 访问方式 | H264 远程桌面 |
|
||
|----------|---------------|
|
||
| `https://任意地址` | ✅ 支持 |
|
||
| `http://localhost` 或 `http://127.0.0.1` | ✅ 支持 |
|
||
| `http://其他地址`（包括内网 IP、公网 IP、域名） | ❌ 不支持 |
|
||
|
||
**简单说：**
|
||
- **没有 HTTPS** → 只能在本机浏览器访问（localhost）
|
||
- **配置 HTTPS** → 手机、平板、其他电脑都能访问
|
||
|
||
如果用 HTTP 从非本机访问，会提示：
|
||
```
|
||
Browser does not support H264: VideoDecoder not available
|
||
```
|
||
|
||
本指南帮你配置 HTTPS，实现随时随地访问。
|
||
|
||
---
|
||
|
||
## 2. 技术准备
|
||
|
||
确认你已完成以下准备：
|
||
|
||
| 项目 | 说明 |
|
||
|------|------|
|
||
| FRP 基础配置 | 已配置好 FRP 内网穿透（frps 在服务器运行，frpc 在本机运行） |
|
||
| SSH 工具 | 如 PuTTY、Xshell、Windows Terminal，用于连接服务器执行命令 |
|
||
| Yama Web 服务 | 已在 Yama 中启用 Web 服务（菜单 → 设置 → Web 服务） |
|
||
|
||
> 💡 如果还没配置 FRP，请先参考 FRP 官方文档完成基础配置。
|
||
|
||
**最终架构：**
|
||
|
||
```
|
||
手机浏览器 ──HTTPS──> 你的域名:端口 ──> Nginx ──> FRP ──> 你的电脑
|
||
```
|
||
|
||
---
|
||
|
||
## 3. 获取域名
|
||
|
||
### 方案一：购买域名（推荐）
|
||
|
||
便宜的域名一年只要几块钱：
|
||
|
||
| 注册商 | 网址 | 说明 |
|
||
|--------|------|------|
|
||
| 阿里云 | https://wanwang.aliyun.com | 国内，需实名 |
|
||
| 腾讯云 | https://dnspod.cloud.tencent.com | 国内，需实名 |
|
||
| Cloudflare | https://www.cloudflare.com | 国外，无需实名 |
|
||
| Namesilo | https://www.namesilo.com | 国外，便宜 |
|
||
|
||
> 💡 **提示**：`.icu`、`.top`、`.xyz` 等后缀很便宜，首年通常 ¥5-10。
|
||
|
||
### 方案二：免费域名
|
||
|
||
| 服务 | 网址 | 说明 |
|
||
|------|------|------|
|
||
| DuckDNS | https://www.duckdns.org | 免费子域名，如 `xxx.duckdns.org` |
|
||
| No-IP | https://www.noip.com | 免费子域名 |
|
||
| Freenom | https://www.freenom.com | 免费顶级域名（不稳定） |
|
||
|
||
---
|
||
|
||
## 4. 配置域名解析
|
||
|
||
将域名指向你的**公网服务器 IP**。
|
||
|
||
### 4.1 登录域名管理面板
|
||
|
||
去你购买域名的网站，找到「DNS 解析」或「域名解析」。
|
||
|
||
### 4.2 添加 A 记录
|
||
|
||
| 字段 | 填写 |
|
||
|------|------|
|
||
| 记录类型 | A |
|
||
| 主机记录 | `@`（代表根域名）或 `www` |
|
||
| 记录值 | 你的服务器公网 IP，如 `123.45.67.89` |
|
||
| TTL | 600（或默认） |
|
||
|
||
### 4.3 验证解析生效
|
||
|
||
等待 1-5 分钟，然后测试：
|
||
|
||
```bash
|
||
ping your.domain.com
|
||
```
|
||
|
||
如果返回你的服务器 IP，说明解析成功。
|
||
|
||
---
|
||
|
||
## 5. 申请 SSL 证书
|
||
|
||
使用 Let's Encrypt 免费证书。
|
||
|
||
### 5.1 SSH 连接到服务器
|
||
|
||
使用 SSH 工具连接到你的公网服务器。
|
||
|
||
### 5.2 安装 Certbot
|
||
|
||
```bash
|
||
# Ubuntu / Debian
|
||
apt update && apt install certbot -y
|
||
|
||
# CentOS
|
||
yum install certbot -y
|
||
```
|
||
|
||
### 5.3 申请证书
|
||
|
||
使用 DNS 验证方式，**不需要占用 80/443 端口**：
|
||
|
||
```bash
|
||
certbot certonly --manual --preferred-challenges dns -d your.domain.com
|
||
```
|
||
|
||
> ⚠️ 将 `your.domain.com` 替换为你的实际域名
|
||
|
||
### 5.4 按提示操作
|
||
|
||
1. **输入邮箱**：用于接收证书到期提醒
|
||
2. **同意条款**：输入 `Y`
|
||
3. **分享邮箱**：输入 `N`（可选）
|
||
|
||
### 5.5 添加 DNS TXT 记录
|
||
|
||
Certbot 会显示类似信息：
|
||
|
||
```
|
||
Please deploy a DNS TXT record under the name:
|
||
_acme-challenge.your.domain.com
|
||
with the following value:
|
||
aBcDeFgHiJkLmNoPqRsTuVwXyZ1234567890
|
||
```
|
||
|
||
**去域名管理面板添加 TXT 记录：**
|
||
|
||
| 字段 | 填写 |
|
||
|------|------|
|
||
| 记录类型 | TXT |
|
||
| 主机记录 | `_acme-challenge` |
|
||
| 记录值 | Certbot 显示的那串字符 |
|
||
| TTL | 600 |
|
||
|
||
### 5.6 验证 TXT 记录生效
|
||
|
||
```bash
|
||
nslookup -type=TXT _acme-challenge.your.domain.com
|
||
```
|
||
|
||
看到记录值后，**回到 Certbot 按回车**继续。
|
||
|
||
### 5.7 证书申请成功
|
||
|
||
成功后显示：
|
||
|
||
```
|
||
Successfully received certificate.
|
||
Certificate is saved at: /etc/letsencrypt/live/your.domain.com/fullchain.pem
|
||
Key is saved at: /etc/letsencrypt/live/your.domain.com/privkey.pem
|
||
```
|
||
|
||
**记住这两个路径，后面要用。**
|
||
|
||
### 5.8 设置自动续期（可选）
|
||
|
||
证书有效期 90 天，建议设置自动续期：
|
||
|
||
```bash
|
||
# 方法一：直接添加定时任务（推荐）
|
||
(crontab -l 2>/dev/null; echo "0 0 1 * * certbot renew --quiet && systemctl reload nginx") | crontab -
|
||
|
||
# 方法二：手动编辑
|
||
crontab -e
|
||
# 添加这行：0 0 1 * * certbot renew --quiet && systemctl reload nginx
|
||
# 按 Ctrl+O 保存，Ctrl+X 退出
|
||
```
|
||
|
||
> 💡 这会在每月 1 号自动检查并续期证书。
|
||
|
||
---
|
||
|
||
## 6. 安装配置 Nginx
|
||
|
||
### 6.1 安装 Nginx
|
||
|
||
```bash
|
||
# Ubuntu / Debian
|
||
apt update && apt install nginx -y
|
||
|
||
# CentOS
|
||
yum install nginx -y && systemctl enable nginx
|
||
```
|
||
|
||
### 6.2 删除默认配置（避免端口冲突）
|
||
|
||
```bash
|
||
# Ubuntu / Debian
|
||
rm -f /etc/nginx/sites-enabled/default
|
||
|
||
# CentOS - 跳过此步（我们用 8080 端口，不冲突）
|
||
```
|
||
|
||
### 6.3 创建配置文件
|
||
|
||
> ⚠️ **重要**：把命令中的 `your.domain.com` 替换为你的实际域名（共 4 处）
|
||
|
||
**Ubuntu / Debian：**
|
||
|
||
```bash
|
||
cat > /etc/nginx/sites-available/yama << 'EOF'
|
||
server {
|
||
listen 8080 ssl;
|
||
server_name your.domain.com;
|
||
|
||
ssl_certificate /etc/letsencrypt/live/your.domain.com/fullchain.pem;
|
||
ssl_certificate_key /etc/letsencrypt/live/your.domain.com/privkey.pem;
|
||
|
||
location / {
|
||
proxy_pass http://127.0.0.1:9000;
|
||
proxy_http_version 1.1;
|
||
|
||
# WebSocket 支持（重要）
|
||
proxy_set_header Upgrade $http_upgrade;
|
||
proxy_set_header Connection "upgrade";
|
||
proxy_set_header Host $host;
|
||
proxy_set_header X-Real-IP $remote_addr;
|
||
|
||
# 长连接超时
|
||
proxy_read_timeout 86400;
|
||
}
|
||
}
|
||
EOF
|
||
```
|
||
|
||
**CentOS：**
|
||
|
||
```bash
|
||
cat > /etc/nginx/conf.d/yama.conf << 'EOF'
|
||
server {
|
||
listen 8080 ssl;
|
||
server_name your.domain.com;
|
||
|
||
ssl_certificate /etc/letsencrypt/live/your.domain.com/fullchain.pem;
|
||
ssl_certificate_key /etc/letsencrypt/live/your.domain.com/privkey.pem;
|
||
|
||
location / {
|
||
proxy_pass http://127.0.0.1:9000;
|
||
proxy_http_version 1.1;
|
||
|
||
# WebSocket 支持（重要）
|
||
proxy_set_header Upgrade $http_upgrade;
|
||
proxy_set_header Connection "upgrade";
|
||
proxy_set_header Host $host;
|
||
proxy_set_header X-Real-IP $remote_addr;
|
||
|
||
# 长连接超时
|
||
proxy_read_timeout 86400;
|
||
}
|
||
}
|
||
EOF
|
||
```
|
||
|
||
> 💡 **端口说明**：这里用 `8080`，你可以改成其他未被占用的端口（如 9443）。
|
||
|
||
### 6.4 启用配置（仅 Ubuntu/Debian 需要）
|
||
|
||
```bash
|
||
ln -s /etc/nginx/sites-available/yama /etc/nginx/sites-enabled/
|
||
```
|
||
|
||
> CentOS 已在上一步直接创建到 `conf.d` 目录，无需此步骤。
|
||
|
||
### 6.5 测试并启动
|
||
|
||
```bash
|
||
nginx -t && systemctl restart nginx
|
||
```
|
||
|
||
看到以下输出说明配置正确：
|
||
```
|
||
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
|
||
nginx: configuration file /etc/nginx/nginx.conf test is successful
|
||
```
|
||
|
||
如果报错，检查域名是否替换正确、证书路径是否存在。
|
||
|
||
---
|
||
|
||
## 7. 配置 FRP
|
||
|
||
### 7.1 FRP 服务端配置 (frps.toml)
|
||
|
||
在公网服务器上：
|
||
|
||
```toml
|
||
bindPort = 7000
|
||
```
|
||
|
||
### 7.2 FRP 客户端配置
|
||
|
||
#### 方式一：通过 Yama 程序配置（推荐）
|
||
|
||
1. 打开 Yama 主控程序
|
||
2. 菜单 → 设置 → FRP 设置
|
||
3. 启用 FRP
|
||
4. 设置 Web 端口为 `9000`
|
||
5. 保存
|
||
|
||
无需手动编辑配置文件。
|
||
|
||
#### 方式二：手动编辑 frpc.toml
|
||
|
||
在你的本机（Windows）：
|
||
|
||
```toml
|
||
serverAddr = "你的服务器IP或域名"
|
||
serverPort = 7000
|
||
|
||
[[proxies]]
|
||
name = "yama-web"
|
||
type = "tcp"
|
||
localPort = 9000
|
||
remotePort = 9000
|
||
```
|
||
|
||
> 💡 **说明**：FRP 把服务器的 9000 端口转发到你本机的 9000 端口。
|
||
|
||
---
|
||
|
||
## 8. 启动服务
|
||
|
||
### 8.1 开放防火墙端口（重要！）
|
||
|
||
很多新手卡在这一步。**服务器防火墙必须开放以下端口**：
|
||
|
||
```bash
|
||
# 查看防火墙状态
|
||
ufw status # Ubuntu
|
||
firewall-cmd --state # CentOS
|
||
|
||
# Ubuntu - 开放端口
|
||
ufw allow 8080 # Nginx HTTPS 端口
|
||
ufw allow 7000 # FRP 端口
|
||
ufw allow 9000 # FRP Web 转发端口
|
||
|
||
# CentOS - 开放端口
|
||
firewall-cmd --permanent --add-port=8080/tcp
|
||
firewall-cmd --permanent --add-port=7000/tcp
|
||
firewall-cmd --permanent --add-port=9000/tcp
|
||
firewall-cmd --reload
|
||
```
|
||
|
||
> ⚠️ **云服务器还需要在控制台安全组中开放这些端口！**（阿里云、腾讯云等）
|
||
|
||
### 8.2 启动顺序
|
||
|
||
按以下顺序启动：
|
||
|
||
1. **服务器上**：启动 FRP Server
|
||
```bash
|
||
./frps -c frps.toml
|
||
```
|
||
|
||
2. **服务器上**：确认 Nginx 在运行
|
||
```bash
|
||
systemctl status nginx
|
||
```
|
||
|
||
3. **本机上**：启动 Yama 主控程序
|
||
|
||
> 💡 **提示**：如果在 Yama 中启用了 FRP 功能，程序启动时会自动连接 FRP Server，无需手动启动 frpc。
|
||
|
||
### 8.3 流量路径
|
||
|
||
```
|
||
手机浏览器
|
||
│
|
||
│ HTTPS (端口 8080)
|
||
▼
|
||
Nginx (SSL 终结)
|
||
│
|
||
│ HTTP (端口 9000)
|
||
▼
|
||
FRP Server
|
||
│
|
||
│ TCP 隧道
|
||
▼
|
||
FRP Client
|
||
│
|
||
│ 本地 (端口 9000)
|
||
▼
|
||
Yama WebService
|
||
```
|
||
|
||
---
|
||
|
||
## 9. 手机访问测试
|
||
|
||
### 9.1 打开浏览器
|
||
|
||
在手机浏览器输入：
|
||
|
||
```
|
||
https://your.domain.com:8080
|
||
```
|
||
|
||
> ⚠️ 注意是 `https://`，不是 `http://`
|
||
|
||
### 9.2 登录
|
||
|
||
输入用户名密码登录。
|
||
|
||
### 9.3 连接远程桌面
|
||
|
||
选择设备，点击连接，享受远程桌面。
|
||
|
||
---
|
||
|
||
## 10. 常见问题
|
||
|
||
### Q: 浏览器提示"不安全"或证书错误
|
||
|
||
A: 检查域名是否和证书匹配，证书是否过期：
|
||
```bash
|
||
certbot certificates
|
||
```
|
||
|
||
### Q: 无法访问，连接超时
|
||
|
||
A: 检查各服务是否运行：
|
||
```bash
|
||
systemctl status nginx
|
||
netstat -tlnp | grep 8080
|
||
netstat -tlnp | grep 9000
|
||
```
|
||
|
||
### Q: WebSocket 连接失败
|
||
|
||
A: 确认 Nginx 配置中有 `Upgrade` 和 `Connection` 头配置。
|
||
|
||
### Q: 仍然提示 VideoDecoder not available
|
||
|
||
A:
|
||
1. 确认使用 `https://` 访问
|
||
2. 清除浏览器缓存后重试
|
||
3. 换个浏览器试试（推荐 Chrome/Edge）
|
||
|
||
### Q: 证书过期了
|
||
|
||
A: 手动续期：
|
||
```bash
|
||
certbot renew
|
||
systemctl reload nginx
|
||
```
|
||
|
||
### Q: FRP 连接不上
|
||
|
||
A: 参考 [8.1 开放防火墙端口](#81-开放防火墙端口重要) 检查防火墙配置。
|
||
|
||
### Q: 云服务器（阿里云/腾讯云）无法访问
|
||
|
||
A: 除了服务器防火墙，还需要在**云控制台的安全组**中开放端口：
|
||
1. 登录云服务器控制台
|
||
2. 找到「安全组」设置
|
||
3. 添加入站规则，开放 8080、7000、9000 端口
|
||
|
||
### Q: 如何测试各环节是否正常
|
||
|
||
A: 逐步排查：
|
||
```bash
|
||
# 1. 测试 Nginx 是否监听
|
||
curl -k https://127.0.0.1:8080
|
||
|
||
# 2. 测试 FRP 是否转发
|
||
curl http://127.0.0.1:9000
|
||
|
||
# 3. 测试域名是否解析正确
|
||
ping your.domain.com
|
||
|
||
# 4. 测试外部访问（在手机上）
|
||
# 打开 https://your.domain.com:8080
|
||
```
|
||
|
||
---
|
||
|
||
## 总结
|
||
|
||
| 步骤 | 操作位置 | 说明 |
|
||
|------|----------|------|
|
||
| 获取域名 | 域名注册商 | 购买或免费获取 |
|
||
| 域名解析 | 域名管理面板 | A 记录指向服务器 IP |
|
||
| 申请证书 | 服务器 | Let's Encrypt 免费证书 |
|
||
| 配置 Nginx | 服务器 | SSL 终结 + 反向代理 |
|
||
| 开放防火墙 | 服务器 + 云控制台 | 开放 8080、7000、9000 端口 |
|
||
| 配置 FRP | 服务器 + 本机 | 内网穿透 |
|
||
| 访问测试 | 手机 | `https://域名:端口` |
|
||
|
||
配置完成后，你就可以随时随地用手机访问远程桌面了！
|
||
|
||
---
|
||
|
||
**遇到问题？** 查看 [常见问题](#10-常见问题) 或逐步排查各环节。
|