那些靠它它会倒的 CDN 资源—线上项目出现引用的 CDN 资源无法加载的问题(最近CDN不稳定)

起因

最近在打开一些线上项目,发现有些页面无法响应,即使有的响应了,但延迟很久。之前是没有这种情况的,于是乎打开了浏览器的 NetWork 看一下,发现有些 CDN 开头的资源文件一直在 pending 中无法加载。其他同事也反映了这种情况,然后初步断定是 CDN 不稳定造成的。

无法响应的资源,如图所示:
那些靠它它会倒的 CDN 资源—线上项目出现引用的 CDN 资源无法加载的问题(最近CDN不稳定)

对策

俗话说:“靠墙墙会倒,靠人人会跑。靠天靠地,不如靠自己”
最后我们商量的结果是:「使用 OSS 自己搭建资源文件存储桶

但是有人会问,那些打不开的资源从来来找?问的好,其实不难。
  1. 找一些大公司的静态资源公共库,比如说:字节跳动静态资源公共库
  2. Github 上搜索相关项目,查找对应的资源包文件。
  3. 根据使用的资源包,网上查找其网站,找到资源文件。
前端和后端所使用的资源都统一放到了 OSS 存储桶中,由组件名+版本号进行隔离,部分资源目录文件如下所示:

那些靠它它会倒的 CDN 资源—线上项目出现引用的 CDN 资源无法加载的问题(最近CDN不稳定)

为了方便大家维护和更新,我们又将公共的资源文件使用 Git 进行管理,部分文件如图所示:

那些靠它它会倒的 CDN 资源—线上项目出现引用的 CDN 资源无法加载的问题(最近CDN不稳定)

OSS 有读写的限制,我们一般设置的是 共有读-私有写,不过为了防止盗链,可以增加 referer 的限制。这样我们依赖的静态资源存储桶已经做好了,链接使用的是 OSS 的域名前缀 + 静态资源文件路径,替换到项目当中就行。

例子

我们有些后端写项目,喜欢使用 laravel-admin 这种低代码的扩展包,方便快速搭建好后台管理模块。但是它里面有些组件同样会依赖一些 CDN 的一些静态资源,如下所示:

那些靠它它会倒的 CDN 资源—线上项目出现引用的 CDN 资源无法加载的问题(最近CDN不稳定)

那这种情况该如何处理呢?
  • 重写写个包? 虽然能彰显实力,但是太麻烦,还得上传 Packagist 。
  • 重写这个组件类? 对大多数人都能接受且能实现的。

参考 flatpickr的CDN失效了

# 重写DateMultiple
// 在 app/Admin/bootstrap.php 中添加
Encore\Admin\Form::extend('DateMultiple', App\Admin\Custom\DateMultiple::class);

然后新增重写类:

<?php
namespace App\Admin\Custom;

class DateMultiple extends \Encore\Admin\Form\Field\DateMultiple
{
    # https://unpkg.com/ 这个链接头可以换成 https://自己的OSS.com/ 
    protected static $css = [
        //'https://unpkg.com/flatpickr@4.6.13/dist/flatpickr.min.css',
        //'https://unpkg.com/shortcut-buttons-flatpickr@0.3.0/dist/themes/light.min.css',

        'https://自己的OSS.com/flatpickr@4.6.13/dist/flatpickr.min.css',
        'https://自己的OSS.com/shortcut-buttons-flatpickr@0.3.0/dist/themes/light.min.css',
    ];
    # https://unpkg.com/ 这个链接头可以换成 https://自己的OSS.com/ 
    protected static $js = [
        //'https://unpkg.com/flatpickr',
        //'https://unpkg.com/shortcut-buttons-flatpickr@0.1.0/dist/shortcut-buttons-flatpickr.min.js',
        //'https://unpkg.com/flatpickr@4.6.6/dist/l10n/zh.js',

        'https://自己的OSS.com/flatpickr',
        'https://自己的OSS.com/shortcut-buttons-flatpickr@0.1.0/dist/shortcut-buttons-flatpickr.min.js',
        'https://自己的OSS.com/flatpickr@4.6.6/dist/l10n/zh.js',
    ];
}

结语

  • CDN 真的会不稳定,之前也有类似的经历。建议以后有新的资源引入不是用外部的,使用自己的。
  • 幸好发现的早,要不然客户那边发现了,他们才不管三七二十一,直接电话速来问候。
  • 希望大家都能避免类似的情况,减少不必要的麻烦。
本作品采用《CC 协议》,转载必须注明作者和本文链接
Xiao Peng
laravel_peng
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 7

之前兼职,也是用这个 CDN,遇到过三四次不稳定。很频繁,国外的东西,肯定会受网络波动影响。

1个月前 评论
laravel_peng (楼主) 1个月前

file

只用 oss + cdn 大法。
ossbrowser 上传也不麻烦。

1个月前 评论
laravel_peng (楼主) 1个月前

file 我已经下载下来自己维护了,laravel-admin 也自己维护了 :smile:

1个月前 评论
laravel_peng (楼主) 1个月前

经历了很多年前的 BootCDN 事件后,就一直用自己的 CDN,OSS 的镜像回源很方便的,原本是回源到 cdnjs.loli.net 后面就换成 cdnjs.cloudflare.com,虽然多了成本,但至少安全了很多。

1个月前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
技术员 @ 北之海信息科技有限公司
文章
9
粉丝
7
喜欢
69
收藏
107
排名:946
访问:4774
私信
所有博文
社区赞助商