Lvxiang Story

Edgetunnel2：基于 Cloudflare 的轻量化边缘方案概览

Fri, 22 May 2026 00:00:00 GMT

Edgetunnel2：基于 Cloudflare 的轻量化边缘方案概览

最近看到一篇关于 Edgetunnel2.0 的文章，整体感受是：它更像是一个围绕 Cloudflare Pages / Workers 生态打造的可视化边缘项目方案。相比早期偏脚本化、变量化的方式，这个版本明显更强调 WebUI 管理、配置简化、功能整合。

原文标题也很直接：“就是这么简单，就是这么方便”。从文章结构来看，作者想传递的重点并不是单一功能，而是一个更易上手、更集中管理、更适合折腾的新版本形态。

原文链接

原文：https://blog.cmliussss.com/p/edt2/
项目仓库：https://github.com/cmliu/edgetunnel

文章配图

封面图

Demo 预览

这篇文章主要讲了什么

从内容上看，这篇文章主要围绕下面几个方面展开：

Edgetunnel2.0 的整体升级
相比旧方案的功能增强
基于 Cloudflare 平台的整体思路
可视化管理界面的引入
多种功能模块的统一整合
边缘平台场景下的扩展能力

也就是说，它并不只是介绍一个单点功能，而是在展示一个更完整的项目形态：
从部署形态、管理方式，到状态感知和多节点扩展，尽量集中到一个面板里。

核心亮点总结

1. 引入 WebUI，降低配置门槛

原文最明显的变化之一，就是加入了 WebUI 管理界面。

这意味着很多原本需要手动改配置才能完成的事情，现在可以直接在界面中完成。对普通用户来说，这种变化非常关键：

更直观
更容易理解
减少手工修改出错概率
更适合后续维护

界面示意

2. 更强调统一管理

从原文结构能看出来，Edgetunnel2.0 想做的不只是一个简单页面，而是一个集中的管理入口。文章里展示的能力包括：

基础配置集中管理
节点信息统一查看
结果集中维护
通知能力整合
请求统计展示
日志与状态感知

这种思路比较接近“轻面板化”。也就是说，它不是单纯把功能堆起来，而是在把功能收拢进一个相对统一的管理体验里。

3. 与 Cloudflare 生态结合得更紧

文章明确围绕 Cloudflare Pages / Workers 展开。
这类方案的优势通常包括：

借助全球边缘网络
部署流程相对轻量
对个人开发者比较友好
与 GitHub / 静态站点工作流兼容度较高

从项目定位看，Edgetunnel2.0 很适合作为一个 Cloudflare 边缘应用实践案例 来理解。

4. 功能整合度明显增强

原文列出了很多升级点，归纳下来，重点不在某一个功能，而在于“把原本零散的能力整合到一起”。

比如文章提到的新版本思路包括：

全新传输架构
更简化的配置流程
多模块支持
自动化能力整合
通知能力整合
请求统计能力整合
多节点协同管理能力

这种设计会让项目从“能跑”变成“更容易持续使用”。

5. 更适合做面板型、可视化项目

如果从工程角度看，这篇文章最大的价值之一，是展示了一个趋势：

以前很多 Cloudflare 上的轻量项目偏向“参数驱动”，
现在越来越多项目开始走向“可视化 + 管理化 + 面板化”。

这对于用户体验提升很明显。尤其是当功能越来越多时，如果仍然完全依赖变量和脚本，维护成本会迅速升高。

功能模块的文章结构梳理

虽然这里不展开具体操作步骤，但从原文目录可以看出，作者将内容分成了几个大的模块。

1. 部署相关

主要介绍项目如何落到 Cloudflare 平台上，并完成基础初始化。

相关配图示例：

2. 管理入口与页面使用

重点展示如何进入管理页面，以及面板中能看到什么。

相关配图示例：

3. 自动化与结果管理能力

原文很强调集中式结果管理，并将其做成多个子能力。

这里不展开具体方法，但可以看出作者在努力解决的是：

使用门槛
维护成本
自动化程度
灵活性与可控性之间的平衡

相关配图示例：

4. 通知与状态感知

原文也加入了通知与状态展示相关功能。
这说明作者已经不满足于“部署完成就结束”，而是开始考虑后续维护体验，例如：

是否有人访问
是否有登录动作
是否有数据获取行为
请求额度是否够用

相关配图示例：

5. 多节点协同思路

文章最后还展示了更进一步的扩展思路：通过一个面板对多个节点进行统一管理。

这类思路的意义在于：

增强扩展性
分摊资源压力
让架构更灵活
便于后期持续追加节点

相关配图示例：

我对这篇文章的看法

