docs: больше наглядности (схемы + скриншот)

Made-with: Cursor
This commit is contained in:
Андрей Бобырев
2026-04-26 17:06:12 +03:00
parent bf504f4b28
commit ee031b09dd
5 changed files with 131 additions and 0 deletions

View File

@@ -10,6 +10,8 @@
![Интерфейс](docs/ui.png) ![Интерфейс](docs/ui.png)
![Схема туннеля (через VPS)](docs/tunnel-diagram.svg)
--- ---
## Самое главное (чтобы было безопасно) ## Самое главное (чтобы было безопасно)
@@ -41,6 +43,8 @@ curl -fsSL https://raw.githubusercontent.com/andrey271192/keenetic_ssh-web/main/
#### 2 команды “с нуля” (самый простой путь) #### 2 команды “с нуля” (самый простой путь)
![2 шага установки (VPS → роутер)](docs/steps.svg)
**Команда 1 — на VPS (Ubuntu):** поставить туннель и сразу добавить роутер. **Команда 1 — на VPS (Ubuntu):** поставить туннель и сразу добавить роутер.
```sh ```sh

BIN
docs/dns-routes-test.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

56
docs/steps.svg Normal file
View File

@@ -0,0 +1,56 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="520" viewBox="0 0 1200 520">
<defs>
<style>
.bg{fill:#0d1117}
.card{fill:#161b22;stroke:#30363d;stroke-width:2}
.txt{fill:#e6edf3;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}
.mut{fill:#8b949e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}
.ttl{font-size:26px;font-weight:800}
.h{font-size:18px;font-weight:800}
.p{font-size:15px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace}
.accent{fill:#1f6feb}
.ok{fill:#3fb950}
.pill{fill:#0b1220;stroke:#30363d;stroke-width:2}
.arrow{stroke:#3fb950;stroke-width:4;fill:none;marker-end:url(#m)}
</style>
<marker id="m" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#3fb950"/>
</marker>
</defs>
<rect class="bg" x="0" y="0" width="1200" height="520"/>
<text class="txt ttl" x="40" y="60">Установка «серый IP через VPS» — всего 2 шага</text>
<text class="mut p" x="40" y="92">Выполняете одну команду на VPS, получаете блок — вставляете его на роутере.</text>
<!-- Step 1 -->
<rect class="card" x="40" y="140" rx="16" ry="16" width="520" height="320"/>
<circle cx="80" cy="190" r="18" class="accent"/>
<text class="txt h" x="110" y="197">Шаг 1 (на VPS)</text>
<text class="mut p" x="70" y="235">Ставим туннель и добавляем роутер:</text>
<rect class="pill" x="70" y="255" rx="12" ry="12" width="460" height="110"/>
<text class="txt p mono" x="90" y="295">curl -fsSL https://raw.githubusercontent.com/</text>
<text class="txt p mono" x="90" y="320">andrey271192/keenetic_ssh-web/main/setup-vps.sh</text>
<text class="txt p mono" x="90" y="345">| sudo bash -s -- add home --dnat 777</text>
<text class="mut p" x="70" y="400">Результат: VPS печатает блок <tspan class="mono">export ...</tspan> для роутера.</text>
<!-- Step 2 -->
<rect class="card" x="640" y="140" rx="16" ry="16" width="520" height="320"/>
<circle cx="680" cy="190" r="18" class="ok"/>
<text class="txt h" x="710" y="197">Шаг 2 (на роутере)</text>
<text class="mut p" x="670" y="235">Вставляем блок, который выдал VPS:</text>
<rect class="pill" x="670" y="255" rx="12" ry="12" width="460" height="140"/>
<text class="txt p mono" x="690" y="295">export VPS_ENDPOINT=...</text>
<text class="txt p mono" x="690" y="320">export VPS_PUBKEY='...'</text>
<text class="txt p mono" x="690" y="345">export CLIENT_IP=10.99.0.X</text>
<text class="txt p mono" x="690" y="370">export DNAT_PORTS='777'</text>
<text class="txt p mono" x="690" y="395">curl -fsSL .../tunnel-install.sh | sh</text>
<text class="mut p" x="670" y="445">Готово: открываете <tspan class="mono">http://10.99.0.X:2001</tspan></text>
<path class="arrow" d="M 560 300 C 600 300, 610 300, 640 300"/>
</svg>

After

Width:  |  Height:  |  Size: 3.1 KiB

69
docs/tunnel-diagram.svg Normal file
View File

@@ -0,0 +1,69 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="520" viewBox="0 0 1200 520">
<defs>
<style>
.bg{fill:#0d1117}
.card{fill:#161b22;stroke:#30363d;stroke-width:2}
.txt{fill:#e6edf3;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}
.mut{fill:#8b949e;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}
.ttl{font-size:26px;font-weight:800}
.h{font-size:18px;font-weight:700}
.p{font-size:15px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace}
.accent{fill:#1f6feb}
.ok{fill:#3fb950}
.arrow{stroke:#1f6feb;stroke-width:4;fill:none;marker-end:url(#m)}
.arrow2{stroke:#3fb950;stroke-width:4;fill:none;marker-end:url(#m2)}
</style>
<marker id="m" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#1f6feb"/>
</marker>
<marker id="m2" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#3fb950"/>
</marker>
</defs>
<rect class="bg" x="0" y="0" width="1200" height="520"/>
<text class="txt ttl" x="40" y="60">Схема работы (серый IP → доступ через VPS)</text>
<text class="mut p" x="40" y="92">Роутер сам подключается к VPS по WireGuard, и VPS видит роутер как «локальный» IP 10.99.0.X.</text>
<!-- PC -->
<rect class="card" x="40" y="150" rx="16" ry="16" width="320" height="260"/>
<text class="txt h" x="70" y="195">Ваш ПК / телефон</text>
<text class="mut p" x="70" y="225">Открываете панель:</text>
<text class="txt p mono" x="70" y="255">http://10.99.0.X:2001</text>
<text class="mut p" x="70" y="290">(если туннель включён)</text>
<text class="mut p" x="70" y="335">Или дома в LAN:</text>
<text class="txt p mono" x="70" y="365">http://192.168.88.1:2001</text>
<!-- VPS -->
<rect class="card" x="440" y="150" rx="16" ry="16" width="320" height="260"/>
<text class="txt h" x="470" y="195">VPS (белый IP)</text>
<text class="mut p" x="470" y="225">WireGuard сервер:</text>
<text class="txt p mono" x="470" y="255">wg0 10.99.0.1</text>
<text class="mut p" x="470" y="295">Порт:</text>
<text class="txt p mono" x="520" y="295">UDP 51820</text>
<text class="mut p" x="470" y="335">Проверка:</text>
<text class="txt p mono" x="470" y="365">ping 10.99.0.X</text>
<!-- Router -->
<rect class="card" x="840" y="150" rx="16" ry="16" width="320" height="260"/>
<text class="txt h" x="870" y="195">Роутер Keenetic (Entware)</text>
<text class="mut p" x="870" y="225">WireGuard клиент:</text>
<text class="txt p mono" x="870" y="255">wg0 10.99.0.X</text>
<rect x="870" y="285" rx="12" ry="12" width="260" height="44" fill="#0b1220" stroke="#30363d" stroke-width="2"/>
<circle cx="892" cy="307" r="8" class="ok"/>
<text class="txt p" x="910" y="312">keenetic_ssh-web :2001</text>
<rect x="870" y="342" rx="12" ry="12" width="260" height="44" fill="#0b1220" stroke="#30363d" stroke-width="2"/>
<circle cx="892" cy="364" r="8" class="accent"/>
<text class="txt p" x="910" y="369">SSH :22</text>
<!-- Arrows -->
<path class="arrow" d="M 360 280 C 400 280, 410 280, 440 280"/>
<path class="arrow2" d="M 760 280 C 800 280, 810 280, 840 280"/>
<text class="mut p" x="505" y="140">WireGuard туннель</text>
<text class="mut p mono" x="515" y="118">10.99.0.0/24</text>
</svg>

After

Width:  |  Height:  |  Size: 3.6 KiB

View File

@@ -9,6 +9,8 @@
…и т. д. …и т. д.
``` ```
![Схема (коротко)](../docs/tunnel-diagram.svg)
UDP `51820`, подсеть `10.99.0.0/24`. Параметры можно поменять через ENV. UDP `51820`, подсеть `10.99.0.0/24`. Параметры можно поменять через ENV.
--- ---