内网穿透的应用-SoybeanAdmin+cpolar:打破局域网,后台开发协作效率翻倍

SoybeanAdmin 是一个功能完备的后台管理模板,核心功能是提供标准化的界面组件、路由配置和多语言支持,帮助开发者快速构建符合需求的管理系统。它支持在 Windows、macOS、Linux 等系统上开发,部署后能在所有现代浏览器中运行,满足不同设备的访问需求。

作为前端开发者,我觉得 SoybeanAdmin 特别 "懂行"。以前从零写后台,光是调整表格样式、配置路由就花掉大半时间,用这个模板后,直接套用现成组件,一周能完成以前两周的工作量;而且它的响应式设计很贴心,老板突然说要适配手机端,不用重新开发,调整几个参数就搞定。美中不足的是,本地开发时只能在局域网内访问,给客户演示或团队远程协作时很不方便。

自从用了 cpolar,这些麻烦都没了。之前给客户演示新做的后台,要么得让他们来公司,要么传一堆截图解释,现在生成一个公网地址,客户在自己办公室就能实时看到操作效果,有问题当场指出来,沟通效率提高了不少;团队里的设计师在异地,也能直接访问我本地的开发界面,即时反馈样式问题,不用再等我部署到服务器;甚至有次我在家生病,通过公网地址远程调试,顺利完成了项目 deadline,完全没耽误进度。这种不受局域网限制的开发体验,真的让工作灵活了很多。

专注做最靓后台的教程已经安排好喽!

1、本地部署SoybeanAdmin步骤

需要准备好git、node.js、pnpm

打开命令行先克隆项目

shell 复制代码
git clone https://github.com/soybeanjs/soybean-admin.git

接着输入这行命令更换样例版分支

shell 复制代码
git checkout example

进入到项目目录中,继续安装依赖

shell 复制代码
pnpm i

最后启动项目,启动后会自动打开浏览器

shell 复制代码
pnpm dev

就能看到SoybeanAdmin的登录界面了,

2、简单使用SoybeanAdmin

登录进去后能看到界面很美观,右侧可以配置主题,

左侧还有各种各样的设置,比如标签页、异常页、各种插件等等

现在你就可以在本地去开发你的后台管理系统了,但在开发之前,先要把后台样式效果发给客户确认一下。

我会使用cpolar把本地部署的服务发布到公网,把公网地址发给用户!你肯定会问,为什么不直接发截图呢?发截图肯定没有实时动态操作的后台模版更有冲击力呀!

3、安装cpolar内网穿透

访问cpolar官网: https://www.cpolar.com 点击免费使用注册一个账号,并下载最新版本的Cpolar。

登录成功后,点击下载Cpolar到本地并安装(一路默认安装即可)本教程选择下载Windows版本。

Cpolar安装成功后,在浏览器上访问http://localhost:9200,使用cpolar账号登录,登录后即可看到Cpolar web 配置界面,结下来在web 管理界面配置即可。

4、配置公网地址

登录cpolar web UI管理界面后,点击左侧仪表盘的隧道管理------创建隧道:

  • 隧道名称:可自定义,本例使用了:soybean,注意不要与已有的隧道名称重复
  • 协议:http
  • 本地地址:9527
  • 域名类型:随机域名
  • 地区:选择China Top
  • 点击高级:选择host头域,填写IP地址+端口号:localhost:9527

点击创建:

创建成功后,打开左侧在线隧道列表,可以看到刚刚通过创建隧道生成了两个公网地址,接下来就可以在其他电脑或者移动端设备(异地)上,使用任意一个地址在浏览器中访问即可。

我们随意复制一个打开,能看到我们成功打开了soybeanadmin的页面

小结

为了方便演示,我们在上边的操作过程中使用cpolar生成的HTTP公网地址隧道,其公网地址是随机生成的。这种随机地址的优势在于建立速度快,可以立即使用。然而,它的缺点是网址是随机生成,这个地址在24小时内会发生随机变化,更适合于临时使用。

如果有长期使用SoybeanAdmin,或者异地访问与使用其他本地部署的服务的需求,但又不想每天重新配置公网地址,还想让公网地址好看又好记并体验更多功能与更快的带宽,那我推荐大家选择使用固定的二级子域名方式来配置公网地址。

5、配置固定二级子域名公网地址

使用cpolar为其配置二级子域名,该地址为固定地址,不会随机变化。

注意需要将cpolar套餐升级至基础套餐或以上,且每个套餐对应的带宽不一样。【cpolar.cn已备案】

点击左侧的预留,选择保留二级子域名,地区选择china top,然后设置一个二级子域名名称,我这里演示使用的是soybean,大家可以自定义。填写备注信息,点击保留。

保留成功后复制保留的二级子域名地址:

登录cpolar web UI管理界面,点击左侧仪表盘的隧道管理------隧道列表,找到所要配置的隧道soybeanadmin,点击右侧的编辑

修改隧道信息,将保留成功的二级子域名配置到隧道中

  • 域名类型:选择二级子域名
  • Sub Domain:填写保留成功的二级子域名
  • 地区: China Top

点击更新

更新完成后,打开在线隧道列表,此时可以看到随机的公网地址已经发生变化,地址名称也变成了保留和固定的二级子域名名称。

总结:

是不是超级简单?只需要几条命令,你就拥有了一个功能强大、高颜值的后台管理系统。

而且,它的代码规范非常严格,集成了多种开发工具和插件,让你的开发工作更加高效

SoybeanAdmin 与 cpolar 的组合,让后台开发从封闭的局域网走向开放的协作空间,切实提升了工作效率。

以上就是如何在本地windows系统快速部署soybeanadmin,并安装cpolar内网穿透工具配置固定不变的二级子域名公网地址,实现随时随地远程访问的全过程,感谢您的观看,有任何问题欢迎留言交流。

cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站

相关推荐
丝斯20111 小时前
AI学习笔记整理(63)——大模型对齐与强化学习
人工智能·笔记·学习
了一梨2 小时前
SQLite3学习笔记4:打开和关闭数据库 + 创建表(C API)
数据库·学习·sqlite
阿蒙Amon7 小时前
TypeScript学习-第1章:入门
javascript·学习·typescript
A9better10 小时前
嵌入式开发学习日志50——任务调度与状态
stm32·嵌入式硬件·学习
非凡ghost10 小时前
ESET NupDown Tools 数据库下载工具
学习·软件需求
zzcufo11 小时前
多邻国第5阶段17-18学习笔记
笔记·学习
brave and determined11 小时前
工程设计类学习(DAY9):印刷电路板(PCB)材料选择、工艺特性与制造技术综合详解
学习·制造·pcb·smt·工程设计·fr-4·pcb钻孔
了一梨12 小时前
SQLite3学习笔记5:INSERT(写)+ SELECT(读)数据(C API)
笔记·学习·sqlite
-To be number.wan12 小时前
算法学习日记 | 枚举
c++·学习·算法
jrlong13 小时前
DataWhale大模型基础与量化微调task5学习笔记(第 3 章:大模型训练与量化_模型量化实战)
笔记·学习