如何把小工具做成独立站(大白话版)
做了个小工具,想让别人也能用,怎么上线成独立站?我用真实经历(把”微访谈”工具上线到子站)写成大白话教程,看不懂术语没关系,照着点就行。
一、先搞清楚:什么是”独立站”,为什么要这么做
假设你已经有了一个网站主域名(比如 你的主域名.com,这是你的”主站”)。你想加一个新工具,有两种放法:
A. 塞进主站:变成 你的主域名.com/工具名 —— 像主站的一个页面。
B. 独立子站:变成 工具名.你的主域名.com —— 一个独立的小网站,挂在主域名下面。
本文用的是 B 独立子站,原因很简单:
1. 不用改工具本身的代码。工具本来是”在自己电脑根目录跑”的,独立站直接跑,不用动任何设置。
2. 互不干扰。主站哪天重装、换程序、出故障,不影响你的小工具;反过来你的工具出问题,也不连累主站。
3. 以后好排查。网站打不开了,一眼就知道是哪一个,不会两头搅在一起。
一句话:带后端逻辑的工具(需要服务器一直跑着一个程序在背后处理请求),都用独立子站最省事。纯静态页面(只有 html/css/js、不连数据库、不跑后端)才适合直接丢进主站目录。
子域名要不要单独买?不用。它只是你已有主域名下开的一个分支,服务器和域名都是你现有的。
二、开始前你要准备好的东西
1. 一个域名(在域名服务商如腾讯云/DNSPod/阿里云买的)
2. 一台服务器(云厂商的轻量应用服务器或云服务器,有公网 IP)
3. 装了宝塔面板(用宝塔管理的)
4. 你的工具代码(目录里有 public/、src/、package.json、ecosystem.config.js、.env 等)
关键认知:你的工具不是”网页文件”,它是个程序,必须有个进程在服务器后台一直跑着,外面才能访问。宝塔的作用就是:帮你管这个进程、管域名、管证书、做”反向代理”(把网址请求转给后台程序)。
三、第 1 步:让子域名指向你的服务器(DNS 解析)
目的:别人输 工具名.你的主域名.com 时,浏览器知道该去找哪台服务器。
1. 登录你买域名的平台(如腾讯云 → DNS 解析 DNSPod)
2. 找到你的主域名,点”解析”
3. 添加一条记录:主机记录填工具名(子域名前缀)、记录类型 A、记录值填服务器公网 IP、TTL 默认
4. 保存,等几分钟到半小时生效。
四、第 2 步:宝塔里建一个子站点
1. 打开宝塔面板 → 左侧”网站” → “添加站点”
2. 域名填:工具名.你的主域名.com(只填这个子域名,别多写 www.)
3. 根目录用英文目录名(比如 /www/wwwroot/你的工具目录,别用中文,中文容易乱码)
4. 其他默认,点”提交”。站点建好了,但里面还没内容,下一步传文件。
五、第 3 步:把工具文件传到服务器
宝塔左侧”文件”,进入你刚建的根目录,把本地工具文件夹里的东西传上去。需要传的有:public/(前端)、src/(后端)、package.json、package-lock.json、ecosystem.config.js、.env(环境变量/密钥,各种 Key 都在这里)。
提醒:.env 是隐藏文件,宝塔文件管理里要开”显示隐藏文件”才看得到,别忘了传。
本地打包小技巧(踩过的坑):桌面放一份英文名的副本文件夹,别用中文名;同步盘(如 OneDrive)可能吞文件,传完去服务器上核对文件数量和大小。
六、第 4 步:配置反向代理(让网址能访问到后台程序)
你的工具跑在服务器内部的 127.0.0.1:内部端口,外面访问不到。反代就是”搭桥”:外面访问子域名 → 宝塔把请求转给内部端口的程序。
1. 宝塔 → 网站 → 点子站点”设置” → 左侧”反向代理” → “添加反向代理”
2. 代理名称随便起;目标 URL 填 http://127.0.0.1:内部端口(你工具实际跑的地址和端口);发送域名填 $host
3. 保存。注意:反代域名别多写 www.,写子域名就行,写错就访问不了。
七、第 5 步:在服务器上装 Node 环境(关键坑)
这一步是本文踩的最大的坑,单独讲清楚。
宝塔的”PM2 管理器”装好后,node/npm 其实只在它内部的 Docker 容器里,宿主机的系统里并没有 node/npm。所以你在终端敲 npm 会报 command not found,PM2 管理器的”添加项目”功能也会因为找不到 npm/pm2 而失败。
解决办法:在宿主机自己装 Node。在宝塔终端(或 SSH)里执行:
curl -fsSL https://rpm.nodesource.com/setup_20.x -o /tmp/ns.sh && bash /tmp/ns.sh && yum install -y nodejs
装完后验证(看到版本号就成功了):node -v 和 npm -v
八、第 6 步:装依赖 + 启动工具(用 PM2 守护)
继续在终端里:cd /www/wwwroot/你的工具目录 → npm install –production(装依赖)→ npm install -g pm2(装进程管理器)→ pm2 start ecosystem.config.js(启动)→ pm2 save(开机自启)
看到 status: online 就说明跑起来了。
以后改了代码,只需要:把改好的文件传到服务器对应目录 → pm2 restart 工具名 重启即可,不用重新走整个流程。
九、第 7 步:装 SSL 证书(让网址变成 https)
刚上线时浏览器打开会报”不是私密连接”,因为没证书。
宝塔 → 网站 → 子站点设置 → SSL → 选”Let’s Encrypt” → 勾选子域名 → 申请(免费,等 1~2 分钟)。申请成功后开”强制 HTTPS”开关。
Let’s Encrypt 证书有效期约 90 天,宝塔一般会自动续期,不用你管。
十、第 8 步:验证上线成功
浏览器打开子站主页,能正常显示和使用,就大功告成了。把这个链接(或二维码)发给朋友,对方打开就能用。
十一、以后怎么更新 / 维护(常用命令)
重启工具:pm2 restart 工具名;看运行日志:pm2 logs 工具名;看是否在跑:pm2 status;停止工具:pm2 stop 工具名;改完代码更新:传文件 → pm2 restart;加了新依赖:npm install 再重启。
十二、一句话总结
做好的带后端小工具,上线成独立站 = DNS 加个子域名 A 记录 + 宝塔建子站点 + 反代指到内部端口 + 传代码 + 装 Node/依赖 + PM2 启动 + 装 SSL。以后改代码只传改动文件 + 重启,不用重来。