Tabby的Web前端与Gateway网关部署

前言

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

部署结果 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

docker-compose.yml

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。

前端

安装依赖

前端警告⚠️ ratio:751/67

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

web容器

1	`/manage.sh add_version 1.0.187-nightly.1`

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

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

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

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

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

调整依赖

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

将 /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