如果不去看具体细节操作，只从产品形态来看，我觉得 Edgetunnel2.0 的价值主要有三点：

第一，降低了 Cloudflare 项目的理解门槛

很多人知道 Workers / Pages，但不知道这些平台除了托管页面，还能怎么玩。
这篇文章等于给了一个比较完整的案例。

第二，把“能用”往“好用”推进了一步

原本很多这类项目都偏技术向，普通用户不容易上手。引入 WebUI 后，至少在可理解性和维护性上提升很大。

第三，体现了边缘平台项目的演进方向

从脚本化、变量化，走向可视化、整合化、面板化，这其实是很自然的一步。
Edgetunnel2.0 很适合作为这种演进趋势的一个观察样本。

适合哪些人参考

这篇文章比较适合下面几类读者阅读：

对 Cloudflare Pages / Workers 感兴趣的人
想看一个边缘平台项目如何做 UI 化的人
想了解轻量部署与管理面板思路的人
对边缘计算应用实践感兴趣的人

总结

整体来看，Edgetunnel2.0 这篇文章最重要的不是某一个单点功能，而是它展示了一种更完整的项目形态：

依托 Cloudflare 平台
提供更轻量的上线方式
通过 WebUI 降低配置门槛
用统一面板整合多个能力模块
从“能部署”进一步走向“便于管理和维护”

如果你平时关注 Cloudflare 生态、边缘计算部署、轻量化服务发布、管理面板设计，那么这篇文章还是很值得参考的。

武汉出发·六月海滨五天四晚亲子游全攻略

Thu, 21 May 2026 00:00:00 GMT

Markdown Extended Features

Wed, 01 May 2024 00:00:00 GMT

GitHub Repository Cards

You can add dynamic cards that link to GitHub repositories, on page load, the repository information is pulled from the GitHub API.

::github{repo="Fabrizz/MMM-OnSpotify"}

Create a GitHub repository card with the code ::github{repo="<owner>/<repo>"}.

::github{repo="saicaca/fuwari"}

Admonitions

Following types of admonitions are supported: note tip important warning caution

:::note Highlights information that users should take into account, even when skimming. :::

:::tip Optional information to help a user be more successful. :::

:::important Crucial information necessary for users to succeed. :::

:::warning Critical content demanding immediate user attention due to potential risks. :::

:::caution Negative potential consequences of an action. :::

Basic Syntax

:::note
Highlights information that users should take into account, even when skimming.
:::

:::tip
Optional information to help a user be more successful.
:::

Custom Titles

The title of the admonition can be customized.

:::note[MY CUSTOM TITLE] This is a note with a custom title. :::

:::note[MY CUSTOM TITLE]
This is a note with a custom title.
:::

GitHub Syntax

[!TIP] The GitHub syntax is also supported.

> [!NOTE]
> The GitHub syntax is also supported.

> [!TIP]
> The GitHub syntax is also supported.

Spoiler

You can add spoilers to your text. The text also supports Markdown syntax.

The content :spoiler[is hidden ayyy]!

The content :spoiler[is hidden **ayyy**]!

Expressive Code Example

Wed, 10 Apr 2024 00:00:00 GMT

Here, we'll explore how code blocks look using Expressive Code. The provided examples are based on the official documentation, which you can refer to for further details.

Expressive Code

Syntax Highlighting

Regular syntax highlighting

console.log('This code is syntax highlighted!')

Rendering ANSI escape sequences

