我手头这个AI助手叫“龙虾”平时就挂在大模型API后面跑说得好听点叫智能体说得直白点就是一堆接口和日志想看它今天干了啥只能对着终端发愣。后来我把Star Office UI部署上去给它在服务器里安排了一间像素风格的办公室——开机自启、公网可访问无论在办公室还是躺着刷手机打开浏览器就能看到它正在处理什么任务、日志刷到了哪一行。这篇文章就把整个流程完整拆给你从Star Office UI的选型思路到Docker Compose部署再到域名解析、Nginx反向代理、HTTPS证书最后做成一个能在公网稳定访问的像素办公室。整个过程不说废话照抄即可但每步的原理我也会讲清楚免得你出了报错不知道从哪下手。如果你手头也有一个叫“某某”的AI角色或者正在折腾基于大模型API的助手、Agent想给它加一个真正“看得见”的工作空间这篇教程就是给你准备的。不需要有多深的运维基础只要会登录服务器、会复制粘贴就能跟着走完。1. 先想明白Star Office UI是什么以及为什么要给AI安排“办公室”1.1 像素办公室到底是个什么东西Star Office UI说白了就是一套跑在浏览器里的像素风格办公场景面板。它跟传统Dashboard那种“一堆折线图加指标卡”的路子完全不同而是把AI助手的日常活动映射成一间虚拟办公室里面有工位、有窗口、有控制台、有任务板整个界面是8-bit/16-bit像素画风乍一看像是打开了某个复古游戏的场景。“AI龙虾”是我给自己的智能体起的名字你可以换成任何你正在调教的AI角色。这间办公室的作用是把这个角色的“工作状态”可视化它在等指令、在处理任务、在调用工具、在输出日志全部变成屏幕上的像素元素。你不再需要对着黑底白字的终端猜它在干什么而是像看一个同事在工位上忙碌一样扫一眼就心里有数。这套UI本身是开源的前端资源打包好之后就是一个静态站点加一层轻量服务部署起来不算复杂。难点从来不在“跑起来”而在“怎么把它稳定地放在公网上随时能访问”。所以这篇教程的重心我会放在部署和公网访问这两条主线上。1.2 这间办公室能解决什么问题先说一个很多人忽略的点AI助手如果只有API没有界面你很难向别人展示它有多能干。同事凑过来问“你这AI到底行不行”你总不能甩给他一段Python脚本让他自己跑。但如果你打开一个像素办公室让AI在屏幕上的工位里处理任务、滚动日志、弹出执行结果哪怕不懂技术的人也能一眼看懂“哦它真的在干活”。这种可视化的价值在团队演示、个人项目复盘、甚至给甲方汇报时都非常能打。对个人开发者来说它也是一个很实用的“前端壳层”。你今天接的是这个模型明天想换那个模型Star Office UI不需要重写你只需要改接口地址、改环境变量界面和交互保持不变。这就把AI应用的“脸面”和“大脑”解耦了后续扩展工具、接数据库、挂定时任务都方便很多。适合谁答案是三类人一是正在做AI Agent/智能体的开发者需要一个可视化面板来展示和调试二是喜欢像素风、想让自己的项目有风格差异化的设计师或前端三是单纯爱折腾的玩家想给自己的AI助手弄一个“像样的家”。如果你属于其中任何一种这篇教程就是你的菜。2. 动手前的整体设计选型思路与目录规划2.1 为什么选Docker Compose部署而不是直接buildStar Office UI本质上是一个前端项目理论上你完全可以在服务器上装Node.js拉代码、装依赖、build、再用Nginx托管静态文件。这条路我走过非常折腾Node版本不对、依赖缓存冲突、build到一半内存不够、升级项目以后旧文件残留每个问题都够你喝一壶。所以这次直接用Docker Compose。理由很朴素环境隔离镜像里把运行时、依赖、配置全打包好宿主机上只需要一个Docker引擎声明式配置所有端口、环境变量、数据卷都写在docker-compose.yml里一眼能看完改起来也方便升级回滚容易换个镜像Tag重新up一下就行出了问题还能秒回滚。部署目录我建议固定在/opt/star-office别放在用户目录下省得以后换用户、搬家时找不到。目录下至少要有这几个东西/opt/star-office ├── docker-compose.yml ├── data/ # 持久化数据比如配置、用户偏好 └── logs/ # 容器日志方便排查data和logs这两个目录通过volume挂载进容器容器删了重建数据还在。这一步很多人会偷懒省略结果就是他升级一次镜像所有配置全没了只能在群里哭。别问我怎么知道的。2.2 公网访问的整体链路先在心里画条线在做任何操作之前你要先明白“公网访问”四个字到底意味着什么。不是说你docker run起来、端口映射出去就能公网访问了那只是把服务暴露在一个随机端口上又丑又不安全还容易被扫描器盯上。我推荐的标准链路是用户浏览器 → 域名解析到服务器公网IP → HTTPS请求到Nginx → Nginx反向代理 → 容器内部端口 → Star Office UI。域名和HTTPS不是花架子域名让你不用记一串IPHTTPS让你在公网上传数据时不被中间人偷看Nginx则统一收口所有流量同时帮你解决WebSocket升级、日志审计、跨域转发这些问题。为什么不让容器端口直接绑到公网因为一旦你后面接多个AI服务、多个面板端口会越开越多管理乱成一锅粥。用Nginx做统一入口你只需要开放80和443两个端口其他服务全部走“域名或路径”来区分干净又省心。所以整体设计就三件事Docker容器负责跑Star Office UINginx负责接客域名和证书负责让访问体验体面。下面每一节都是在落实这三件事。3. 核心细节拆解配置、环境变量与端口规划3.1 把端口、环境变量和数据卷掰开揉碎我先说一句不同版本的Star Office UI环境变量名可能会有差异如果你的项目有官方文档一切以官方为准。我这套是基于常见实践的通用兜底方案结构上一致顶多变量名需要你按实际release说明微调。先看端口规划。容器内部一般跑一个前端静态服务监听8000端口这属于容器内网外部访问不到。宿主机这边我不建议直接8000:8000暴露出去而是让Nginx做统一入口所以端口映射写成127.0.0.1:8000:8000意思就是只有本机的Nginx能访问容器的8000端口公网任何请求都只能先到Nginx。这样做的好处是你的Star Office UI不会在公网上裸奔。环境变量一般是这么几类STAR_OFFICE_ASSISTANT_NAME显示在办公室里的AI角色名比如Lobster或者你的“龙虾”。STAR_OFFICE_THEME像素主题风格一般有classic、dark、terminal之类可选。STAR_OFFICE_API_BASEAI服务后端API地址可以指向本地模型服务也可以指向云端大模型接口。STAR_OFFICE_WS_URLWebSocket地址用于实时推送AI的对话流、任务进度。数据卷方面./data:/app/data和./logs:/app/logs这两条挂载非常关键。容器文件系统删了重建就是一张白纸但有了宿主机目录兜底升级容器以后旧配置、旧日志都还在排查问题时能省很多事。3.2 像素风能定制到什么程度Star Office UI之所以叫“UI”而不是“面板”是因为它在视觉上给了很多可以动刀的地方。主题色、背景网格、窗口边框、工位装饰这些通常都可以通过一个主题配置文件或CSS变量来改。我实际用下来最值得改的是三处一是角色名和头像改成你自己的AI名字瞬间有归属感二是主题色比如默认是绿色CRT风你可以改成暖黄色或蓝紫色像素风一下就变了个调性三是背景网格密度调小一点像复古游戏场景调大一点更接近正经办公软件。进阶一点你还可以在Nginx层把/api、/ws路径反向代理到你自己部署的AI推理服务。这样一来前端页面里那个“龙虾”就真的会通过API调模型、返回结果、在像素窗口里逐字显示回答而不再只是静态展示面板。这一步成了整间办公室才算真正有了“员工”。4. 完整实操过程从零到公网可访问4.1 准备一台服务器并安装Docker我这次用的是2核2G内存的云服务器系统装的是Ubuntu 22.04 LTS。Star Office UI本身占用资源不高但如果你后面还要在同一台机器上跑AI模型推理服务内存建议至少4G否则模型加载起来会卡到怀疑人生。先把系统更新到最新然后装Docker和Compose插件sudo apt update sudo apt upgrade -y sudo apt install -y docker.io docker-compose-plugin sudo systemctl enable --now docker docker --version docker compose version提示不建议用snap方式装Docker我踩过一次坑snap版的Docker和系统网络栈偶尔会有兼容问题容器网络容易抽风。直接用apt装docker.io最稳。装完以后当前用户如果想免sudo执行docker命令可以把自己加进docker组sudo usermod -aG docker $USER newgrp docker这一步不是必须的但后面每次敲命令都不用带sudo体验会好很多。4.2 拉取镜像并编写docker-compose.yml获取Star Office UI的方式一般是两种git clone官方仓库然后自己build或者直接docker pull官方镜像。自己build的好处是能改源码坏处是每次升级都要重新build比较费时间直接拉镜像的好处是快适合大多数只想“用起来”的人。我建议先拉镜像跑通真到了需要魔改的时候再clone源码。在/opt/star-office下创建docker-compose.yml内容参考如下services: star-office: image: your-registry/star-office-ui:latest container_name: star-office restart: unless-stopped ports: - 127.0.0.1:8000:8000 environment: STAR_OFFICE_ASSISTANT_NAME: Lobster STAR_OFFICE_THEME: classic STAR_OFFICE_API_BASE: http://your-ai-api:9000 STAR_OFFICE_WS_URL: ws://your-ai-api:9000/ws volumes: - ./data:/app/data - ./logs:/app/logs注意看端口那行绑的是127.0.0.1:8000不是0.0.0.0:8000目的就是只让本机访问不让容器端口直接暴露到公网。环境变量里的API地址如果你还没有AI后端可以先随便填一个占位符等后面跑通了再改。然后启动cd /opt/star-office docker compose up -d docker compose ps docker compose logs -f star-office第一次启动会自动拉镜像等日志显示服务起来了以后本地验证一下curl http://127.0.0.1:8000如果返回一段HTML说明UI服务已经正常跑起来了。到这里万里长征才走了第一步Nginx和公网访问还没配呢。4.3 配置域名解析和Nginx反向代理先登录你的域名服务商后台添加一条A记录把子域名解析到服务器公网IP。比如你想用star.example.com访问就加一条主机记录star 记录类型A 记录值你的服务器公网IP解析生效一般几分钟到几小时不等可以用dig star.example.com来确认是否已经解析到目标IP。然后安装Nginxsudo apt install -y nginx接着写反向代理配置我习惯把每个站点独立放在/etc/nginx/conf.d/下方便管理。创建star-office.confserver { listen 80; server_name star.example.com; location / { proxy_pass http://127.0.0.1:8000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } location /ws { proxy_pass http://127.0.0.1:8000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; proxy_read_timeout 86400; } }这里有个关键细节单独为/ws写一个location是为了让WebSocket连接能正常升级。像素办公室里的AI实时输出、任务进度推送全靠WebSocket撑着。如果你只配了location /没有处理Upgrade头那么页面能打开但所有实时消息都会卡住不动这是新手最容易踩的坑之一。配置写好后测试并重载sudo nginx -t sudo systemctl reload nginx然后开放80和443端口sudo ufw allow 80/tcp sudo ufw allow 443/tcp sudo ufw enable此刻你用浏览器访问http://star.example.com应该已经能打开像素办公室了。但先别急着得意HTTP是明文传输用来做正经项目不合适。下一步上HTTPS。4.4 给办公室上一把“安全锁”HTTPS证书HTTPS证书我推荐用Lets Encrypt的免费证书配合certbot自动签发和续期省心又省钱。安装certbotsudo apt install -y certbot python3-certbot-nginx然后一句话签发证书certbot会自动修改Nginx配置sudo certbot --nginx -d star.example.com中间会问你是否要强制跳转HTTPS选是。签发完成后访问https://star.example.com就能看到浏览器地址栏的小锁图标了。自动续期也要测一下不然三个月后证书过期网站突然打不开你根本想不起来是为什么sudo certbot renew --dry-run看到输出里写着Congratulations或者类似成功字样说明续期链路是通的。certbot默认会挂一个systemd定时器你不需要额外写cron。注意certbot申请证书时要求域名已经正确解析到当前服务器并且80端口能公网访问否则验证会失败。如果你用了CDN或者服务器在国内且域名没有完成合规备案证书签发和访问都有可能出现问题。建议先把纯HTTP访问调通再上HTTPS这样排查起来思路清晰。4.5 做一次完整的公网访问验证从配置到验证建议按下面这个顺序走一遍确保没漏掉什么在手机流量环境下打开https://star.example.com确认页面能加载。为什么强调手机流量因为你如果在服务器同一局域网内测试可能会走内网IP验证不了公网链路。打开浏览器的开发者工具切到Network面板刷新页面看有没有红色的请求。重点看WebSocket连接如果ws请求状态是101 Switching Protocols说明WebSocket升级成功。在办公室界面里发一句测试消息看AI角色有没有回复内容、日志窗口有没有滚动输出。实时消息走的是WebSocket能收到就说明这条链路是通的。去服务器上敲tail -f /var/log/nginx/access.log能看到来自公网的访问记录说明流量确实经过了Nginx整个链路完整闭环。到这里你的AI龙虾已经住进了一间24小时可访问的像素办公室。但上线只是开始后面遇到各种奇奇怪怪的问题才是常态下面这部分是保命用的。5. 常见问题与排查技巧实录5.1 容器能启动但页面打不开先说排查顺序docker compose ps看容器是不是在运行curl http://127.0.0.1:8000看容器内部服务有没有响应ss -lntp | grep 8000看端口监听在哪个地址上。大部分情况的根源是端口映射写错比如容器内部监听的是8080你映射的却是8000那必然打不开。少部分情况的根源是防火墙没放行尤其云服务器除了系统里跑ufw还要去云控制台的安全组里放行80和443端口两边任何一个忘了放行公网都进不来。5.2 页面能打开但AI消息和日志不刷新九成是WebSocket没通。打开开发者工具的Console面板如果有WebSocket connection failed之类的报错去Nginx配置里确认location /ws是否配好重点是proxy_set_header Upgrade $http_upgrade;和proxy_set_header Connection upgrade;这两行缺一个都升级不了协议。另外如果你改了STAR_OFFICE_WS_URL环境变量改完记得docker compose up -d重新创建容器环境变量不会热更新。5.3 域名解析不生效先在服务器上用dig star.example.com查一下如果返回的IP不是你当前的服务器IP说明解析还没生效或者记录加错了。如果解析结果正确但你本机还是打不开那就清一下本地DNS缓存或者换个网络环境试试。还有一个小概率情况你之前配置过CDN或者浏览器里强制HTTPS缓存了旧IP这种时候直接换手机流量访问往往能立刻定位问题。5.4 HTTPS证书申请失败certbot申请失败的常见原因有三个一是域名解析还没生效certbot去验证时找不到你的服务器二是80端口没公网放行Lets Encrypt的验证请求进不来三是服务器上有其他Nginx配置占用了这个域名的80端口导致certbot无法插入验证文件。排查顺序就是域名解析对不对、80端口通不通、Nginx配置有没有冲突。如果急用也可以先用云厂商控制台提供的免费证书下载后在Nginx里手动配置流程略微繁琐但也能搞定。5.5 服务器重启以后服务没起来如果你在docker-compose.yml里写了restart: unless-stopped容器一般会在Docker启动后自动拉起。但偶尔会遇到Docker服务本身没被设置为开机自启的情况所以建议执行sudo systemctl enable docker确保Docker随系统启动。已经运行的容器如果一开始没加restart策略可以用这条命令补救docker update --restart unless-stopped star-office每次改完主机名或IP重启以后记得确认一下域名解析的IP还是不是这一台别换过服务器忘记改解析然后对着404怀疑人生。6. 扩展思路让这间办公室真正“活”起来6.1 把AI服务接进办公室Star Office UI最核心的玩法是通过API把自己的AI服务接进去。无论你用的是云端大模型接口还是用Ollama这类工具在本地跑的模型核心就一件事把STAR_OFFICE_API_BASE指到你的AI服务地址。但这里有个坑如果AI服务和Star Office UI不在同一个域名下浏览器会触发跨域限制。最简单的解法是让Nginx把/api路径也反代到AI服务前端只请求同域名的/api这样就不会有跨域问题。location /api/ { proxy_pass http://127.0.0.1:9000/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; }这样配置以后前端页面里发出去的请求都走/api前缀Nginx负责转给后端的AI推理服务整个链路就非常干净。6.2 像素办公室还能玩出什么花样搭好之后你会发现这间办公室的潜力远不止“好看”两个字。比如你可以把它做成团队的AI运行监控墙在一台公共显示器上常开这个页面所有任务状态一目了然也可以把定时任务、告警信息接到界面里的任务板让AI角色在像素世界里帮你“值班”甚至可以把背景主题改成自己团队的配色作为内部工具的统一门户。我个人的一个小技巧是把Star Office UI的静态资源认真读一遍找到主题配置文件把颜色变量整套替换成自己品牌色。比起在代码里硬改这种方式升级时不容易丢。另一个小技巧是如果你想让AI的头像或工位摆件更个性化可以找找前端目录里的静态资源目录直接替换 PNG 素材记得保持像素风格刷新页面就能看到改动。这间办公室现在就在我服务器上跑着每天打开浏览器看到像素世界里的“龙虾”在工位上处理任务、滚动输出日志我都会觉得当初花半天时间把部署到公网这一串流程走完太值了。它不只是一个UI而是让你的AI从一个“看不见的接口”变成了“看得见的同事”。你也可以按这套流程试试有卡住的地方回头再看看对应的排查小节基本都能解决。