# 前言
jsDelivr —— 一个免费、快速、可靠的为 JS 和开源项目服务的 CDN。但是由于国内访问速度慢,加之 jsDelivr 备案被吊销和 DNS 污染常出现,国内使用了 jsDelivr 的站点常常出现访问速度慢的问题。
你可能会问,为什么不去使用别人的镜像站呢?俗话说 "自己动手,丰衣足食",自建镜像站可以让你更好地掌握自己的数据和服务。使用第三方镜像站存在一些潜在的风险和不确定性。首先,你无法确定第三方镜像站的可靠性和稳定性,它们可能在任何时候关闭或遭遇故障。这将对你的站点造成严重影响,可能导致服务中断。其次,第三方镜像站可能无法及时更新和同步你的站点内容,导致访问者无法获取最新的信息。最后,自建镜像站可以让你更加灵活地定制和管理自己的站点,满足特定需求和提供更好的用户体验。因此,建议在可行的情况下,考虑自建镜像站来确保数据的安全和可靠性。
# 方法一:使用又拍云搭建
# 优点:
- 又拍云是国内知名企业级云服务商,其服务极速、稳定、简单易用,用来搭建镜像站是十分合适的。又拍云有非常多的优惠:加入又拍云联盟 (网站需备案,要在网站 / 应用底部添加又拍云 LOGO 并指向官网) 后,可以获得每月 10G 储存空间和 15G 的 CDN 流量 (按年发放,以 67 元的代金卷发放到账户);新用户注册 (点我注册) 还可以直接获得 61 元的代金卷 (有效期一年)。在这些优惠的加成下,你可以零成本搭建一个镜像站。
2. 加速效果明显 (如图)
加速前:
加速后:
# 缺点:
需要备案!!!
# 推荐指数:⭐⭐⭐⭐⭐
# 搭建方法:
# 第一步:
创建又拍云账户 (点我注册)
# 第二步:
进入控制台的 CDN 管理界面 (https://console.upyun.com/services/cdn/), 并创建服务,然后配置服务 (具体参数如下)。
- 服务名称:唯一标识服务,例如:image-upyun-com,一个服务下面可以绑定多个自有域名。
注意事项
服务名称仅限 5~20 位; 必须以小写英文字符开头,仅支持小写英文字符、数字、中划线组合。
- 加速域名:填写此次需要配置的加速域名。
注意事项
加速域名必须已在工信部备案; 待加速域名尚未在又拍云 CDN 平台配置。
加速域名需要进行域名所有权验证,验证通过后方能添加成功。
- 应用场景:这里选择全站加速
- 回源协议:选协议跟随。
- 源站证书校验:切记!!不要打开 (实测开了以后不能用)!!!
- 线路配置:源站地址填
cdn.jsdelivr.net
, 端口号不要动。
# 第三步
- 服务创建成功后,操作界面会提示 CDN 加速服务创建成功,并会自动跳转到该服务的【功能配置】界面
- 在功能配置界面,有域名管理、回源管理、缓存配置、性能优化、HTTPS、访问控制、图片处理等功能配置模块,在【域名管理】模块下,可以针对该服务绑定多个自有域名,请耐心等待域名配置(约 10 分钟),查看域名对应的状态是否为[正常]
- 可查看 CDN 平台为您分配的 CNAME 地址,此时需要去域名 DNS 解析商处,为该域名添加一条 CNAME 记录,待 CNAME 配置生效之后,方可使用 CDN 服务。
# 第四步 (非必要,但是可以提升体验)
配置 HTTPS: 点击 [HTTPS], 点击 "HTTPS 配置" 右边的管理 (如图) 然后你可以选择添加自有证书或直接使用又拍云注册证书 (点我前往证书管理)。添加完后,打开 [HTTPS 访问],不建议勾选 [强制 HTTPS 访问]。
建议打开智能压缩和页面压缩 (如图)
建议配置缓存、浏览器缓存和分段缓存 (如图)
在 [访问控制] 中,打开 Referer 防盗链、WAF 保护、HTTP 请求体大小限制、IP 访问限制 (如图)
此配置仅作参考,请根据实际情况进行配置!
你还可以配置 [边缘规则],来实现一些特殊效果。(这里不做演示)
# 方法二:使用 Cloudflare workers 搭建
# 优点:
- 简单,步骤少,加速范围广
- 无需备案,加速效果较好 (如图)
加速前:
加速后: - 无费用,每天有免费额度 (每天免费 100000 个请求)
# 缺点:
- 部分地区访问较慢
- 免费额度较少,对于访问量大的站点可能不够
- 需要有一个挂在 cloudflare 的域名
# 推荐指数:⭐⭐⭐⭐
# 搭建方法
# 第一步
- 在 Cloudflare 管理面板的 [Workers 和 Pages] 栏 ->[概述]->[创建应用程序]->[创建 Worker](如图)
- 随便填一个名称,点击 [部署](如图)
# 第二步
- 在创建完成的页面点击 [编辑代码](如图)
- 将以下代码直接粘贴进代码框:
'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 配置文件
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 配置中加以下内容就可以了
sub_filter_once off;
sub_filter_types application/javascript application/json text/xml text/css;
sub_filter 'cdn.jsdelivr.net' 'jsd.ucbk.cn';
# 结尾
非常感谢你能看到这里,如有什么问题欢迎在评论区中提出!