为什么要用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...
可以看到在中国也有好几台服务器,国内使用也可以完全不用担心速度。
jsDelivr + Github 可以做什么?
通过jsDelivr 可以加载 github 仓库里的文件内容。
通过jsDelivr引用资源
常用:使用 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 下的内容,接下来我们需要:
- 创建 github cdn 仓库
- 发布版本
- 实现 push 的时候自动发布版本
创建 github cdn 仓库
访问 https://github.com/ 创建,目前创建 public 仓库获取文件是没有问题的(private 仓库还没试过)。
然后把仓库代码克隆到本地,往仓库里添加你需要的文件,然后提交到远程即可。
发布版本
tag 与 release 【待补充】
在仓库主页,点击右边区域 Release 按钮:
点击 「创建一个新的 relaese」:
创建 release:
- 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,并且可以自动发版。这样就可以愉快的使用了~~
思考🤔 如何把它做成一个接口??这样我们在文件需求较少的时候就省去了购买 文件存储的花销。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。