jsDelivr+Github 自建免費CDN

specialCoder發表於2022-02-14
JSVRGithub

為什麼要用CDN？

CDN的全稱是Content Delivery Network，即內容分發網路。CDN是構建在網路之上的內容分發網路，依靠部署在各地的邊緣伺服器，通過中心平臺的負載均衡、內容分發、排程等功能模組，使使用者就近獲取所需內容，降低網路擁塞，提高使用者訪問響應速度和命中率。CDN的關鍵技術主要有內容儲存和分發技術。
-- 百度百科

通俗的來講CDN主要有兩個功能：

  • 基礎功能：可以提供靜態檔案內容
  • 主要功能：加速內容獲取，提高訪問速度

jsDelivr 是什麼

A free, fast, and reliable Open Source CDN for npm, GitHub, Javascript, and ESM.
-- from https://www.jsdelivr.com/

簡單來說就是它可以為開放資源（比如 npm/github release等）提供CDN服務。

網路分佈：https://www.jsdelivr.com/netw...
image.png
可以看到在中國也有好幾臺伺服器，國內使用也可以完全不用擔心速度。

jsDelivr + Github 可以做什麼？

通過jsDelivr 可以載入 github 倉庫裡的檔案內容。

通過jsDelivr引用資源

image.png

常用：使用 release 包裡面的內容

指定版本：
https://cdn.jsdelivr.net/gh/你的使用者名稱/你的倉庫名@釋出的版本號/檔案路徑

例如：https://cdn.jsdelivr.net/gh/s...
就是載入 v0.1.3版本下的這個檔案：https://github.com/specialCod...

描述內容
使用者名稱specialCoder
倉庫名cdn
relaese版本號0.1.3
檔案路徑/public/jquery/jquery.min.js
其他使用方法

以 jquery 為例子：https://github.com/jquery/jquery


// 使用版本範圍而不是特定版本
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2/dist/jquery.min.js   https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js
 
// 完全省略該版本以獲取最新版本
https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js
 
// 將“.min”新增到任何JS/CSS檔案中以獲取縮小版本，如果不存在，將為會自動生成
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js

其他用法

// 載入任何Github釋出、提交或分支
https://cdn.jsdelivr.net/gh/user/repo@version/file

// 在末尾新增 / 以獲取資源目錄列表（返回以html檔案，頁面中展示列表）
https://cdn.jsdelivr.net/gh/jquery/jquery/

github 部分

通過上面我們知道了 jsDelivr 可以載入 github release 下的內容，接下來我們需要：

  1. 建立 github cdn 倉庫
  2. 釋出版本
  3. 實現 push 的時候自動釋出版本

建立 github cdn 倉庫

訪問 https://github.com/ 建立，目前建立 public 倉庫獲取檔案是沒有問題的（private 倉庫還沒試過）。
然後把倉庫程式碼克隆到本地，往倉庫裡新增你需要的檔案，然後提交到遠端即可。

釋出版本

tag 與 release 【待補充】

在倉庫主頁，點選右邊區域 Release 按鈕：
image.png

點選 「建立一個新的 relaese」:
image.png

建立 release：
image.png

  • choose tag: 選擇一個已經存在的tag或者新建一個，關於 git tag
  • target: 選擇一個分支或者一次提交。建議選擇主分支
  • title: 輸入 title，會顯示在版本列表中
  • description: 輸入版本描述
  • Attach files: 忽略
  • pre-release: 釋出測試版版本的時候可以勾選

輸入完畢然後選擇 「Publish relasese」就可以了。

自動釋出

使用 github action 來實現自動釋出：

  • mian 分支有提交的時候就會發布
  • 使用 package.json 裡面的 verison 控制 tag 和 版本號（tag 與 版本號一致）
  • 每次都發布正式版本

.github/workflow/publish.yml 內容:

# This is a basic workflow to help you get started with Actions

name: release CI

# Controls when the workflow will run
on:
  # Triggers the workflow on push or pull request events but only for the main branch
  push:
    branches:
      - main

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - name: Checkout
        uses: actions/checkout@v2

      - name: 讀取當前版本號
        id: version
        uses: ashley-taylor/read-json-property-action@v1.0
        with:
          path: ./package.json
          property: version

      # Runs a set of commands using the runners shell
      - name: Release
        # uses: softprops/action-gh-release@v1
        # if: startsWith(github.ref, 'refs/tags/')
        uses: actions/create-release@master
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          tag_name: v${{steps.version.outputs.value}}
          release_name: v${{steps.version.outputs.value}}
          body: Release v${{steps.version.outputs.value}}
          draft: false
          prerelease: false

至此，github部分完成。

總結

我們實現了自制CDN，並且可以自動發版。這樣就可以愉快的使用了～～
思考? 如何把它做成一個介面？？這樣我們在檔案需求較少的時候就省去了購買 檔案儲存的花銷。

參考

相關文章