核心摘要

本文是一篇基于Ubuntu 24.04+宝塔面板+Node.js 22.17.1部署Snapdrop的教程，使用了「Node-Snapdrop」仓库。

快速体验：https://snapdrop.starluo.top，你可以在右上角导航菜单中找到它。

前言

「Snapdrop」是一个局域网内跨设备传输文件/信息的工具，基于GPL-3.0许可开源。其优势是无需安装本地客户端、设备间点对点连接（数据不经过服务器），在提升效率的同时保障了数据安全性。适用于日常临时小文件传输场景。

本文基于它的衍生版本的衍生版本「Node-Snapdrop」，给出了Ubuntu 24.04上的可用部署指南。

至于为什么不用官方推荐的Docker方式……？嗯……大抵是因为可用镜像源奇缺，导致我花了一上午也没部署成……

开始部署吧！

1. 安装Node.js

在宝塔Linux面板的右侧栏，找到「软件商店」，在「官方应用」分类下搜索「Node.js版本管理器」并安装。

安装完成后，点击Node.js版本管理器的「设置」，进入Node.js的安装。

注意：应先点击「更新软件列表」以获取新版本的Node.js。

选择一个最新版本的稳定版安装即可，这里使用了v22.17.1。

2. 创建站点

在宝塔Linux面板的右侧栏，找到「网站」并点击「添加站点」。

配置站点时，除域名外，其余保持默认即可。

3. 下载源代码

git clone https://github.com/Hearion/Node-Snapdrop.git

或直接在其仓库页面「Download ZIP」，下载并解压到你的网站目录。

4. 安装pm2

pm2是Node.js的守护进程管理器，可以将Snapdrop进程持久化。

pm2的安装依赖npm。因此，你可能需要先安装npm：

sudo apt install npm

若已安装npm，则：

npm install pm2 -g

安装完后，测试pm2是否安装成功：

pm2

如果提示「Command 'pm2' not found」，则需要将npm安装的包目录添加进环境变量中。这个目录可以在你的Node.js下的bin目录找到，例如「/www/server/nodejs/v22.17.1/bin」。

export PATH=$PATH:/www/server/nodejs/v22.17.1/bin

（呃啊……好像每次登录终端都要运行一次该命令，才能正常使用pm2？）

5. Snapdrop，启动！

可以通过以下命令实现Snapdrop的持久化：

pm2 start ./index.js #启动Snapdrop

pm2 stop index #停止Snapdrop

pm2 list #查看pm2中运行的服务

6. 反向代理

在服务器控制台的「防火墙」设置中，开启Snapdrop对应端口的放行，默认是3000。

随后，在宝塔Linux面板的右侧栏，找到「网站」并进入你的站点「设置」。在出现的设置界面的左侧栏中，找到「反向代理」，点击「添加反向代理」。

代理名称可以输入“Snapdrop_proxy”，目标URL输入“http://127.0.0.1:3000”，其余保持默认。

反向代理添加后，点击「配置文件」，在server的括号中添加以下内容，并删除与之冲突的location配置：

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

一定一定记得Ctrl+S保存噢！

7. SSL证书

在「SSL」中为站点申请let's Encrypt证书，然后静等证书配置完毕。

8. 防火墙放行和DNS解析

在你的服务器控制台添加防火墙规则，配置如图：

随后，在DNS解析中添加一条域名记录，指向你的主机IP地址。在这里，我使用了二级域名snapdrop.starluo.top。

9. 一点小修改

本文使用的「Node-Snapdrop」是Hearion基于Bellisario对RobinLinus「Snapdrop」的二次开发版本修改而得到的，鸣谢他们。所以说它是衍生版本的衍生版本。

值得一提的是，该仓库的index.js使用了3.0及早期版本的《原神》角色名作为随机命名。狠狠地Star了！

因此，让我们得寸进尺，把随机命名更新到《原神》5.7版本。

于是将index.js中的「genshinFeaturedCharacters」Array为以下内容：

