docker 搭建 snapdrop

前言

snapdrop 是一个很好用的局域网传输工具，没有客户端，只要处于同一个局域网内的双方打开 snapdrop 页面即可通过 web 进行文件/文本传输~

docker compose 搭建

搭建很简单，但是官方的 docker 可能有些小问题！先创建 snapdrop.yaml 文件，然后写入如下配置（我这边使用了单独 docker nginx 以及 docker snapdrop ，所以以下配置供参考。当然，也可以参考官方示例）：

version: '3.5'

services:
  snapdrop:
    image: linuxserver/snapdrop
    container_name: snapdrop
    restart: unless-stopped
    volumes:
      - ./config:/config

    networks:

      - mynet
    environment:
      - TZ=Asia/Shanghai

networks:
  mynet:
    external: true

然后是 nginx 的配置：

server {
  listen 80 default_server;
  listen [::]:80 default_server;
  server_name _;
  location /.well-known/acme-challenge/ { allow all; }
  location / { return 301 https://$host$request_uri; }

}

# snapdrop
server {
  listen [::]:443 proxy_protocol;
  listen [::]:444 proxy_protocol;
  listen 443 proxy_protocol;
  listen 444 proxy_protocol;
  http2 on;
  server_name your.domain.com;


  set_real_ip_from 0.0.0.0/0;
  real_ip_header proxy_protocol;

  real_ip_recursive on;

  resolver 127.0.0.11 valid=30s;

  location / {
    set $targethost http://snapdrop:80;
    proxy_pass $targethost;

    proxy_set_header Connection "upgrade";
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-for $proxy_add_x_forwarded_for;

  }
}

全部确认后，运行起来：

docker compose -f snapdrop.yaml up -d
# 重载 nginx
docker exec nginx \
  nginx -s reload

可能遇到的问题

此时运行起来后，可能会出现不在同一个局域网也会显示设备图标的情况，使用以下任一方案处理即可！

直接修改容器内的 nginx 配置文件

先把 docker snapdrop 结束，然后找到 snapdrop 目录下 /config/nginx/site-confs/default.conf 文件，修改如下：

## Version 2023/08/25 - Changelog: https://github.com/linuxserver/docker-snapdrop/commits/master/root/defaults/nginx/site-confs/default.conf.sample

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    listen 443 ssl http2 default_server;
    listen [::]:443 ssl http2 default_server;

    server_name _;

    include /config/nginx/ssl.conf;

    root /app/www/client;
    index index.html index.htm index.php;

    location / {
        # enable for basic auth
        #auth_basic "Restricted";
        #auth_basic_user_file /config/nginx/.htpasswd;

        try_files $uri $uri/ /index.html /index.php$is_args$args =404;
    }

    location /server {
        proxy_connect_timeout 300;
        proxy_pass http://localhost:3000;
        proxy_set_header Connection "upgrade";
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header X-Forwarded-for $remote_addr; # 此处修改为 proxy_set_header X-Forwarded-for $proxy_add_x_forwarded_for;
    }

    # deny access to .htaccess/.htpasswd files
    location ~ /\.ht {
        deny all;
    }
}

proxy_set_header X-Forwarded-for $remote_addr; 修改为 proxy_set_header X-Forwarded-for $proxy_add_x_forwarded_for;

最后保存重启 snapdrop 、重载 nginx 即可！

前后端分离

首先 docker 容器中暴露 3000 端口：

version: '3.5'

services:
  snapdrop:
    image: linuxserver/snapdrop
    container_name: snapdrop
    restart: unless-stopped
    ports:
      - "127.0.0.1:3000:3000" # 暴露 3000 端口
    networks:
      - mynet
    environment:
      - TZ=Asia/Shanghai

networks:
  mynet:
    external: true

github 下下载 snapdrop 源码，将 client 文件夹放在 nginx 的 www 目录下。

修改 nginx 的配置：

location / {
        root   /software/www/client;
        index  index.html index.htm;
    }
 
    location /server {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header X-Real-PORT $remote_port;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-for $remote_addr;
    }

最后重载即可！