无公网搭建SkyOffice沉浸式虚拟办公室远程团队协作新体验帕斯内网穿透实现外网访问

SkyOffice 是一个沉浸式的虚拟办公室平台，荣获 2021 年 Monte Jade 创新竞赛冠军。这是一个基于 Web 的虚拟办公空间，让远程团队能够在一个类似游戏的环境中进行协作和交流。

项目采用 Phaser3 游戏引擎、Colyseus WebSocket 服务器框架、React/Redux 前端框架和 PeerJS WebRTC 技术构建，支持距离感应聊天、灵活的屏幕共享、多功能房间、文本消息聊天、自定义/私人房间以及嵌入式白板等功能。

用户可以通过 WASD 或方向键控制角色移动，当靠近其他用户时会自动启动视频聊天，按 E 键坐下，按 R 键使用电脑进行屏幕共享，按 Enter 键打开聊天，按 ESC 键关闭聊天。这个项目为远程办公提供了一种全新的沉浸式体验。

项目地址：点我跳转

如需在外也打开项目需要配置内网穿透使用，点击前往帕斯内网穿透，先注册好账号备用。

由于该项目需要同时运行服务器端和客户端，我们需要手动构建和部署。项目没有提供现成的 Docker 镜像，需要通过源码部署。

--- 手动部署方式

第一步：克隆项目代码

1git clone https://github.com/kevinshen56714/SkyOffice.git
2cd SkyOffice

第二步：启动服务器端

1yarn && yarn start

服务器将在默认端口启动（通常是 2567 端口）

第三步：启动客户端

打开新的终端窗口：

1cd SkyOffice/client
2yarn && yarn dev

客户端将在默认端口 3000 启动

端口说明：

- 客户端端口：3000（可在 client 目录配置文件中修改） - 服务器端口：2567（可在服务器配置文件中修改）

环境要求：

- Node.js（建议 14.x 或更高版本） - npm 或 yarn 包管理器 - 支持 WebRTC 的现代浏览器（目前不支持移动端浏览器）

创建成功后可以访问 ip:3000 到这里就可以正常显示项目了

打开帕斯内网穿透控制台，点击隧道管理-隧道列表

点击创建新隧道

隧道节点可以随便选，一般选个负载低的就可以

接下来填写信息，隧道名称可以随便填写

本地 IP 默认就可以

传输协议可以选择 TCP 也可以选择 HTTP/HTTPS

HTTP 就是域名的形式，教程以使用 TCP 为演示

本项目中如果没有修改端口的话默认是 3000 端口（客户端），这里本地 IP 就填 3000

远程端口可以留空也可以自定义。下图仅做参考，请按照实际项目端口添加。

填写完毕点击确定

点击刚才创建好的隧道，点击获取配置文件

回到飞牛 NAS，点击应用中心下载 frpc 客户端

打开后粘贴刚才复制的配置文件，点击确定即可

复制帕斯内网穿透控制台的访问 IP 和端口

可以看到已经正常穿透成功了

本篇教程结束

无公网搭建SkyOffice沉浸式虚拟办公室 远程团队协作新体验 帕斯内网穿透实现外网访问