那些靠它它會倒的 CDN 資源—線上專案出現引用的 CDN 資源無法載入的問題（最近CDN不穩定）

laravel_peng發表於2022-05-20

起因

最近在開啟一些線上專案，發現有些頁面無法響應，即使有的響應了，但延遲很久。之前是沒有這種情況的，於是乎開啟了瀏覽器的 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

相關文章