# 前言

jsDelivr —— 一个免费、快速、可靠的为 JS 和开源项目服务的 CDN。但是由于国内访问速度慢,加之 jsDelivr 备案被吊销和 DNS 污染常出现,国内使用了 jsDelivr 的站点常常出现访问速度慢的问题。
你可能会问,为什么不去使用别人的镜像站呢?俗话说 "自己动手,丰衣足食",自建镜像站可以让你更好地掌握自己的数据和服务。使用第三方镜像站存在一些潜在的风险和不确定性。首先,你无法确定第三方镜像站的可靠性和稳定性,它们可能在任何时候关闭或遭遇故障。这将对你的站点造成严重影响,可能导致服务中断。其次,第三方镜像站可能无法及时更新和同步你的站点内容,导致访问者无法获取最新的信息。最后,自建镜像站可以让你更加灵活地定制和管理自己的站点,满足特定需求和提供更好的用户体验。因此,建议在可行的情况下,考虑自建镜像站来确保数据的安全和可靠性。

# 方法一:使用又拍云搭建

# 优点:

  1. 又拍云是国内知名企业级云服务商,其服务极速、稳定、简单易用,用来搭建镜像站是十分合适的。又拍云有非常多的优惠:加入又拍云联盟 (网站需备案,要在网站 / 应用底部添加又拍云 LOGO 并指向官网) 后,可以获得每月 10G 储存空间和 15G 的 CDN 流量 (按年发放,以 67 元的代金卷发放到账户);新用户注册 (点我注册) 还可以直接获得 61 元的代金卷 (有效期一年)。在这些优惠的加成下,你可以零成本搭建一个镜像站。

2. 加速效果明显 (如图)

加速前:
https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/blog_img_加速前_d41d8cd98f00b204e9800998ecf8427e.png

加速后:

https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/blog_img_加速后_d41d8cd98f00b204e9800998ecf8427e.png

# 缺点:

需要备案!!!

# 推荐指数:⭐⭐⭐⭐⭐

# 搭建方法:

# 第一步:

创建又拍云账户 (点我注册)

# 第二步:

