Tabby的Web前端与Gateway网关部署

Posted on 2026-03-03 17:04 笔名钟意阅读(0) 评论(0) 收藏举报

前言

经常换设备用终端时候总是要下载 tabby 和添加原来的连接配置，还不同步。一直想搭建官方提供的tabby-web，现在终于有空搞。
搭建完发现不只是可以同步，还可以在网页连接配置里的终端，但是要搭建网关，顺便把网关也搭建了。web是http协议，网关是ws协议。
但是搭建过程和官方REDEME相比差别甚大 {% emoji tiaokan %} 遂本文记载 tabby-web 与 tabby-gateway 的搭建配置与联动。

{% image https://upyun.thatcdn.cn/myself/typora/e97c6c33f5dc5124da4eff1a818b454c.png 部署结果 ratio:2701/1705 %}

准备

docker！docker！docker！
两份域名证书（前端和网关，前端的自己反向代理使用，网关的需要挂载到容器）

部署

先部署吧，碰到的小毛病都是部署后面的（只部署 tabby-web 的话自己删一下网关那段）
一起整合到了编排文件。

需要修改的地方如下，分是否开启SSL两种：

开启SSL
1. 填写网关证书目录地址：签名和私钥命名为gateway.pem和gateway.key
2. 填写前端容器挂载目录：后面要用到。
3. 填写两个映射的端口
4. 填写前端域名
5. 填写网关密钥（相当于自定义的密码）
6. 填写 SOCIAL_AUTH_GITHUB_KEY 与 SOCIAL_AUTH_GITHUB_SECRET （用于用户Github登录，点进来进来创建一个，回调地址填前端域名）
取消SSL
1. 修改 tabby-gateway.command: --token-auth --host 0.0.0.0
2. 删除 tabby-gateway.volumes
3. 修改 "网关端口:443" -> "网关端口:9000"
4. 填写网关密钥
5. 填写前端域名
6. 填写 SOCIAL_AUTH_GITHUB_KEY 与 SOCIAL_AUTH_GITHUB_SECRET

version: "3.0"

services:
  tabby-gateway:
    image: ghcr.io/eugeny/tabby-connection-gateway:master
    container_name: "tabby-gateway"
    command: --token-auth --host 0.0.0.0  --port 443  --certificate /custom/ssl/gateway.pem --private-key /custom/ssl/gateway.key
    environment:
      - TABBY_AUTH_TOKEN=网关密钥
    ports:
      - "网关端口:443"
    volumes:
      - /你的网关证书地址:/custom/ssl
    restart: unless-stopped

  tabby-web:
    image: ghcr.io/eugeny/tabby-web:latest
    container_name: tabby-web
    restart: unless-stopped
    volumes:
      - /你的前端容器挂载目录:/data
    environment:
      - DATABASE_URL=sqlite:////data/db.sqlite3
      - DEBUG=False
      - PORT=8080
      - APP_DIST_STORAGE=file:///data
      - SOCIAL_AUTH_GITHUB_KEY=记得填
      - SOCIAL_AUTH_GITHUB_SECRET=记得填
      - com.centurylinklabs.watchtower.enable=true
      - traefik.enable=true
      - traefik.http.routers.app-tabby-web.tls=true
      - traefik.http.routers.app-tabby-web.tls.certresolver=cloudflare
      - traefik.http.routers.app-tabby-web.entrypoints=websecure
      - traefik.http.routers.app-tabby-web.rule=Host(`前端域名`)
      - traefik.http.routers.app-tabby-web.service=app-tabby-web
      - traefik.http.services.app-tabby-web.loadbalancer.server.port=9090
    logging:
      driver: json-file
      options:
        max-size: 5m
        max-file: "5"
    ports:
      - "前端端口:8080"

编排就交给你了，部署完接下来分两步，先跑通web后讲gateway。

前端

安装依赖

{% image https://upyun.thatcdn.cn/myself/typora/20240513122813.png 前端警告⚠️ ratio:751/67 %}

访问前端后会肯定有一个提醒，我们来到tabby-web容器的命令行执行如下

/manage.sh add_version 1.0.187-nightly.1

下面是毛病吐槽，点击跳过碎碎念。

最新版其实是 1.0.197-nightly.1 ，但是容易暴毙。
安装完之后重启容器发现仍然是黑屏！ {% emoji think %}

打开F12网络检查会发现找不到 /app-dist/1.0.187-nightly.1/ 下面的文件。
来到服务器前端容器挂载目录会发现有1.0.187-nightly.1目录，但是它的子目录是/tmpxxxx，而/tmpxxxx目录下面就是前端网络找不到的文件，是不是很抽象。{% emoji annoyed %}{% emoji annoyed %}

当你把文件/tmpxxxx目录下面文件移动到1.0.187-nightly.1下面，重启容器，你会发现前端不再黑屏，但是一直在加载，打开F12故技重施发现又要/tmpxxxx下面的文件，而且要的还是1.0.187-nightly.1依赖未解压的版本，实在是抽象。{% emoji vomit %}{% emoji vomit %}{% emoji vomit %}

好了我吐槽完了，下面厘清操作。

调整依赖

在前端容器挂载目录完成。

将 /1.0.187-nightly.1/tmpxxxx 下面的文件移动到 /1.0.187-nightly.1

# 去目标目录
cd /前端容器挂载目录/1.0.187-nightly.1
# 查询tmpxxx名字
ls
mv ./tmpxxxx/* ./

下载源码，解压到 ./tmpxxxx

# 去目标目录
cd ./tmpxxx
# 下载解压
wget https://registry.npmjs.org/tabby-web-demo/-/tabby-web-demo-1.0.187-nightly.1.tgz tar -xvf tabby-web-demo-1.0.187-nightly.1.tgz

同步配置

自此重启容器，前端能加载完毕。

访问：你的域名/login。可以使用Github登录。
登陆之后点击设置有token，然后在客户端配置即可，参考下面图片，前者前端，后者客户端。

{% image https://upyun.thatcdn.cn/myself/typora/cae19f41855f761dd0042734dd91634f.png 前端设置 ratio:1014/1615 %}

{% image https://upyun.thatcdn.cn/myself/typora/20240513115712.png 客户端配置 ratio:1631/1097 %}

网关

编排能通过网关就没问题，网关一直重启就是证书目录有问题。

注意：网关是WS协议，不要习惯去http反向代理，然后配置了证书的话网关地址应该是 wss://网关域名:网关端口

填写是在前端填写，这样就能在网页上用同步的配置连接终端，如图。

{% image https://upyun.thatcdn.cn/myself/typora/94c4cf524760ab9dc43cee6c4365dcbe.png 网页使用配置 ratio:2159/1261 %}

{% image https://upyun.thatcdn.cn/myself/typora/eddf71237d15b46455b8ba416e9ba197.png 网页通过网关连接终端 ratio:1365/1447 %}

结语

遇事不决，欢迎提问。 {% emoji bye %}

刷新页面返回顶部

Joney Knight