V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
iqoo
V2EX  ›  分享创造

免费 CDN 上传大文件

  •  
  •   iqoo · 83 天前 · 2208 次点击
    这是一个创建于 83 天前的主题,其中的信息可能已经有所发展或是发生改变。

    由于很多免费 CDN 对单个文件的体积有限制,因此无法上传大文件。

    不过有个黑科技可以突破这个限制:把大文件切割成多个小文件上传,运行时通过 Service Worker 进行合并,这样在页面看来仍是一个大文件。

    这里使用 NPM 空间演示。将测试文件 bbb.mp4 以每片 10MiB 切割:

    mkdir -p bbb.mp4.parts
    split -b 10MiB -d bbb.mp4 bbb.mp4.parts/
    

    得到 00 、01 、02 、...、33 切片,然后逐个上传到 NPM:

    ...

    最终效果:freecdn.etherdream.com/bbb.mp4

    该文件实际并不存在,而是通过 Service Worker 虚拟出来的。如果用低版本浏览器访问就是 404 。

    拖动视频进度条,程序会根据 Range 请求范围,加载相应的分片。

    (打开控制台调试时不要勾选“禁用缓存”,否则请求可能不走 ServiceWorker )

    事实上 NPM 有多个服务,例如 unpkg.comnpm.elemecdn.com 。因此当一个 CDN 速度慢时,Service Worker 可自动选择另一个,从而增加稳定性。

    更多细节可查看:github.com/EtherDream/freecdn/tree/master/examples/file-split

    15 条回复    2022-07-14 09:41:27 +08:00
    xinyana
        1
    xinyana  
       83 天前 via Android
    虽然这羊毛薅的有点过分,不过有点意思
    learningman
        2
    learningman  
       83 天前 via Android
    挺恶心的,和之前那个拿 npm 分发 jar 包的一丘之貉
    ch2
        3
    ch2  
       83 天前
    ios Safari 下水道了,不支持
    eason1874
        4
    eason1874  
       83 天前   ❤️ 1
    如果是视频切片的话,可以不用在服务端合并,切片后生成一个 m3u8 列表,网页前端播放器会根据播放进度从 m3u8 列表请求不同的文件,这样兼容 100%
    cslive
        5
    cslive  
       83 天前
    记得之前有个用哔哩哔哩 cdn 这么搞的
    mxT52CRuqR6o5
        6
    mxT52CRuqR6o5  
       83 天前 via Android
    @learningman 有啥的啊,我们可最喜欢玩囚徒困境游戏了
    yangg
        7
    yangg  
       83 天前
    你怎么上传到 npm 的?发个版本?
    yaott2020
        8
    yaott2020  
       83 天前 via Android
    拼命薅羊毛的最后都无羊毛可薅
    iqoo
        9
    iqoo  
    OP
       82 天前
    @eason1874 视频是可以的,不过这个支持任意格式的文件。(不知 m3u8 是否兼容所有浏览器,之后细节研究下)
    iqoo
        10
    iqoo  
    OP
       82 天前
    @yangg 每个切片对应一个包版本号,后面那个文档里有 shell 实现,这样比较简单而已。

    当然这里出于简单而已,实际不推荐放 github 和 npm ,这两个空间可以放任意格式的文件,比较珍贵,白嫖可惜了。

    实际最好的方案是放图床,知乎、B 站、简书这些。每个切片加个图片头,使用时跳过头长度就可以。
    ragnaroks
        11
    ragnaroks  
       82 天前   ❤️ 1
    在我上学那会黄网都是这样用正常网站的静态存储放黄片
    byte10
        12
    byte10  
       82 天前
    把大文件切割成多个小文件上传,运行时通过 Service Worker 进行合并,这样在页面看来仍是一个大文件。 我不太明白这个原理,下载文件的时候是在客户端浏览器进行合并 多个 part 吗
    yin1999
        13
    yin1999  
       82 天前 via iPad
    Service worker 是能够拦截网页的请求的,拦截请求以后,由 service worker 而非服务器直接响应请求
    Yumine
        14
    Yumine  
       27 天前
    npm.elemecdn.com 已经设置了访问权限

    This XML file does not appear to have any style information associated with it. The document tree is shown below.
    <Error>
    <Code>AccessDenied</Code>
    <Message>You have no right to access this object because of bucket acl.</Message>
    <RequestId>62CF6CDE97E87C373698B17D</RequestId>
    <HostId>fe-static-zbprod-zb1-oss-3.oss-cn-zhangjiakou.aliyuncs.com</HostId>
    </Error>
    iqoo
        15
    iqoo  
    OP
       27 天前
    @Yumine 这就是多节点冗余的好处,免费 CDN 随时可能关闭,同时准备多个节点稳定性就大幅提高了。
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2844 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 43ms · UTC 14:19 · PVG 22:19 · LAX 07:19 · JFK 10:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.