const genshinFeaturedCharacters = [
  "丝柯克", "爱可菲", "瓦雷莎", "梦见月瑞希", "玛薇卡", "茜特菈莉", "恰斯卡",
  "希诺宁", "基尼奇", "玛拉妮", "艾梅莉埃", "希格雯", "克洛琳德", "阿蕾奇诺",
  "千织", "闲云", "娜维娅", "芙宁娜", "莱欧斯利", "那维莱特", "林尼", "白术",
  "迪希雅", "艾尔海森", "流浪者", "纳西妲", "妮露", "赛诺", "提纳里", "夜兰",
  "神里绫人", "八重神子", "申鹤", "荒泷一斗", "珊瑚宫心海", "埃洛伊", "雷电将军",
  "宵宫", "神里绫华", "枫原万叶", "优菈", "胡桃", "魈", "甘雨", "阿贝多", "钟离",
  "达达利亚", "可莉", "温迪", "琴", "刻晴", "迪卢克", "莫娜", "派蒙", "七七", "塔利雅",
  "伊法", "伊安珊", "蓝砚", "欧洛伦", "卡齐娜", "赛索斯", "嘉明", "夏沃蕾", "夏洛蒂",
  "菲米尼", "琳妮特", "绮良良", "卡维", "米卡", "瑶瑶", "珐露珊", "莱依拉", "坎蒂丝",
  "多莉", "柯莱", "鹿野院平藏", "久岐忍", "云堇", "五郎", "托马", "九条裟罗", "早柚",
  "烟绯", "罗莎莉亚", "辛焱", "迪奥娜", "砂糖", "北斗", "雷泽", "菲谢尔", "丽莎",
  "香菱", "安柏", "班尼特", "芭芭拉", "行秋", "凝光", "诺艾尔", "重云", "凯亚"
];

此外，该仓库的翻译还有一些可完善处，如./public/scripts/network.js中的第73行、第215行：

Events.fire('notify-user', '哎呀，掉线了！5秒后尝试重连...'); #Line 73

Events.fire('notify-user', '文件传完啦！'); #Line 215

同理，./public/scripts/ui.js的第75行处，创建<label>标签的方法：

    html() {
        return `
            <label class="column center" title="单击发送文件，右键发送信息">
                <input type="file" multiple>
                <x-icon shadow="1">
                    <svg class="icon"><use xlink:href="#"/></svg>
                </x-icon>
                <div class="progress">
                  <div class="circle"></div>
                  <div class="circle right"></div>
                </div>
                <div class="name font-subheading"></div>
                <div class="device-name font-body2"></div>
                <div class="status font-body2"></div>
            </label>`
    }

同一个文件的第492~498行：

    _showOfflineMessage() {
        Events.fire('notify-user', '您掉线了');
    }

    _showOnlineMessage() {
        Events.fire('notify-user', '您已重新联网');
    }

也就是说，我们可以将所有以下结构的文本部分修改得更加可爱友善一些。

Events.fire('notify-user', '请输入文本');

对于./public/index.html，如果希望在右上角添加一个「返回主站」的按钮，可以找到<header>标签（第39行），仿照以下内容添加一个：

<a class="icon-button" href="https://www.starluo.top" id="home" title="返回主站">
<svg class="icon">
<use xlink:href="#home"></use>
</svg>
</a>

同时需要添加「返回主站」的svg图标。在第160行后（或其他适当位置）添加如下<symbol>标签，你会得到一个小房子图标：

<symbol id="home">
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path>
</symbol>

至此，一个专属于你的Snapdrop已在本地部署成功并得到了装修完善。开始享用吧！

使用方式

首先，请确保需要互传文件的设备连接到同一局域网内（如同一个WIFI下），然后访问部署好的Snapdrop。

注意：同时访问的设备数不能超过101台。因为刚刚我们修改的genshinFeaturedCharacters」Array中，元素数只有101个。

对于电脑端，左键单击可发送文件，右键单击可发送信息。

对于移动端，点击一下可发送文件，长按则可以发送信息。

等待文件传输完成后，接收方会收到弹窗提醒：

需要提醒的是，互传数据的设备是点对点连接的，因此文件/消息并不会经过服务器。

收到文件后，记得及时下载保存呀！

祝使用愉快~💖✨

此作者没有提供个人介绍。
最后更新于 2025-07-18