首页
友链
壁纸
留言
今日热榜
更多
关于
时光
推荐
精品流量卡
Search
1
都二十多年了,你的梦为什么还没碎!
57,062 阅读
2
2022年5个好用的 BT/ 磁力链接下载工具推荐 |Windows 、安卓系统
37,217 阅读
3
nps内网穿透实现外网访问树莓派
32,390 阅读
4
实践利用宝塔建emlog个人博客-超详细【原创】
26,119 阅读
5
Typecho-Joe-Theme主题帮助文档
24,549 阅读
闲杂乱码
Python
网站源码
微信小程序
娱乐分享
Is相册
软件工具
登录
Search
标签搜索
PHP
HTML
API
Javascript
源码
JS
Vue
Github
CloudFlare
接口
函数
SQL
ASP.NET
MVC
EF
T4模板
后台管理
CDN
微信小程序
MAC
韩小韩
累计撰写
261
篇文章
累计收到
1,300
条评论
首页
栏目
闲杂乱码
Python
网站源码
微信小程序
娱乐分享
Is相册
软件工具
页面
友链
壁纸
留言
今日热榜
关于
时光
推荐
精品流量卡
搜索到
260
篇与
韩小韩
的结果
2023-02-03
Vue 2与Vue 3在自定义组件v-model上的区别
{callout color="#f0ad4e"}在vue开发中,通常会对一个自定义的组件进行封装,并实现v-model双向绑定功能{/callout}在 Vue 2 中,通常这样实现父组件<template> <Child v-model="number"></Child> </template> <script> export default { data() { return { number: 0 } }, components: { Child: () => import("./Child.vue") } } </script>子组件<template> <button @click="handleClick">{{ value }}</button> </template> <script> export default { props: { value: Number }, methods: { handleClick() { // 通过emit一个input事件出去,实现 v-model this.$emit('input', this.value + 1) } } } </script>在 vue 3 中,通过这样实现父组件<template> <Child v-model="number"></Child> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const number = ref(0); return { number }; }, }); </script>子组件<template> <button @click="handleClick">{{ value }}</button> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ props: { // 更换成了 modelValue modelValue: Number }, setup(props, { emit }) { // 关闭弹出层 const handleClick = () => emit('update:modelValue', props.modelValue + 1); return { handleClick }; }, }); </script>
2023年02月03日
2,475 阅读
0 评论
1 点赞
2023-01-27
Linux系统下使用iftop结合iptables服务解决带宽被恶意请求的问题
{callout color="#f0ad4e"}最近博客总时不时的打不开,或者是打开巨慢。打开宝塔面板,发现能登录,但是登录非常缓慢,最后挤进来后,看到流量可视化图,上行一直流量一直居高不下。服务器带宽是2兆的,上行200kb,说明直接将整个服务器带宽占满,导致服务器无法访问{/callout}排查Linux下使用iftop工具结合iptables服务来解决带宽资源被恶意请求满的问题,主要通过2个步骤来实现使用iftop 工具查出来是哪些个IP地址在请求主机的带宽资源,找出耗带宽的元凶找出耗带宽的IP地址或者段,分析是out方向还是in方向,使用iptables规则来进行控制首先安装 iftop 工具yum install flex byacc libpcap ncurses ncurses-devel libpcap-devel接着输入 iftop -n 运行,运行后会出现以下界面左侧表示自己的服务器的内网ip中间的<= =>这两个左右箭头,表示的是流量的方向右侧表示请求或发送的ip最右侧表示流量信息从上面图中可以看到,排行第一的流量消耗最大,并且是右箭头。反映出本地内网ip正朝着62.210.177.44这个ip疯狂发送数据,导致服务器带宽占满,无法访问,知道这个ip后,就可以利用 iptables 屏蔽这个ip禁止某个IP访问服务器iptables -I INPUT -s 地址 -j DROP禁止服务器访问此IPiptables -A OUTPUT -d 地址 -j DROP上面图中主要流量是从out方向出去的,那就直接在OUT方向设置策略iptables -A OUTPUT -d 62.210.177.44 -j DROP屏蔽掉后,在看流量统计已经恢复到了正常状态相关参数说明iptables相关参数:禁止此IP访问服务器:iptables -I INPUT -s 1.2.3.4 -j DROP iptables -A INPUT -s 1.2.3.4 -j DROP禁止服务器访问此IP:iptables -A OUTPUT -d 1.2.3.4 -j DROP如果要封某个网段:iptables -I INPUT -s 1.2.3.0/24 -j DROP清空屏蔽IP:iptables -t filter -D INPUT -s 1.2.3.4 -j DROP iptables -t filter -D OUTPUT -d 1.2.3.4 -j DROP一键清空所有规则:iptables -F查看:iptables -L INPUT iptables -L处理IP碎片数量,防止攻击,允许每秒100:iptables -A FORWARD -f -m limit --limit 100/s --limit-burst 100 -j ACCEPT设置ICMP包过滤,允许每秒1个包,限制触发条件是10个包:iptables -A FORWARD -p icmp -m limit --limit 1/s --limit-burst 10 -j ACCEPT
2023年01月27日
778 阅读
0 评论
0 点赞
2023-01-12
AWS教程——解决WordPress网站加载缓慢的大难题
{message type="info" content="谁不喜欢免费的东西?谁不想网站访问更快呢?让我们试一试。借助亚马逊云技术的CloudFront CDN服务提供的免费套餐,通过简单的配置,加速你的WordPress网站。作为一个强大的CMS(内容管理系统)平台,WordPress以其完善的功能、一流的定制能力和丰富的插件广受好评。从个人博客到企业网站,从初创企业到大型跨国企业,我们日常访问的很多网站都是基于WordPress创建的。如果你有这样一个网站,想为世界各地的访问者提供快速流畅的访问体验,你该怎么做?最简单的方法是使用CDN,借助CDN服务提供商在全球主要地区的节点,将内容传递给附近的用户。但是这样一套方案会不会很贵?选择合适的CDN服务其实可以很便宜,甚至对于很多流量不是很大的网站来说, 完全可以实现免费 。"/}{callout color="#f0ad4e"}请注意,本文的所有操作将以全球版亚马逊云科技平台为准。点击 这里 详细了解CloudFront CDN服务并注册账户开始使用免费套餐。{/callout}先决条件要使用本文介绍的方法,你需要具备:一个基于WordPress平台创建的现成网站;为该网站安装一款名为“WPAdmin AWS CDN”的插件;一个亚马逊云科技账户仅此而已!Amazon CloudFront服务是什么Amazon CloudFront是亚马逊云科技提供的CDN服务,可以用极低的延迟和极高的传输速度实现内容的全球化交付。目前,该服务已经通过超过310个节点覆盖全球47个国家/地区的90多个城市,基本上可以全面覆盖所有主要的人口聚集区。那么这项服务为何可以免费使用?其实这主要得益于亚马逊云科技为所有用户提供的“免费套餐”。该套餐涵盖了亚马逊云科技的上百项产品,这些产品有些可以“免费试用”,有些可以“12个月内免费”,有些则是“永久免费”。有关免费套餐涵盖的服务以及详细信息,可以点击 这里 查看。那么这项服务为何可以免费使用?其实这主要得益于亚马逊云科技为所有用户提供的“免费套餐”。该套餐涵盖了亚马逊云科技的上百项产品,这些产品有些可以“免费试用”,有些可以“12个月内免费”,有些则是“永久免费”。有关免费套餐涵盖的服务以及详细信息,可以点击 这里 查看。具体到CloudFront,在免费套餐涵盖下,用户每月可免费获得1TB传出数据流量,1000万次HTTP或HTTPS请求,以及200万次函数调用。该免费套餐永久有效,只有每月用量超出套餐额度,才会对超出部分根据实际用量收费。CloudFront的具体收费方式和费率可参考这里: https://aws.amazon.com/cn/cloudfront/pricing/ 。第一步:注册帐号并开通CloudFront服务1.首先访问亚马逊云科技官网(aws.amazon.com)注册账户,或使用现有账户登录到管理后台。2.随后点击左上角的“Services”,并依次点击“安全性、身份与合规性”,以及“IAM”:3.接下来会打开IAM界面,我们需要在这里创建一个CloudFront用户,随后需要配置WordPress网站使用该用户来访问CloudFront服务。4.请点击页面左侧的“用户”,随后点击“添加用户”:5.在“用户名”处输入一个有意义的名称,例如“CloudFront-User”;将“AWS凭证类型”选择为“访问密钥-编程访问”;然后点击“下一步:权限”:6.选择“直接附加现有策略”;在策略搜索框中输入“CloudFront”,从搜索结果中选择“CloudFrontFullAccess”;随后点击“下一步:标签”:7.随后出现的标签页面上可以为该IAM用户设置一些描述性的标签,不过对于一般的小规模云部署来说,标签的作用并不大,因此不设置也没关系。但对于大规模的,包含几十上百个用户的部署来说,为了简化后续管理,强烈建议设置标签。这里我们不设置标签,直接点击“下一步:审核”。8.在随后的页面上检查所有设置,确定无误后,点击“创建用户”。9.接着会看到下图所示的界面。这里列出了访问密钥ID和私有访问密钥这两个非常关键的信息。请记录这两个信息并妥善保管(后续操作中还将用到)。并且需要注意保密,任何人知道这两个信息后,都将可以使用你的CloudFront服务!至此,CloudFront端的配置已经全部完成。接下来需要配置WordPress网站了。第二步:为WordPress网站启用CloudFront CDN1.登录到WordPress网站的管理后台,在左侧列表中依次点击“插件”和“安装插件”。2.随后在插件搜索框中输入“WPAdmin AWS CDN”;点击对应的“立即安装”按钮:3.安装完成后点击“启用”,随后在WordPress后台界面的左侧会出现一个“WPAdmin CDN”菜单项,鼠标指向该选项,并从弹出菜单中选择“WPAdmin CDN”:4.接下来会看到该插件的配置界面,这里重点需要输入“Access ID”和“Secret Key”这两项。而这两项就是刚才创建IAM用户后获得的那两个值。请将其填写到这里。5.将“访问密钥ID”填入“Access ID”,将“私有访问密钥”填入“Secret Key”。“Cache Policy”请选择“Enabled with Compression”;“Price Class”请选择“All Location”。其他设置均可使用默认值。点击“Create Distribution”:6.稍等片刻该页面会显示已成功创建CloudFront分配,随后点击“Reload the page”链接,可以看到左侧显示出了已分配的CloudFront二级域名,点击该域名对应的“Active”按钮:至此,WordPress网站端的设置已经全部完成。随后如果重新回到CloudFront的后台界面,会看到这里列出了一个“分配”,这就是WPAdmin插件为WordPress网站自动创建的CDN分配。从这里也可以看到,该CDN已经创建成功,并已成功启用。此后全球用户在访问这个网站时,就可以通过CloudFront CDN服务获得更快速、流畅的体验了。那么实际效果到底如何?让我们使用浏览器内置的Lighthouse性能测试工具测试看看。在启用CloudFront CDN之前,通过该工具测试的网站性能结果如下:在启用CDN后,重新测试获得的结果如下:所有性能测试指标都有一定提升。提升幅度看似并不大,主要是因为这是一个新搭建的测试用WordPress空白网站,除了自动生成的一篇占位文章外,并没有包含其他内容,因此本身加载速度就不慢,但CloudFront CDN依然让网站性能有了一定程度的提升。对于已经长时间运营,包含大量文章、图片等内容的网站来说,自然也就可以实现更好的提速效果。每月1TB免费流量,已经可以满足个人或大部分低负载网站的需求。就算超出免费额度,亦可按照极低的费率付费,就能让你的网站享受到以往只有大型企业才能使用的专业级CDN服务。更重要的是,相关的开通和设置操作都很简单,只要安装一个WordPress插件,并进行简单的配置,无需高深的技术能力,几分钟就能轻松搞定。试试看吧!点击 这里 详细了解CloudFront CDN服务,立即注册账户开始使用免费套餐,为你的WordPress网站提速。
2023年01月12日
1,233 阅读
4 评论
3 点赞
2023-01-08
记录部分安卓手机 input type="file"的onchange不能触发问题
今天写了一个文件上传,发现在部分安卓手机上触发不了onchange事件,代码如下:<input type="file" id="input" /> <script> // 在部分安卓手机不触发 input.onchange = () => { alert(123) } </script>经过不断测试后发现,在标签上补上accept="image/*"后可解决该问题,修复后的代码如下:<input type="file" accept="image/*" id="input" /> <script> input.onchange = () => { alert(123) } </script>
2023年01月08日
597 阅读
0 评论
0 点赞
2022-12-26
JS压缩图片并保留图片元信息
{callout color="#f0ad4e"}JS实现图片压缩比较简单,但是图片经过压缩后,压缩后的图片的元信息(拍摄时间、设备、地点)等会丢失掉,如果在特殊场景中需要使用这些元信息的话,就会出现问题了,因此需要将未压缩前的图片元信息填充至压缩后的图片中,以下是实现代码{/callout}// 封装一个获取变量的数据类型函数 const getType = (data: unknown): string => { const toStingResult = Object.prototype.toString.call(data); const type = toStingResult.replace(/^\[object (\w+)\]$/, "$1"); return type.toLowerCase(); }; // 封装一个将 Base64 的字符串转换成 Blob 流的函数 const dataURLtoBlob = (dataURL: string): Blob | null => { const dataType = getType(dataURL); if (dataType !== "string") return null; const arr = dataURL.split(","); if (!arr[0] || !arr[1]) return null; const code = window.atob(arr[1]); const mimeExpRes = arr[0].match(/:(.*?);/); if (!mimeExpRes) return null; let len = code.length; const mime = mimeExpRes[1]; if (!mime) return null; const ia = new Uint8Array(len); while (len--) ia[len] = code.charCodeAt(len); return new Blob([ia], { type: mime }); }; // 利用规律编码格式把里面的标记以及值等分割开来,传原图片的 ArrayBuffer 进来 const getSegments = (arrayBuffer: ArrayBuffer): number[][] => { if (!arrayBuffer.byteLength) return []; let head = 0; let length, endPoint, seg; const segments = []; const arr = [].slice.call(new Uint8Array(arrayBuffer), 0); while (1) { if (arr[head] === 0xff && arr[head + 1] === 0xda) break; if (arr[head] === 0xff && arr[head + 1] === 0xd8) { head += 2; } else { length = arr[head + 2] * 256 + arr[head + 3]; endPoint = head + length + 2; seg = arr.slice(head, endPoint); head = endPoint; segments.push(seg); } if (head > arr.length) break; } return segments; }; // 传入上面 getSegments 的返回值,取出EXIF图片元信息 const getEXIF = (segments: number[][]): Array<number> => { if (!segments.length) return []; let seg: Array<number> = []; for (let i = 0; i < segments.length; i++) { const item = segments[i]; if (item[0] === 0xff && item[1] === 0xe1) { seg = seg.concat(item); } } return seg; }; // 将 getEXIF 获取的元信息,插入到压缩后的图片的 Blob 中,传 压缩图片后的 Blob 流 const insertEXIF = (blob: Blob, exif: number[]): Promise<Blob> => { return new Promise((resolve, reject) => { const fileReader = new FileReader(); fileReader.onload = () => { const arr = [].slice.call(new Uint8Array(fileReader.result as ArrayBuffer), 0); if (arr[2] !== 0xff || arr[3] !== 0xe0) { return reject(new Error("Couldn't find APP0 marker from blob data")); } const length = arr[4] * 256 + arr[5]; const newImage = [0xff, 0xd8].concat(exif, arr.slice(4 + length)); const uint8Array = new Uint8Array(newImage); const newBlob = new Blob([uint8Array], { type: "image/jpeg" }); resolve(newBlob); }; fileReader.readAsArrayBuffer(blob); }); }; // 压缩图片逻辑 const compressImage = (file: File, quality: number): Promise<Blob | null> => { return new Promise((resolve, reject) => { const fileReader = new FileReader(); fileReader.onload = () => { const img = new Image(); img.src = fileReader.result as string; img.onload = () => { const { width, height } = img; const canvas = window.document.createElement("canvas"); const ctx = <CanvasRenderingContext2D>canvas.getContext("2d"); canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0, width, height); const fileData = canvas.toDataURL("image/jpeg", quality); const fileBlob = dataURLtoBlob(fileData); resolve(fileBlob); }; img.onerror = (err) => reject(err); }; fileReader.onerror = (err) => reject(err); fileReader.readAsDataURL(file); }); }; /** * @description: 完整的压缩图片,最终对外暴露的函数 * @param {File} file * @param {number} quality 0 - 1 * @return {Promise<File>} */ export default (file: File, quality = 0.5): Promise<File> => { return new Promise((resolve, reject) => { const dataType = getType(file); if (dataType !== "file") return reject(new Error(`Expected parameter type is file, You passed in ${dataType}`)); if (file.type.indexOf("image") === -1) return resolve(file); // 压缩图片 compressImage(file, quality) .then((compressdBlob) => { if (!compressdBlob) return resolve(file); const fileReader = new FileReader(); fileReader.onload = () => { // 获取图片元信息 const segments = getSegments(fileReader.result as ArrayBuffer); const exif = getEXIF(segments); // 没有元数据的时候, 直接抛出压缩后的图片 if (!exif.length) return resolve(new File([compressdBlob], file.name, { type: file.type, lastModified: file.lastModified })); // 有元数据的时候, 将元信息合并到压缩图片里 insertEXIF(compressdBlob, exif) .then((newBlob) => resolve(new File([newBlob], file.name, { type: file.type, lastModified: file.lastModified }))) .catch(() => resolve(file)); }; fileReader.onerror = () => resolve(file); fileReader.readAsArrayBuffer(file); }) .catch(() => resolve(file)); }); };
2022年12月26日
1,405 阅读
0 评论
0 点赞
2022-12-06
今日热榜HotList-Web前端开源Vue - (聚合热榜)
{message type="info" content="每日热榜前端配合后端(韩小韩聚合热榜API)一起使用,后端源接口为官方接口。"/}环境需求Nodejs >14.1.0使用框架VueElement-UI页面AND源码截图{gird column="2" gap="15"}{gird-item} {/gird-item}{gird-item}{/gird-item}{/gird}源码地址{cloud title="HotList-Web" type="github" url="https://github.com/uxiaohan/HotList-Web" password=""/}{callout color="#f0ad4e"}后端配合 韩小韩API 聚合热榜API 使用.或者自建API使用.源码自行编译 或 直接上传 dist文件夹内已编译文件.{/callout}成品演示{abtn icon="fa-link" color="#ff6800" href="https://hot.vvhan.com/" radius="" content="今日热榜 HotList-Web"/} {abtn icon="fa-link" color="#00d5ff" href="https://api.vvhan.com/hotlist.html" radius="" content="韩小韩API 聚合热榜API"/}希望给个 Star 😬
2022年12月06日
1,237 阅读
2 评论
8 点赞
2022-12-04
在Fly.io上部署Alist网盘程序
{message type="info" content="Fly.io 是一个应用部署平台,和 Netlify、Vercel 不同之处在于 Fly.io 提供了数据库,这就使得在线托管一个小型动态网站成为了可能.Fly.io 根据其官网的简介可以看到其也是借助了 Docker,用户编写代码,并用其提供的工具打包成 Docker 镜像,然后部署到 Fly.io 的平台上,之后就是 Fly.io 平台处理的事情了。本质上来说 Fly.io 就是提供了一个平台化的容器运行时环境。"/}关于收费Fly.io 是提供一定限额的免费使用额度的,他们的目标就是让小型的应用可以免费运行,而在需要扩展的时候支付一定的费用,而这笔费用也不会太昂贵。Fly.io 的应用会根据使用情况单独计费。 Fly.io 会根据单个用户或者组织计费,官方也说了,如果想要更多免费的应用,那么你可以创建多个组织。 {callout color="#f0ad4e"}免费限额{/callout}分类限额说明VM: shared-cpu每个月 2340 小时可以全天候运行 3 个 256 MB 内存的共享 CPU 的 VMVolumes3GB提供 3GB 永久存储Bandwidth160 GB/每月根据各个地方不同分别计算 outbound 流量Anycast IPs无限的 IPv6, 每个应用一个 IPv4每一个额外的 IPv4 地址需要额外每个月 $2Certificates10 个活跃的证书最多 10 个证书{callout color="#f0ad4e"}亚洲和印度免费流量是 30G,美国和欧洲是 100G.更加具体的价格可以参考官网.{/callout}搭建准备Fly.io 自身的文档已经提供了 Docker 应用部署流程 {callout color="#f0ad4e"}本次部署是采用数据持久层来存档 alist 的 sqlite3 数据库,虽然 Fly.io 原生提供了 PostgreSQL 但是那得多用一个 VM 指标,并且免费用户一旦创建了 PostgreSQL 就消耗掉了免费的 1G 空间.{/callout}安装 flyctlFly.io 的大多数操作需要使用命令行,所以先要安装命令行工具 flyctl。安装方式可以参考官方文档: {abtn icon="fa-link" color="#ff6800" href="https://fly.io/docs/hands-on/install-flyctl/" radius="" content="安装 flyctl"/}# Mac(Brew安装) brew install flyctl # Mac (直接安装) curl -L https://fly.io/install.sh | sh# Linux curl -L https://fly.io/install.sh | sh# Windows (Run the Powershell install script) iwr https://fly.io/install.ps1 -useb | iex注册登陆# 注册 flyctl auth signup# 登陆 flyctl auth login{gird column="2" gap="15"}{gird-item}{/gird-item}{gird-item}{/gird-item}{/gird}{callout color="#f0ad4e"}注册完成后,我们就可以正式开始部署应用啦.{/callout}创建应用# 创建应用 git clone https://github.com/alist-org/alist-render cd alist-render flyctl launch# 创建一个 1G 的持久存储空间(最小单位 1) flyctl volumes create data --size 1 --app APP_NAME{callout color="#f0ad4e"}App Name 只允许 数字、字幕、破折号(-),然后记住App Name下面会用到.地区博主选的香港(hkg (Hong Kong)),访问速度会快点.其他一律默认回车.{/callout}修改配置(fly.toml)# 端口修改为 5244 [[services]] http_checks = [] internal_port = 5244# 添加Alist数据目录 [mounts] destination = "/opt/alist/data" source = "data"部署应用准备工作已经完成,现在可以部署 alist 应用,输入以下命令flyctl deploy --remote-only如果部署顺利(看到 deploved successfully),之后就可以用以下命令打开应用:flyctl open{callout color="#f0ad4e"}查看 Alist 密码{/callout}部署的时候,日志会显示密码,如果没有保存,可以在后台日志里面看https://fly.io/apps/APP_NAME/monitoring {gird column="2" gap="15"}{gird-item}{/gird-item}{gird-item}{/gird-item}{/gird}绑定域名{callout color="#f0ad4e"}Certificates => Add certificate => 填入域名 => 添加解析{/callout}{gird column="2" gap="15"}{gird-item}{/gird-item}{gird-item}{/gird-item}{/gird}查看成品{abtn icon="fa-link" color="#ff6800" href="https://store.vvhan.com/" radius="" content="Han Disk"/}参考: https://cuojue.org/read/deploy-alist-in-flyio.html
2022年12月04日
843 阅读
13 评论
0 点赞
2022-12-02
利用CloudFlare的Workers和Pages反代Github并缓存实现Github文件加速访问
{message type="info" content="众所周知Github是全球最大的代码托管平台,我们可以通过使用GitHub学习知识、发现优秀的开源软件,也可以上传自己的项目或文件。但对于国内的同学来说,如果不挂代理,访问Github是不太稳定的,且下载巨慢。网上有很多Github加速访问的方法,如果你也想拥有一个属于自己独享的Github加速,可以按照此教程搭建一个你自己的反代来实现加速Github文件访问的服务。"/}CloudFlare{callout color="#f0ad4e"}CloudFlare提供的不仅仅是CDN,而是一个快速、敏捷、安全的全球网络。CloudFlare通过全球边缘网络实现超快速的静态和动态内容交付。对内容的高速缓存方式实行精确控制,降低带宽成本,并充分利用内置的不计量 DDoS 保护。今天我们使用 CloudFlare Workers 和 CloudFlare Pages来搭建我们的反代服务。{/callout}通过CloudFlare Workers实现反代{callout color="#f0ad4e"}没有CloudFlare账号可以去简单注册一个,以后肯定必然会用的到!首先,创建一个CloudFlare Workers服务,步奏如下图。{/callout}{gird column="2" gap="15"}{gird-item}{/gird-item}{gird-item}{/gird-item}{/gird}{callout color="#f0ad4e"}创建好以后,编辑CloudFlare Workers服务,并写入以下代码即可。{/callout}addEventListener( "fetch",event => { let url=new URL(event.request.url); url.hostname="cdn.jsdelivr.net"; //你需要反代的域名 let request=new Request(url,event.request); event. respondWith( fetch(request) ) } ){gird column="2" gap="15"}{gird-item}{/gird-item}{gird-item}{/gird-item}{/gird}{callout color="#f0ad4e"}由于CloudFlare Workers自带的免费works.dev域名国内已经无法访问了,需要通过绑定自定义域名.{/callout}{gird column="3" gap="15"}{gird-item}{/gird-item}{gird-item}{/gird-item}{gird-item}{/gird-item}{/gird}{callout color="#f0ad4e"}绑定好域名,我们就可以直接访问了!{/callout}通过CloudFlare Pages实现反代{message type="info" content="因为CloudFlare Pages可以连接Github,所以我们有两种方案1.直接上传反代脚本.2.将脚本文件托管在Github上,可实时更新."/}1.直接上传反代脚本.{callout color="#f0ad4e"}首先创建CloudFlare Pages服务,选择直接上传.{/callout}{gird column="2" gap="15"}{gird-item}{/gird-item}{gird-item}{/gird-item}{/gird}{callout color="#f0ad4e"}然后创建一个项目文件夹(名字可以随意),在文件夹内创建一个_worker.js的文件,并写入以下代码:{/callout}export default { async fetch(request, env) { const _url = new URL(request.url); _url.hostname = _url.pathname.startsWith("/gh/") ? "cdn.jsdelivr.net" : "www.baidu.com"; const req = new Request(_url, request); return fetch(req); }, };{callout color="#f0ad4e"}将项目文件夹拖拽到上传区域进行上传(注意:是上传项目文件夹),然后部署项目.{/callout}{gird column="2" gap="15"}{gird-item}{/gird-item}{gird-item}{/gird-item}{/gird}2.将脚本文件托管在Github上,可实时更新.{callout color="#f0ad4e"}首先创建一个Git项目,然后creating a new file 一个_worker.js的JS文件并写入以下代码保存.{/callout}export default { async fetch(request, env) { const _url = new URL(request.url); _url.hostname = _url.pathname.startsWith("/gh/") ? "cdn.jsdelivr.net" : "www.baidu.com"; const req = new Request(_url, request); return fetch(req); }, };{gird column="4" gap="15"}{gird-item}{/gird-item}{gird-item}{/gird-item}{gird-item}{/gird-item}{gird-item}{/gird-item}{/gird}{callout color="#f0ad4e"}然后创建CloudFlare Pages服务,选择连接到Git,选择你刚刚创建的Git项目,开始设置。使用默认配置,并保存部署即可。{/callout}{gird column="3" gap="15"}{gird-item}{/gird-item}{gird-item}{/gird-item}{gird-item}{/gird-item}{/gird}{callout color="#4def86"}到此,我们通过CloudFlare Pages创建的服务已经成功了.{/callout}{callout color="#f0ad4e"}由于CloudFlare Pages自带的免费pages.dev域名国内访问也是很不稳定,这里极其建议同学们绑定自定义域名进行访问!方法也很简单,首先打开CloudFlare Pages,选择你刚刚创建的服务然后 点击自定义域 => 设置自定义域名 => 进行CNAME解析 => 激活域 即可大功告成!{/callout}{gird column="3" gap="15"}{gird-item}{/gird-item}{gird-item}{/gird-item}{gird-item}{/gird-item}{/gird}以上内容,我们已经完成了两种反向代理的搭建,大家自行选择一种,坚持能跑就行的原则,继续接下来的缓存步骤.配置Github加速文件的边缘缓存{callout color="#f0ad4e"}选择你得域名,点击 规则 => 页面规则 => 创建页面规则如图所示,设置以下规则,并保存部署页面规则即可.{/callout}{gird column="3" gap="15"}{gird-item}{/gird-item}{gird-item}{/gird-item}{gird-item}{/gird-item}{/gird}{callout color="#f0ad4e"}最后我们访问一下,感受一下速度~{/callout}今天也是一只白嫖怪噢~
2022年12月02日
1,620 阅读
0 评论
1 点赞
1
2
3
4
...
33