进入控制台的 CDN 管理界面 (https://console.upyun.com/services/cdn/), 并创建服务,然后配置服务 (具体参数如下)。

  1. 服务名称:唯一标识服务,例如:image-upyun-com,一个服务下面可以绑定多个自有域名。

注意事项
服务名称仅限 5~20 位; 必须以小写英文字符开头,仅支持小写英文字符、数字、中划线组合。

  1. 加速域名:填写此次需要配置的加速域名。

注意事项
加速域名必须已在工信部备案; 待加速域名尚未在又拍云 CDN 平台配置。

加速域名需要进行域名所有权验证,验证通过后方能添加成功。

  1. 应用场景:这里选择全站加速
  2. 回源协议:选协议跟随。
  3. 源站证书校验:切记!!不要打开 (实测开了以后不能用)!!!
  4. 线路配置:源站地址填 cdn.jsdelivr.net , 端口号不要动。

# 第三步

  1. 服务创建成功后,操作界面会提示 CDN 加速服务创建成功,并会自动跳转到该服务的【功能配置】界面
  2. 在功能配置界面,有域名管理、回源管理、缓存配置、性能优化、HTTPS、访问控制、图片处理等功能配置模块,在【域名管理】模块下,可以针对该服务绑定多个自有域名,请耐心等待域名配置(约 10 分钟),查看域名对应的状态是否为[正常]
  3. 可查看 CDN 平台为您分配的 CNAME 地址,此时需要去域名 DNS 解析商处,为该域名添加一条 CNAME 记录,待 CNAME 配置生效之后,方可使用 CDN 服务。

# 第四步 (非必要,但是可以提升体验)

  1. 配置 HTTPS: 点击 [HTTPS], 点击 "HTTPS 配置" 右边的管理 (如图)https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/image_d41d8cd98f00b204e9800998ecf8427e.png 然后你可以选择添加自有证书或直接使用又拍云注册证书 (点我前往证书管理)。添加完后,打开 [HTTPS 访问],不建议勾选 [强制 HTTPS 访问]。

  2. 建议打开智能压缩和页面压缩 (如图)
    https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703354977231_d41d8cd98f00b204e9800998ecf8427e.png

  3. 建议配置缓存、浏览器缓存和分段缓存 (如图)
    https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703355090340_d41d8cd98f00b204e9800998ecf8427e.png

    https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703355115278_d41d8cd98f00b204e9800998ecf8427e.png

    https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703355198422_d41d8cd98f00b204e9800998ecf8427e.png

    https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703355224230_d41d8cd98f00b204e9800998ecf8427e.png

  4. 在 [访问控制] 中,打开 Referer 防盗链、WAF 保护、HTTP 请求体大小限制、IP 访问限制 (如图)
    https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703355343968_d41d8cd98f00b204e9800998ecf8427e.png
    https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703355382813_d41d8cd98f00b204e9800998ecf8427e.png
    https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703355473637_d41d8cd98f00b204e9800998ecf8427e.png
    https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703355505400_d41d8cd98f00b204e9800998ecf8427e.png

    此配置仅作参考,请根据实际情况进行配置!

  5. 你还可以配置 [边缘规则],来实现一些特殊效果。(这里不做演示)

# 方法二:使用 Cloudflare workers 搭建

# 优点:

  1. 简单,步骤少,加速范围广
  2. 无需备案,加速效果较好 (如图)
    加速前:https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/blog_img_加速前_d41d8cd98f00b204e9800998ecf8427e.png
    加速后:https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/cfwokerjsd_d41d8cd98f00b204e9800998ecf8427e.png
  3. 无费用,每天有免费额度 (每天免费 100000 个请求)

# 缺点:

  1. 部分地区访问较慢
  2. 免费额度较少,对于访问量大的站点可能不够
  3. 需要有一个挂在 cloudflare 的域名

# 推荐指数:⭐⭐⭐⭐

# 搭建方法

# 第一步

  1. 在 Cloudflare 管理面板的 [Workers 和 Pages] 栏 ->[概述]->[创建应用程序]->[创建 Worker](如图)
    https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703396996483_d41d8cd98f00b204e9800998ecf8427e.png
    https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703397051051_d41d8cd98f00b204e9800998ecf8427e.png
  2. 随便填一个名称,点击 [部署](如图)

https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703397134262_d41d8cd98f00b204e9800998ecf8427e.png

# 第二步

  1. 在创建完成的页面点击 [编辑代码](如图)https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703397288998_d41d8cd98f00b204e9800998ecf8427e.png
  2. 将以下代码直接粘贴进代码框:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
'use strict'

/**
* static files (404.html, sw.js, conf.js)
*/
const ASSET_URL = 'https://cdn.jsdelivr.net'

const JS_VER = 10
const MAX_RETRY = 1

/** @type {RequestInit} */
const PREFLIGHT_INIT = {
status: 204,
headers: new Headers({
'access-control-allow-origin': '*',
'access-control-allow-methods': 'GET,POST,PUT,PATCH,TRACE,DELETE,HEAD,OPTIONS',
'access-control-max-age': '1728000',
}),
}

/**
* @param {any} body
* @param {number} status
* @param {Object<string, string>} headers
*/
function makeRes(body, status = 200, headers = {}) {
headers['--ver'] = JS_VER
headers['access-control-allow-origin'] = '*'
return new Response(body, {status, headers})
}


/**
* @param {string} urlStr
*/
function newUrl(urlStr) {
try {
return new URL(urlStr)
} catch (err) {
return null
}
}


addEventListener('fetch', e => {
const ret = fetchHandler(e)
.catch(err => makeRes('cfworker error:\n' + err.stack, 502))
e.respondWith(ret)
})


/**
* @param {FetchEvent} e
*/
async function fetchHandler(e) {
const req = e.request
const urlStr = req.url
const urlObj = new URL(urlStr)
const path = urlObj.href.substr(urlObj.origin.length)

if (urlObj.protocol === 'http:') {
urlObj.protocol = 'https:'
return makeRes('', 301, {
'strict-transport-security': 'max-age=99999999; includeSubDomains; preload',
'location': urlObj.href,
})
}

if (path.startsWith('/http/')) {
return httpHandler(req, path.substr(6))
}

switch (path) {
case '/http':
return makeRes('请更新 cfworker 到最新版本!')
case '/ws':
return makeRes('not support', 400)
case '/works':
return makeRes('it works')
default:
// static files
return fetch(ASSET_URL + path)
}
}


/**
* @param {Request} req
* @param {string} pathname
*/
function httpHandler(req, pathname) {
const reqHdrRaw = req.headers
if (reqHdrRaw.has('x-jsproxy')) {
return Response.error()
}

// preflight
if (req.method === 'OPTIONS' &&
reqHdrRaw.has('access-control-request-headers')
) {
return new Response(null, PREFLIGHT_INIT)
}

let acehOld = false
let rawSvr = ''
let rawLen = ''
let rawEtag = ''

const reqHdrNew = new Headers(reqHdrRaw)
reqHdrNew.set('x-jsproxy', '1')

// 此处逻辑和 http-dec-req-hdr.lua 大致相同
// https://github.com/EtherDream/jsproxy/blob/master/lua/http-dec-req-hdr.lua
const refer = reqHdrNew.get('referer')
const query = refer.substr(refer.indexOf('?') + 1)
if (!query) {
return makeRes('missing params', 403)
}
const param = new URLSearchParams(query)

for (const [k, v] of Object.entries(param)) {
if (k.substr(0, 2) === '--') {
// 系统信息
switch (k.substr(2)) {
case 'aceh':
acehOld = true
break
case 'raw-info':
[rawSvr, rawLen, rawEtag] = v.split('|')
break
}
} else {
// 还原 HTTP 请求头
if (v) {
reqHdrNew.set(k, v)
} else {
reqHdrNew.delete(k)
}
}
}
if (!param.has('referer')) {
reqHdrNew.delete('referer')
}

// cfworker 会把路径中的 `//` 合并成 `/`
const urlStr = pathname.replace(/^(https?):\/+/, '$1://')
const urlObj = newUrl(urlStr)
if (!urlObj) {
return makeRes('invalid proxy url: ' + urlStr, 403)
}

/** @type {RequestInit} */
const reqInit = {
method: req.method,
headers: reqHdrNew,
redirect: 'manual',
}
if (req.method === 'POST') {
reqInit.body = req.body
}
return proxy(urlObj, reqInit, acehOld, rawLen, 0)
}


/**
*
* @param {URL} urlObj
* @param {RequestInit} reqInit
* @param {number} retryTimes
*/
async function proxy(urlObj, reqInit, acehOld, rawLen, retryTimes) {
const res = await fetch(urlObj.href, reqInit)
const resHdrOld = res.headers
const resHdrNew = new Headers(resHdrOld)

let expose = '*'

for (const [k, v] of resHdrOld.entries()) {
if (k === 'access-control-allow-origin' ||
k === 'access-control-expose-headers' ||
k === 'location' ||
k === 'set-cookie'
) {
const x = '--' + k
resHdrNew.set(x, v)
if (acehOld) {
expose = expose + ',' + x
}
resHdrNew.delete(k)
}
else if (acehOld &&
k !== 'cache-control' &&
k !== 'content-language' &&
k !== 'content-type' &&
k !== 'expires' &&
k !== 'last-modified' &&
k !== 'pragma'
) {
expose = expose + ',' + k
}
}

if (acehOld) {
expose = expose + ',--s'
resHdrNew.set('--t', '1')
}

// verify
if (rawLen) {
const newLen = resHdrOld.get('content-length') || ''
const badLen = (rawLen !== newLen)

if (badLen) {
if (retryTimes < MAX_RETRY) {
urlObj = await parseYtVideoRedir(urlObj, newLen, res)
if (urlObj) {
return proxy(urlObj, reqInit, acehOld, rawLen, retryTimes + 1)
}
}
return makeRes(res.body, 400, {
'--error': `bad len: ${newLen}, except: ${rawLen}`,
'access-control-expose-headers': '--error',
})
}

if (retryTimes > 1) {
resHdrNew.set('--retry', retryTimes)
}
}

let status = res.status

resHdrNew.set('access-control-expose-headers', expose)
resHdrNew.set('access-control-allow-origin', '*')
resHdrNew.set('--s', status)
resHdrNew.set('--ver', JS_VER)

resHdrNew.delete('content-security-policy')
resHdrNew.delete('content-security-policy-report-only')
resHdrNew.delete('clear-site-data')

if (status === 301 ||
status === 302 ||
status === 303 ||
status === 307 ||
status === 308
) {
status = status + 10
}

return new Response(res.body, {
status,
headers: resHdrNew,
})
}


/**
* @param {URL} urlObj
*/
function isYtUrl(urlObj) {
return (
urlObj.host.endsWith('.googlevideo.com') &&
urlObj.pathname.startsWith('/videoplayback')
)
}

/**
* @param {URL} urlObj
* @param {number} newLen
* @param {Response} res
*/
async function parseYtVideoRedir(urlObj, newLen, res) {
if (newLen > 2000) {
return null
}
if (!isYtUrl(urlObj)) {
return null
}
try {
const data = await res.text()
urlObj = new URL(data)
} catch (err) {
return null
}
if (!isYtUrl(urlObj)) {
return null
}
return urlObj
}

3. 点击 [保存并部署]。

# 第三步

回到 [概述],点击你刚才创建的项目,点击 [触发器],点击 [添加自定义域],填入一个你账户中的域名或其子域名,点击 [添加自定义域],完成搭建。

# 方法三:使用 nginx

# 优点:简单

# 缺点:

加速范围不广,速度受到服务器性能和速度限制。

# 推荐指数:⭐⭐⭐

新建一个网站,然后把下面内容覆盖到 nginx 配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
server {

listen 80;

listen 443 ssl http2;

# 请更改为你的证书路径
ssl_certificate fullchain.pem;
ssl_certificate_key privkey.pem;

# 请更改为你的镜像域名
server_name jsd.ucbk.cn;

location / {
proxy_pass https://cdn.jsdelivr.net;
proxy_set_header Host $proxy_host;
proxy_set_header Accept-Encoding '';
proxy_ssl_server_name on;
proxy_ssl_name $proxy_host;
proxy_redirect / /;
# Proxy Cache
proxy_cache jsdelivr;
proxy_cache_lock on;
proxy_cache_lock_timeout 15s;
proxy_cache_use_stale updating;
proxy_cache_background_update on;
proxy_cache_key $host$request_uri;
proxy_cache_valid 200 301 302 30d;
proxy_cache_valid 500 501 502 503 15s;
proxy_cache_valid any 5m;
# Replace Domain
sub_filter_once off;
sub_filter_types application/javascript application/json text/xml text/css;
sub_filter '$proxy_host' '$host';
}

}
# 缓存路径请根据需要更改
proxy_cache_path /var/tmp/nginx/jsdelivr levels=1:2 use_temp_path=off keys_zone=jsdelivr:300m inactive=30d max_size=30g;

之后直接把网站涉及到 cdn.jsdelivr.net 都改成你自己的就可以了,如果不想改的话直接在你网站 nginx 配置中加以下内容就可以了

1
2
3
sub_filter_once  off;
sub_filter_types application/javascript application/json text/xml text/css;
sub_filter 'cdn.jsdelivr.net' 'jsd.ucbk.cn';

# 结尾

非常感谢你能看到这里,如有什么问题欢迎在评论区中提出!

更新于 阅读次数

请我喝[茶]~( ̄▽ ̄)~*

jdjwzx233 微信支付

微信支付

jdjwzx233 支付宝

支付宝

jdjwzx233 QQ支付

QQ支付