ANSI colors:
- Regular: [31mRed[0m [32mGreen[0m [33mYellow[0m [34mBlue[0m [35mMagenta[0m [36mCyan[0m
- Bold:    [1;31mRed[0m [1;32mGreen[0m [1;33mYellow[0m [1;34mBlue[0m [1;35mMagenta[0m [1;36mCyan[0m
- Dimmed:  [2;31mRed[0m [2;32mGreen[0m [2;33mYellow[0m [2;34mBlue[0m [2;35mMagenta[0m [2;36mCyan[0m

256 colors (showing colors 160-177):
[38;5;160m160 [38;5;161m161 [38;5;162m162 [38;5;163m163 [38;5;164m164 [38;5;165m165[0m
[38;5;166m166 [38;5;167m167 [38;5;168m168 [38;5;169m169 [38;5;170m170 [38;5;171m171[0m
[38;5;172m172 [38;5;173m173 [38;5;174m174 [38;5;175m175 [38;5;176m176 [38;5;177m177[0m

Full RGB colors:
[38;2;34;139;34mForestGreen - RGB(34, 139, 34)[0m

Text formatting: [1mBold[0m [2mDimmed[0m [3mItalic[0m [4mUnderline[0m

Editor & Terminal Frames

Code editor frames

console.log('Title attribute example')

<!-- src/content/index.html -->
<div>File name comment example</div>

Terminal frames

echo "This terminal frame has no title"

Write-Output "This one has a title!"

Overriding frame types

echo "Look ma, no frame!"

# Without overriding, this would be a terminal frame
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail

Text & Line Markers

Marking full lines & line ranges

// Line 1 - targeted by line number
// Line 2
// Line 3
// Line 4 - targeted by line number
// Line 5
// Line 6
// Line 7 - targeted by range "7-8"
// Line 8 - targeted by range "7-8"

Selecting line marker types (mark, ins, del)

function demo() {
  console.log('this line is marked as deleted')
  // This line and the next one are marked as inserted
  console.log('this is the second inserted line')

  return 'this line uses the neutral default marker type'
}

Adding labels to line markers

// labeled-line-markers.jsx
<button
  role="button"
  {...props}
  value={value}
  className={buttonClassName}
  disabled={disabled}
  active={active}
>
  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

Adding long labels on their own lines

// labeled-line-markers.jsx
<button
  role="button"
  {...props}

  value={value}
  className={buttonClassName}

  disabled={disabled}
  active={active}
>

  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

Using diff-like syntax

+this line will be marked as inserted
-this line will be marked as deleted
this is a regular line

--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+this is an actual diff file
-all contents will remain unmodified
 no whitespace will be removed either

Combining syntax highlighting with diff-like syntax

  function thisIsJavaScript() {
    // This entire block gets highlighted as JavaScript,
    // and we can still add diff markers to it!
-   console.log('Old code to be removed')
+   console.log('New and shiny code!')
  }

Marking individual text inside lines

function demo() {
  // Mark any given text inside lines
  return 'Multiple matches of the given text are supported';
}

Regular expressions

console.log('The words yes and yep will be marked.')

Escaping forward slashes

echo "Test" > /home/test.txt

Selecting inline marker types (mark, ins, del)

function demo() {
  console.log('These are inserted and deleted marker types');
  // The return statement uses the default marker type
  return true;
}

Word Wrap

Configuring word wrap per block

// Example with wrap
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

// Example with wrap=false
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

Configuring indentation of wrapped lines

// Example with preserveIndent (enabled by default)
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

// Example with preserveIndent=false
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

Collapsible Sections

// All this boilerplate setup code will be collapsed
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'

const engine = someBoilerplateEngine(evenMoreBoilerplate())

// This part of the code will be visible by default
engine.doSomething(1, 2, 3, calcFn)

function calcFn() {
  // You can have multiple collapsed sections
  const a = 1
  const b = 2
  const c = a + b

  // This will remain visible
  console.log(`Calculation result: ${a} + ${b} = ${c}`)
  return c
}

// All this code until the end of the block will be collapsed again
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: 'End of example boilerplate code' })

Line Numbers

Displaying line numbers per block

// This code block will show line numbers
console.log('Greetings from line 2!')
console.log('I am on line 3')

// Line numbers are disabled for this block
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')

Changing the starting line number

console.log('Greetings from line 5!')
console.log('I am on line 6')

Simple Guides for Fuwari

Mon, 01 Apr 2024 00:00:00 GMT

Cover image source: Source

This blog template is built with Astro. For the things that are not mentioned in this guide, you may find the answers in the Astro Docs.

Front-matter of Posts

---
title: My First Blog Post
published: 2023-09-09
description: This is the first post of my new Astro blog.
image: ./cover.jpg
tags: [Foo, Bar]
category: Front-end
draft: false
---

Attribute	Description
`title`	The title of the post.
`published`	The date the post was published.
`description`	A short description of the post. Displayed on index page.
`image`	The cover image path of the post.<br/>1. Start with `http://` or `https://`: Use web image<br/>2. Start with `/`: For image in `public` dir<br/>3. With none of the prefixes: Relative to the markdown file
`tags`	The tags of the post.
`category`	The category of the post.
`draft`	If this post is still a draft, which won't be displayed.

Where to Place the Post Files

Your post files should be placed in src/content/posts/ directory. You can also create sub-directories to better organize your posts and assets.

src/content/posts/
├── post-1.md
└── post-2/
    ├── cover.png
    └── index.md

Markdown Example

Sun, 01 Oct 2023 00:00:00 GMT

An h1 header

Paragraphs are separated by a blank line.

2nd paragraph. Italic, bold, and monospace. Itemized lists look like:

this one
that one
the other one

Note that --- not considering the asterisk --- the actual text content starts at 4-columns in.

Block quotes are written like so.

They can span multiple paragraphs, if you like.

Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all in chapters 12--14"). Three dots ... will be converted to an ellipsis. Unicode is supported. ☺

An h2 header

Here's a numbered list:

first item
second item
third item

Note again how the actual text starts at 4 columns in (4 characters from the left side). Here's a code sample:

# Let me re-iterate ...
for i in 1 .. 10 { do-something(i) }

As you probably guessed, indented 4 spaces. By the way, instead of indenting the block, you can use delimited blocks, if you like:

define foobar() {
    print "Welcome to flavor country!";
}

(which makes copying & pasting easier). You can optionally mark the delimited block for Pandoc to syntax highlight it:

import time
# Quick, count to ten!
for i in range(10):
    # (but not *too* quick)
    time.sleep(0.5)
    print i

An h3 header

Now a nested list:

First, get these ingredients:
- carrots
- celery
- lentils
Boil some water.

Dump everything in the pot and follow this algorithm:

 find wooden spoon
 uncover pot
 stir
 cover pot
 balance wooden spoon precariously on pot handle
 wait 10 minutes
 goto first step (or shut off burner when done)

Do not bump wooden spoon or it will fall.

Notice again how text always lines up on 4-space indents (including that last line which continues item 3 above).

Here's a link to a website, to a local doc, and to a section heading in the current doc. Here's a footnote [^1].

[^1]: Footnote text goes here.

Tables can look like this:

size material color

9 leather brown 10 hemp canvas natural 11 glass transparent

Table: Shoes, their sizes, and what they're made of

(The above is the caption for the table.) Pandoc also supports multi-line tables:

keyword text

red Sunsets, apples, and other red or reddish things.

green Leaves, grass, frogs and other things it's not easy being.

A horizontal rule follows.

Here's a definition list:

apples : Good for making applesauce. oranges : Citrus! tomatoes : There's no "e" in tomatoe.

Again, text is indented 4 spaces. (Put a blank line between each term/definition pair to spread things out more.)

Here's a "line block":

| Line one | Line too | Line tree

and images can be specified like so:

Inline math equations go in like so: $\omega = d\phi / dt$. Display math should get its own line and be put in in double-dollarsigns:

$$I = \int \rho R^{2} dV$$

$$ \begin{equation*} \pi =3.1415926535 ;8979323846;2643383279;5028841971;6939937510;5820974944 ;5923078164;0628620899;8628034825;3421170679;\ldots \end{equation*} $$

And note that you can backslash-escape any punctuation characters which you wish to be displayed literally, ex.: `foo`, *bar*, etc.

Include Video in the Posts

Tue, 01 Aug 2023 00:00:00 GMT

Just copy the embed code from YouTube or other platforms, and paste it in the markdown file.

---
title: Include Video in the Post
published: 2023-10-19
// ...
---

<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>

YouTube

Bilibili

Lvxiang Story

Edgetunnel2：基于 Cloudflare 的轻量化边缘方案概览

Edgetunnel2：基于 Cloudflare 的轻量化边缘方案概览

原文链接

文章配图

封面图

Demo 预览

这篇文章主要讲了什么

核心亮点总结

1. 引入 WebUI，降低配置门槛

界面示意

2. 更强调统一管理

3. 与 Cloudflare 生态结合得更紧

相关文章截图

4. 功能整合度明显增强

5. 更适合做面板型、可视化项目

功能模块的文章结构梳理

1. 部署相关

2. 管理入口与页面使用

3. 自动化与结果管理能力

4. 通知与状态感知

5. 多节点协同思路

我对这篇文章的看法

第一，降低了 Cloudflare 项目的理解门槛

第二，把“能用”往“好用”推进了一步

第三，体现了边缘平台项目的演进方向

适合哪些人参考

总结

武汉出发·六月海滨五天四晚亲子游全攻略

Markdown Extended Features

GitHub Repository Cards

Admonitions

Basic Syntax

Custom Titles

GitHub Syntax

Spoiler

Expressive Code Example

Expressive Code

Syntax Highlighting

Regular syntax highlighting

Rendering ANSI escape sequences

Editor & Terminal Frames

Code editor frames

Terminal frames

Overriding frame types

Text & Line Markers

Marking full lines & line ranges

Selecting line marker types (mark, ins, del)

Adding labels to line markers

Adding long labels on their own lines

Using diff-like syntax

Combining syntax highlighting with diff-like syntax

Marking individual text inside lines

Regular expressions

Escaping forward slashes

Selecting inline marker types (mark, ins, del)

Word Wrap

Configuring word wrap per block

Configuring indentation of wrapped lines

Collapsible Sections

Line Numbers

Displaying line numbers per block

Changing the starting line number

Simple Guides for Fuwari

Front-matter of Posts

Where to Place the Post Files

Markdown Example

An h1 header

An h2 header

An h3 header

Include Video in the Posts

YouTube

Bilibili