利用Cloudflare Workers部署臭鼬在线接头霸王项目实例

前言

之前我们在解决 域名CNAME记录不能同时适配根域名和www 的时候提到过 Cloudflare Workers 功能:
《域名CNAME记录不能同时适配根域名和www的解决方法》

那么我们就以一个简单的 臭鼬接头霸王 项目来体验一次。

项目地址:fz6m / kyaru-concat-magic
这个项目是我基于 ayamomiji / kyaru-concat 优化魔改的,优化了流程体验,增加了移动端适配和更多功能。

部署 Workers

如何添加 Workers 在上文链接的文章内已经详细介绍了,这里不做详述,下面分析我们的页面:


<html lang="en">
<head>
	<meta charset='utf-8'>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

	<title>接头霸王Newtitle>

	<link rel='icon' type='image/x-icon' href='/favicon.ico'>
	<link rel='stylesheet' href='./global.css'>
	<link rel='stylesheet' href='build/bundle.css'>

	<script defer src='build/bundle.js'>script>
head>

<body>
body>
html>

可以看出这个页面的内容也不简单也不复杂,因为 Workers 展示是单页面的,如果把全部引入的 .css 和 ·.js 全部写在一起会很臃肿,那么我们就考虑使用 cdn 。

我将其 releases 到 github 之后使用 jsdelivr 提供的免费 cdn 。

那么这个脚本就应该写成:

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

/**
 * Respond to the request
 * @param {Request} request
 */
async function handleRequest(request) {
  const init = {
    headers: {
      'content-type': 'text/html;charset=UTF-8',
    },
  }
  return new Response(renderHTML(), init);
}

function renderHTML() {
  return `
  
  
    
    

    接头霸王New

    
    
    

    
  

  
  
  `
}

为什么这么写,在前言链接的文章内已经详细介绍了。

之后将其路由到网站子域名下,同时对网站子域名做一个 8.8.8.8 的无效解析(这么解析是为了让 Workers 生效,原理已在前言链接文章内详细说明)

效果

利用Cloudflare Workers部署臭鼬在线接头霸王项目实例_第1张图片
利用Cloudflare Workers部署臭鼬在线接头霸王项目实例_第2张图片

其他

  • 另外,图片的访问也要走 cdn 或者 github 图床等,这部分在源码内提前写好。

  • 本项目不仅仅可以用于臭鼬接头,只要有素材接任意均可。

你可能感兴趣的:(Github)