阿涛の小破站

WebView2应用资源占用优化指南

Mon, 10 Aug 2026 00:00:00 GMT

基于WebView2的框架开发的应用一般内存占用都很高，默认的初始化界面的运行时内存占用都有100多MB，加上几个页面和功能交互后，很容易就超过200多MB。

最近精读了各框架的性能优化文档，并且参照了很多最佳实践，在实现一个真正可用的应用后，内存占用依然可以降低到100MB以内，现在整理成优化经验分享给大家。

通用经验文档，面向 Windows 上基于 WebView2 的

Tauri 2、Wails v3 以及内嵌 Chromium 的 Electron 最新版本，

汇总内存占用与交互流畅度的优化要点、框架差异和避坑清单。

1. 内核认知：WebView2 / Chromium 进程模型

1.1 进程组成

每个 WebView2 / Chromium 实例不是单进程，而是一个进程组：

browser（主浏览器进程）：每套“环境”一份，负责导航、网络、会话管理；
renderer（渲染进程）：每个页面/iframe 一份，承载 DOM、JS heap、CSS；
GPU 进程：硬件加速渲染；
utility（网络服务、存储、音频等） 若干。

进程数量与内存随页面复杂度、窗口数量增长，这是“轻量 WebView 应用”内存仍偏高、以及多窗口应用内存成倍增长的根本原因。

1.2 环境、数据目录与 profile

环境（Environment） = 独立 User Data Folder + 一致的环境参数。同一环境内的多个 WebView 控件共享同一进程组；不同环境各自拥有独立的 browser 进程树。
多 profile：同一环境内可建多个 profile，各自隔离 cookie、storage、 IndexedDB、缓存等站点数据，但共享运行时进程（WebView2 multi-profile 支持）。这是“既要隔离数据、又要省内存”时优先于独立环境的手段。
渲染进程保留机制：Chromium 可能保留已关闭窗口的渲染进程以便复用，因此共享环境下“关窗”不代表内存立即回落。
独立环境的进程树退出：环境内最后一个 WebView 销毁后，browser 进程退出（BrowserProcessExited 事件），其全部子进程随之释放，内存可回收。

1.3 内存量级参考

简单应用的 WebView 页面本身约 10–20MB（Wails 官方架构文档参考值）；实际占用还需加上每套环境的 browser 进程、GPU 进程与页面复杂度带来的渲染进程开销，第三方站点页面往往数倍于此。具体数值应以本机任务管理器/进程树测量为准。

2. 优化总则

先测后优：用任务管理器 / 浏览器任务管理器 / DevTools Memory 定位内存大头，不要凭感觉优化。
内存与流畅度是权衡：禁用 GPU 省内存但可能让动画/滚动变卡；后台节流省 CPU 但会延迟后台任务。每项开关按实际页面场景取舍。
常驻窗口共享环境，临时窗口用完即毁：常驻 UI 复用进程省内存；一次性窗口（认证、弹窗）用独立环境 + 立即销毁，换取确定性回收。
生产环境不依赖实验性 browser flags：微软官方明确警告这些 flags 可能随时移除或改变行为。

3. 通用优化清单（三框架均适用）

3.1 窗口与环境策略

场景	推荐策略
常驻主窗口	共享环境（框架默认），不要为每个窗口创建独立环境
一次性窗口（认证 / 弹窗）	独立 User Data Folder（独立环境）+ 销毁窗口，进程树整体退出
仅需隔离站点数据	同一环境内用独立 profile，共享运行时（比独立环境省内存）
启动页 / 简单对话框	不要用 WebView2，用原生 UI，或延迟到真正需要时再创建窗口
多实例	加单实例锁，避免多份进程组内存翻倍

注意事项：

不同环境 / 不同 profile 之间 cookie、localStorage 不互通。临时窗口里产生的会话凭据需显式持久化，再交给主逻辑使用。
浏览器参数不同的 WebView 必须使用不同的数据目录（wry 官方警告）；同一环境的全部窗口应保持参数一致。
覆盖 additional_browser_args 时必须显式保留框架默认参数，否则默认值被整体替换（详见 §4 避坑）。

3.2 启动参数（内存向）

--disable-gpu：禁用 GPU 进程。微软官方仅建议用于排障；简单静态 UI （表单、设置页）可接受，含动画 / 视频 / 复杂滚动的页面必须保留硬件加速。
--disable-features=msEdgeAutofill,msEdgeShopping,msEdgeWallet：禁用 Edge 附加服务，减少常驻资源。
--js-flags=--scavenger_max_new_space_capacity_mb=8：限制 V8 新生代堆上限，降低 JS 引擎内存占用（微软官方 flags 文档示例值）。
--disk-cache-size=N：限制磁盘缓存上限（字节）。

实验性（微软官方 flags 文档，生产谨慎）：

msWebView2CancelInitialNavigation：取消初始导航，加快启动；
msWebView2CodeCache：为虚拟主机映射/拦截的资源启用字节码缓存，加速重复加载；
msFloatyMode=false：关闭“浏览器保留”实验（WebView 不支持该保留实验）。

反例：--disable-background-timer-throttling 会增加后台 CPU/内存消耗，默认不要使用。

3.3 生命周期与回收

WebView2 提供 MemoryUsageTargetLevel = Low（应用非活动时降低 WebView 内存目标，丢弃缓存、换页到磁盘）与 TrySuspendAsync() / Resume()（挂起渲染进程）；恢复时自动回到 Normal（微软官方 API 文档）。
Electron 的 backgroundThrottling 默认开启：后台自动节流动画与定时器，不要为“看起来流畅”随意关闭。
长期运行的页面会自然累积状态，定期刷新 WebView 可回到干净基线 （微软官方建议）。
删除 User Data Folder 必须等 BrowserProcessExited，否则删除失败或残留旧配置（微软官方进程事件文档）。

3.4 前端与交互（流畅度）

动画优先用 CSS；高频事件防抖/节流；低优任务用 requestIdleCallback；长任务交给 Web Worker（Electron 官方性能文档建议）。
避免 layout thrashing（一帧内交替读写 DOM 造成多次 reflow）；长列表虚拟化；图片/组件懒加载；代码分割减小初始载荷。
减少桥接/IPC 频率：批量、合并消息、推送代替轮询；避免大对象在桥接层往返。
事件监听随组件卸载清理，防止 DOM/闭包泄漏。

3.5 后端 / 主进程

不阻塞 UI 线程：磁盘 I/O、CPU 密集任务全部异步或进 worker。
事件推送要合并/节流。教训：Wails 旧版用 eval 直推事件，高频大载荷下造成内存泄漏，v3 已改为拉取模型（见 §5）。
大数据分页或流式返回，不要把整包数据塞给渲染层。

4. 框架落地：Tauri 2

4.1 配置（tauri.conf.json）

{
  "app": {
    "windows": [
      {
        "label": "main",
        "additionalBrowserArgs": "--disable-gpu --disable-features=msWebOOUI,msPdfOOUI,msSmartScreenProtection,msEdgeAutofill,msEdgeShopping,msEdgeWallet"
      }
    ]
  }
}

backgroundThrottling 支持三档："suspend"（默认，不在窗口中的 WebView 完全挂起任务）、"throttle"（限制处理但不完全挂起）、"disabled"（禁用后台节流）——配置参考页面已列出。
覆盖 browser args 必须保留 wry 默认值：wry 默认传 --disable-features=msWebOOUI,msPdfOOUI,msSmartScreenProtection，并在启用 autoplay / 设置代理时附带 --autoplay-policy / --proxy-server（wry 官方文档警告：不保留则默认行为被替换）。

4.2 Rust API

WebviewWindowBuilder::additional_browser_args()：每窗口浏览器参数；
WebviewWindowBuilder::data_directory()：覆盖该窗口的 WebView2 数据目录，传不同路径即得到独立环境（独立进程树）；
WebviewWindowBuilder::with_profile_name()（wry 层）：同一环境内隔离站点数据但共享运行时；
window.destroy()：立即销毁（跳过关闭事件拦截），优于 close()；
Windows 上创建 WebView2 窗口应在 async 命令中执行，同步路径会死锁。

4.3 一次性窗口推荐模式

临时窗口使用独立数据目录，获得独立环境；
每次打开前按业务需要清空该目录：销毁窗口后旧会话数据会残留在 profile 中，复用时可能导致状态误判；
需要保留的会话凭据先显式持久化（注意平台凭据存储存在单条长度上限， Windows Credential Manager 对 UTF-16 编码条目限制约 2560 字符，大体积凭据可能超限，需评估存储方案）；
完成后 destroy() 窗口：独立环境中最后一个 WebView 销毁后整个进程树退出，内存随之释放。

5. 框架落地：Wails v3

状态：Wails v3.0.0-beta.0 于 2026-08-01 发布，桌面端 API 已稳定，但仍是预发布版本；Wails v2 仍是当前稳定版。本文以 v3 官方文档为准。

5.1 浏览器参数是应用级的

Windows 上 WebView2 按 user data path 共享单一浏览器环境，因此浏览器参数放在应用级，而非每窗口：

app := application.New(application.Options{
    Windows: application.WindowsOptions{
        EnabledFeatures:       nil, // WebView2 feature flags 启用列表
        DisabledFeatures:      nil, // WebView2 feature flags 禁用列表
        AdditionalBrowserArgs: "--disable-gpu --disable-features=msWebOOUI,msPdfOOUI,msSmartScreenProtection,msEdgeAutofill,msEdgeShopping,msEdgeWallet",
    },
})

三个选项作用于共享的 WebView2 环境，所有窗口统一生效（v3.0.0-alpha.66 起从每窗口选项移到应用级，原因即“共享单一环境”）；
历史默认 User Data Folder 位于 %APPDATA%\<二进制名>（v2 提供 WebviewUserDataPath 自定义，v3 是否保留以官方文档为准）；
禁用 GPU 直接通过 AdditionalBrowserArgs 传 --disable-gpu。

5.2 桥接与事件

避免大数据传输：传 ID、按需取详情；用事件推送代替前端轮询；
大文件流式处理，不要整体载入内存；
清理监听器：app.On 返回的 unsubscribe 函数在不用时调用；
控制事件推送频率与单次载荷，防止高频大载荷撑爆 WebView 内存（v3 已改拉取模型，仍需注意载荷大小）。

6. 框架落地：Electron

注意：Electron 不是 WebView2，它内嵌自己的 Chromium。两者内核同源，渲染进程 / GPU 进程 / 后台节流等经验大部分通用；差异在进程生命周期归属： Electron 的浏览器进程随应用生命周期，WebView2 的进程树由系统运行时按环境管理。

6.1 必须项

// ready 之前调用
app.disableHardwareAcceleration() // 或 app.commandLine.appendSwitch('disable-gpu')

// 单实例：防止多实例各起一套进程组
if (!app.requestSingleInstanceLock()) {
  app.quit()
}

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

6.2 关键 API

webPreferences.backgroundThrottling：默认 true，后台节流动画与定时器（同时影响 Page Visibility API）。不要随意关，否则后台窗口持续满帧，耗电且占内存；仅对确实需要后台保持帧率的窗口关闭。
关窗用 win.destroy()：跳过 beforeunload 拦截，立即释放窗口资源；
session.clearCache()：清理磁盘缓存；
渲染进程复用：现代 Electron 默认启用，避免加载非 context-aware 的原生模块破坏复用。

6.3 官方性能文档要点

精简依赖：评估每个模块的依赖树与加载成本，避免“服务器向”重型模块；
延迟加载：不要在启动时一口气 require/执行所有代码；
不阻塞主进程：异步 I/O、worker threads，避免同步 IPC 与 @electron/remote；
不阻塞渲染进程：requestIdleCallback + Web Workers；
不用 polyfill：目标 Chromium 版本已支持的能力直接用；
资源本地化：字体、图片等不常变资源打包进应用，减少网络等待；
用 DevTools Performance/Memory 反复测量后再优化。

7. 避坑清单

共享环境关窗内存不回落：Chromium 会保留渲染进程复用，关窗不等于释放。一次性窗口用独立环境 + destroy()，让 BrowserProcessExited 触发。
覆盖 browser args 丢失框架默认：wry 默认的 msWebOOUI/msPdfOOUI/msSmartScreenProtection 禁用项必须显式保留，否则被重新启用，内存与后台活动上升。
不同参数共用数据目录：wry 官方明确要求浏览器参数不同的 WebView 使用不同数据目录，否则环境配置冲突。
临时窗口 profile 残留旧会话：销毁窗口后旧会话数据仍留在 profile 中，复用时可能导致状态误判或串号；按业务需要每次清空或使用独立 profile。
平台凭据存储有单条上限：Windows Credential Manager 对 UTF-16 条目限制约 2560 字符，大体积会话凭据可能超限；需评估文件存储等替代方案。
Windows 同步路径创建 WebView2 死锁（Tauri）：窗口创建必须在 async 命令中执行。
简单页面禁 GPU 可接受，复杂页面禁 GPU 卡顿：滚动、动画、视频、WebGL 页面禁用硬件加速会明显掉帧，按页面复杂度决定。
乱关后台节流：disable-background-timer-throttling（WebView2）与 backgroundThrottling: false（Electron）会让后台持续消耗 CPU/电量。
频繁 IPC / 大对象传输：桥接层高频小消息或大对象往返会导致卡顿与内存膨胀；批量、合并、分页、流式处理。
生产依赖实验性 flags：微软官方明确警告可能随时移除/改变行为；如需使用，记录版本并在升级后回归。
清 User Data Folder 不等待 BrowserProcessExited：删除会失败或残留旧配置，导致更换环境配置/升级运行时失败。

8. 验证与调优工具

Windows 任务管理器：按进程树查看 WebView2 运行时进程（msedgewebview2.exe）的 browser / renderer / GPU 各自内存；
浏览器任务管理器 / edge://inspect：逐进程内存与 CPU；
DevTools Memory：JS heap snapshot、DOM 节点数、事件监听器数量；
DevTools Performance：帧率、长任务、布局抖动定位卡顿根因；
ETW + WPR/WPA（微软官方 WebView2.wprp 配置）：进程启动、导航时序、内存增长曲线；
回归基线：固定记录“冷启动 → 打开临时窗口 → 关闭”的内存曲线，任何改动后对比。

9. 决策速查表

问题	结论
常驻窗口要不要独立环境？	不要，共享环境复用进程最省内存
一次性窗口要不要独立环境？	要，配合 destroy 实现确定性回收
仅需隔离站点数据？	同环境内用独立 profile，共享运行时
简单静态 UI 要不要 GPU？	可禁用，显著省内存
有动画/视频/复杂滚动的页面？	必须保留硬件加速，否则掉帧
后台窗口要不要关节流？	默认不关，除非业务明确需要后台满帧
生产能用实验性 flags 吗？	谨慎，记录版本并回归；能不用就不用
多实例怎么防？	单实例锁（Electron）/ 框架自带单实例能力
大体积会话凭据存哪？	评估文件存储等方案，绕开平台凭据上限

10. 参考来源

注意：在使用以上优化指南之前，需要参考下方最新文档，避免时效差异

WebView2 性能最佳实践（微软官方）： https://learn.microsoft.com/microsoft-edge/webview2/concepts/performance
WebView2 进程相关事件（BrowserProcessExited / 清理 UDF 时机）： https://learn.microsoft.com/microsoft-edge/webview2/concepts/process-related-events
WebView2 浏览器 flags（实验性开关清单）： https://learn.microsoft.com/microsoft-edge/webview2/concepts/webview-features-flags
WebView2 MemoryUsageTargetLevel（微软官方 API）： https://learn.microsoft.com/dotnet/api/microsoft.web.webview2.core.corewebview2.memoryusagetargetlevel
WebView2 多 profile 支持： https://learn.microsoft.com/microsoft-edge/webview2/concepts/multi-profile-support
Wails v3 Application API（Windows 浏览器参数）： https://v3.wails.io/reference/application/
Wails v3 架构（进程与内存区域说明）： https://v3.wails.io/concepts/architecture/
Wails v3 Beta 发布说明： https://github.com/wailsapp/wails/releases/tag/v3.0.0-beta.0
Wails 性能优化清单： https://v3.wails.io/guides/performance/
Electron 官方性能文档： https://www.electronjs.org/docs/latest/tutorial/performance
Electron app API（单实例锁 / 禁用硬件加速）： https://www.electronjs.org/docs/latest/api/app
Tauri 2 配置参考（additionalBrowserArgs / backgroundThrottling）： https://v2.tauri.app/reference/config/
wry WebViewBuilderExtWindows（默认浏览器参数与数据目录警告）： https://docs.rs/wry/latest/x86_64-pc-windows-msvc/wry/trait.WebViewBuilderExtWindows.html

Docker使用教程和镜像加速

Tue, 14 Jul 2026 00:00:00 GMT

Docker Hub 镜像加速

国内拉取镜像有时会遇到困难，对于学习或者开发者来说很难受，此时可以配置镜像加速。

安装Docker

官方安装脚本：

curl -fsSL https://get.docker.com | sh

国内一键安装脚本

bash <(curl -sSL https://gitee.com/SuperManito/LinuxMirrors/raw/main/DockerInstallation.sh)

<details> <summary> 手动离线安装Docker </summary>

下载 Docker:

官方文件下载地址——下载后上传到root目录

清华大学下载地址

tar xzvf docker-26.1.3.tgz     # 替换版本号
sudo mv docker/* /usr/local/bin/

创建 Docker 服务文件

sudo vim /etc/systemd/system/docker.service

添加以下内容

[Unit]
Description=Docker Application Container Engine
After=network-online.target firewalld.service
Wants=network-online.target

[Service]
Type=notify
ExecStart=/usr/local/bin/dockerd
ExecReload=/bin/kill -s HUP $MAINPID
Restart=always
RestartSec=2
StartLimitBurst=3
StartLimitInterval=60s
LimitNOFILE=infinity
LimitNPROC=infinity
LimitCORE=infinity
Delegate=yes
KillMode=process

[Install]
WantedBy=multi-user.target

启动并启用 Docker 服务

sudo chmod +x /usr/local/bin/dockerd
sudo systemctl daemon-reload
sudo systemctl start docker
sudo systemctl enable docker

查看版本

docker -v

</details>

<details> <summary> 手动离线安装Docker-compose </summary>

国内环境手动安装Docker-compose

点这里手动下载文件上传到服务器的/usr/local/bin目录

重命名为docker-compose

sudo cp docker-compose-linux-x86_64 /usr/local/bin/docker-compose

增加执行权限

chmod +x /usr/local/bin/docker-compose

验证安装

docker-compose --version

注意：由于是以二进制文件安装的docker-compose，所以运行命令有所变化，运行示例

docker-compose up -d

区别在于中间的-，官方安装脚本是以插件形式安装的docker-compose，所以中间不需要-

</details>

配置加速地址

Ubuntu 16.04+、Debian 8+、CentOS 7+

创建或修改 /etc/docker/daemon.json：

sudo mkdir -p /etc/docker

sudo tee /etc/docker/daemon.json <<EOF
{
    "registry-mirrors": [
        "https://docker.1panel.live"
    ]
}
EOF

sudo systemctl daemon-reload

sudo systemctl restart docker

提示：如果不方便重启Docker服务，也可以不用设置全局加速地址，拉取镜像时增加加速地址即可，示例：

docker pull docker.1panel.live/library/mysql:5.7

说明：library是一个特殊的命名空间，它代表的是官方镜像。如果是某个用户的镜像就把library替换为镜像的用户名。

Docker Desktop 配置

对于Windows系统的Docker Desktop用户，点击右上角设置，找到Docker Engine然后修改配置，修改后的示例：

{
  "builder": {
    "gc": {
      "defaultKeepStorage": "20GB",
      "enabled": true
    }
  },
  "experimental": false,
  "registry-mirrors": [
    "https://docker.1panel.live"
  ]
}

然后点击右下角的Apply & restart保存并重启即可。

检查加速是否生效

查看docker系统信息 docker info，如果从结果中看到了你配置的加速地址，说明配置成功。

Registry Mirrors:
 [...]
 https://docker.1panel.live

使用代理拉取镜像

注意：使用了加速源就别使用这个方法了
此方法支持login和push

创建配置文件

sudo mkdir -p /etc/systemd/system/docker.service.d

sudo vim /etc/systemd/system/docker.service.d/http-proxy.conf

在文件中添加代理

[Service]
Environment="HTTP_PROXY=http://127.0.0.1:1080"
Environment="HTTPS_PROXY=http://127.0.0.1:1080"

重启Docker

sudo systemctl daemon-reload
sudo systemctl restart docker

查看环境变量

sudo systemctl show --property=Environment docker

本地流量转发到服务器

使用SSH反向转发把本地的10808端口的流量转发给远程服务器1080端口

ssh -R 1080:127.0.0.1:10808 root@服务器地址 -N

-N 代表仅连接但不打开对话框

备用方法：打包镜像到本地

1：压缩保存镜像到本地

docker save 镜像名 > 镜像名.tar

2：手动上传到另一个服务器

3：另一个服务器解压镜像

docker load < 镜像名.tar

4：查看镜像

docker images

Docker Hub 镜像测速

拉取镜像时，可使用 time 统计所花费的总时间。测速前记得移除本地的镜像。

例如：time docker pull node:latest

修改最大并发数加快镜像下载速度

/etc/docker/daemon.json

{
  "registry-mirrors": [
    "https://docker.1panel.live"
  ],
  "max-concurrent-downloads": 10,
  "max-concurrent-uploads": 10,
  "max-download-attempts": 5,
  "default-ulimits": {
    "nofile": {
      "Hard": 64000,
      "Name": "nofile",
      "Soft": 64000
    }
  }
}

sudo systemctl daemon-reload
sudo systemctl restart docker

为Docker启用IPV6

创建或修改/etc/docker/daemon.json文件

增加如下配置：

{
  "ipv6": true,
  "fixed-cidr-v6": "fd00:1::/64"
}

然后配置一下流量路由

重启：sudo systemctl restart docker

卸载Docker

sudo systemctl stop docker
sudo apt-get purge docker-ce docker-ce-cli containerd.io
sudo rm -rf /etc/docker /var/lib/docker

Docker最新稳定加速源列表

提供者	镜像加速地址	说明	加速类型
1panel	`https://docker.1panel.live`	仅限CN	Docker Hub
DaoCloud	`https://docker.m.daocloud.io`	白名单和限流	Docker Hub
华为云	`https://***.mirror.swr.myhuaweicloud.com`	需登录分配	Docker Hub
腾讯云	`https://mirror.ccs.tencentyun.com`	仅限腾讯云机器	Docker Hub
南京大学	`https://ghcr.nju.edu.cn`	ghcr加速	ghcr
南京大学	`https://k8s.nju.edu.cn`	k8s加速	k8s

Docker常用命令:

功能	命令	说明
编译镜像	`docker build -t 镜像名 .`	先`docker login`登录docker hub
推送镜像	`docker push 用户名/镜像名`	需先标记镜像 `docker tag 53321f173e 用户名/镜像名`
查看容器	`docker ps`	`-a`查看包括已停止的容器
容器资源占用	`docker stats`	查看所有容器资源占用
容器详细信息	`docker inspect`	挂载看`Mounts`网络看`Networks`
进入容器内部	`docker exec -it 容器名 sh`	结尾使用`/bash`也可以
创建容器网络	`docker network create my-network`	`my-network`为网络名称
容器加入网络	`docker network connect my-network 容器名`	替换容器名或ID
宿主机网络	`network_mode: host`	`docker-compose`使用
宿主机网络	`--network host`	`docker run`使用
查看网络	`docker network inspect my-network`	查看`my-network`网络中的容器
停止容器	`docker stop`	`docker stop 容器名或ID`
启动容器	`docker start`	`docker start 容器名或ID`
重启容器	`docker restart`	`docker restart 容器名或ID`
删除容器	`docker rm`	`docker rm 容器名或ID`
查看镜像	`docker images`	`docker images 镜像名或ID`
删除镜像	`docker rmi -f`	`docker rmi -f 镜像名或ID`
清除资源	`docker system prune`	清除所有未使用资源`容器网络镜像缓存`
删除所有镜像	`docker rmi -f $(docker images -aq)`	删除所有镜像
删除所有容器	`docker container prune -f`	删除所有已停止容器
停止所有容器	`docker stop $(docker ps -aq)`	停止所有容器
停止并删除	`docker compose down`	停止并删除编排容器
重新创建容器	`docker compose up -d --force-recreate`	强制删除并重启编排容器
复制文件	`docker cp wordpress:/app/data.yaml /home`	从容器复制到宿主机
复制文件	`docker cp /home/data.yaml wordpress:/app`	从宿主机复制到容器

使用Rust开发的Winui3应用

Thu, 09 Jul 2026 00:00:00 GMT

前言

微软官方的windows-rs库最近已经支持了winui3，可以直接使用winui3的控件了。地址：windows-reactor

之前想要使用winui3，最低需要 net 6.0 以上来开发，但是net运行时在win系统中没有内置，也就是说想要避免环境差异，不仅需要打包Windows App SDK到二进制文件中，还需要把 net 运行时也一起打包进去，避免用户自己下载运行时。

现在微软官方在Rust中支持了winui3，就可以少打包一个运行时了，因为Rust是没有运行时的编译型语言，编译后的包体积也非常小。

小试牛刀

目前 windows-reactor 库还没发布到 crates.io，所以需要先通过Git引入依赖。

windows-reactor = { git = "https://github.com/microsoft/windows-rs" }

windows-reactor-setup = { git = "https://github.com/microsoft/windows-rs" }

为了试试水，我开发一个用于获取微软 Windows 10/11 官方 ISO 临时下载链接的小工具。

因为微软官方没有提供 ISO 镜像下载直链，所以我开发了一个GUI小工具可以直接提取直链。

下载地址

代码开源，欢迎大佬们下载体验：winiso.msi下载地址

界面预览

功能介绍

获取官方链接： 选择版本、语言、架构，一键向微软 API 请求 ISO 临时下载地址
多种组合： Windows 10 / 11，简体中文 / English，x64 / arm64
复制链接： 获取后可一键复制到剪贴板，用浏览器或其他工具下载
多线程下载： 内置 4 / 8 / 16 连接并行下载，显示进度与速度
断点续传： 中断后可从上次进度继续
自选保存位置： 默认下载文件夹，也可手动指定

安卓SDK封装笔记

Thu, 09 Jul 2026 00:00:00 GMT

安卓SDK封装笔记

Go 项目生成 Android SDK (AAR) 并在 Kotlin 调用

安装 gomobile

go install golang.org/x/mobile/cmd/gomobile@latest
go install golang.org/x/mobile/cmd/gobind@latest
gomobile init

安装安卓 NDK r29以上的版本 https://developer.android.com/ndk/downloads?hl=zh-cn

会自动满足16kb对齐的要求

生成 AAR

gomobile bind -v -target=android -androidapi 24 -trimpath -ldflags="-s -w -buildid=" -o mylib.aar ./

封装安卓SDK大致思路

GO 语言中导出函数的公开接口需要首字母为大写
一般只需暴露 Go 项目的启动、停止、重启、日志、生命周期等函数接口即可
gobind 将 Go 名称直接转换为 Java 方法名，会遵循 Java 命名规范，也就是首字母是小写，调用方需要注意
默认会生成一个多种架构的通用 AAR，里面会包含所有 Go 支持的多种架构，只需在业务端打包时拆分ABI即可

Rust 使用 uniffi 将项目打包为 Android AAR

大致思路

接口声明 → 工具生成绑定 → 标准 NDK 编译 → 打包，避免手写 JNI 胶水代码。

原项目代码零修改
包装项目只写接口转发，不写业务
和 Go gomobile bind 思路完全一致

步骤

Rust 侧暴露接口
- 用 #[uniffi::export] 宏标注要公开的函数/类型
- 或编写一个 UDL 文件描述接口
- 在 Cargo.toml 中设置 crate-type = ["cdylib"] 并添加 uniffi 依赖
生成 Kotlin 绑定
- 用 uniffi-bindgen 命令行工具
- 根据上一步的接口定义自动生成 Kotlin 调用代码
编译原生 .so
- 使用 cargo-ndk 编译出 arm64-v8a 等架构的 .so 动态库
在 Android 项目中集成
- 将生成的 Kotlin 文件和 .so 文件放入 Android 项目目录
- 或通过 Gradle 插件实现自动化

C 和 C++ 相关文档

https://android-docs.cn/studio/projects/add-native-code

我的常用开发环境安装文档

Tue, 07 Jul 2026 00:00:00 GMT

PowerShell

解除脚本限制，执行完后重启PowerShell窗口生效。

# 解除限制（当前用户）
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser -Force

# 完全解除限制
Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force

一行命令添加目录到系统环境变量（PATH）

添加某个目录到系统PATH（以flutter为例），需要管理员权限，执行完需要重新打开PowerShell

$dir = "D:\flutter\bin"; [Environment]::SetEnvironmentVariable("Path", $env:Path + ";$dir", "Machine")

查看当前系统PATH

$env:Path

Rust环境安装

下载 Visual Studio 生成工具

下载地址：https://aka.ms/vs/stable/vs_BuildTools.exe

下载后在使用C++的桌面开发菜单里勾选如下组件即可

适用于x64/x86 的MSVC 生成工具

Windows 11 SDK

用于Windows的C++ CMake 工具

安装Rust开发环境

下载地址：https://rust-lang.org/zh-CN/tools/install/

下载后双击安装，一路回车即可。

常用命令

初始化

# 创建一个二进制项目（可执行程序）
cargo new mydemo

# 创建一个库项目（Library）
cargo new --lib mylibrary

# 当前目录初始化项目
cargo init

编译与运行

cargo run                     # 编译并运行（最常用）
cargo run --release           # Release 模式运行（更快）
cargo build                   # 只编译
cargo build --release         # Release 模式编译
cargo check                   # 快速检查错误（推荐开发时使用，速度快）

依赖管理

cargo add serde               # 添加依赖（最新推荐方式）
cargo add serde --features derive
cargo remove serde            # 移除依赖
cargo update                  # 更新依赖到最新版本

清理与发布

cargo clean                   # 清理 target 目录
cargo clippy                  # 运行 Clippy 代码检查
cargo fmt                     # 代码格式化
cargo publish                 # 发布到 crates.io

项目里配置加速

项目根目录添加.cargo\config.toml配置字节跳动的Rust镜像

[source.crates-io]
replace-with = 'rsproxy-sparse'
[source.rsproxy]
registry = "https://rsproxy.cn/crates.io-index"
[source.rsproxy-sparse]
registry = "sparse+https://rsproxy.cn/index/"
[registries.rsproxy]
index = "https://rsproxy.cn/crates.io-index"
[net]
git-fetch-with-cli = true

git-fetch-with-cli = true代表使用系统的Git工具

安卓开发环境

安装IDE下载地址：https://developer.android.com/studio

AI android-cli：https://developer.android.com/tools/agents/android-cli/download.md.txt

中文汉化包：https://github.com/sollyu/AndroidStudioChineseLanguagePack

汉化

安装汉化包
右上角设置 ⚙️ → Plugins… → Plugins页面的设置 ⚙️ → Install Plugin from Disk… → 选择汉化包 → OK → 重启 IDE
切换语言和地区
右上角设置 ⚙️ → Settings… → Appearance & Behavior → System Settings → Language and Region → 语言选简体中文、地区选China Mainland→ OK → 重启 IDE

Gradle国内镜像配置

在项目根目录下的settings.gradle（或settings.gradle.kts）中添加：

gradlepluginManagement {
    repositories {
        maven { url 'https://mirrors.aliyun.com/gradle-plugin' }
        maven { url 'https://mirrors.cloud.tencent.com/gradle-plugin' }
        google()
        mavenCentral()
    }
}

dependencyResolutionManagement {
    repositories {
        maven { url 'https://mirrors.aliyun.com/maven' }
        maven { url 'https://mirrors.cloud.tencent.com/maven' }
        google()
        mavenCentral()
    }
}

配置代理

项目根目录/gradle.properties 追加：

systemProp.http.proxyHost=127.0.0.1
systemProp.http.proxyPort=10808
systemProp.https.proxyHost=127.0.0.1
systemProp.https.proxyPort=10808
# 不走代理的地址
systemProp.http.nonProxyHosts=*.aliyun.com|*.tencent.com

缓存清理

目的	操作
清 IDE 缓存	File → Invalidate Caches （使缓存失效...）
清 Gradle 依赖缓存	`~/.gradle/caches/`
清 Gradle 分发	`~/.gradle/wrapper/dists/`
清构建产物	`./gradlew clean` 或删除 `app/build` 目录

gradlew命令临时变量设置

$env:JAVA_HOME = "IDE安装目录\jbr"

Gradle Wrapper下载加速

打开项目中gradle/wrapper/gradle-wrapper.properties修改：

# 阿里云
distributionUrl=https\://mirrors.aliyun.com/gradle/distributions/gradle-9.5.0-all.zip

常用命令

./gradlew tasks                    # 查看所有可用任务
./gradlew build                    # 完整构建项目
./gradlew clean                    # 清理项目依赖

./gradlew assembleDebug            # 构建 Debug APK
./gradlew assembleRelease          # 构建 Release APK
./gradlew bundleRelease            # 构建 AAB（Google Play）

./gradlew installDebug             # 构建并安装 Debug 版到设备
./gradlew installRelease           # 安装 Release 版

./gradlew sync                     # 同步 Gradle 项目
./gradlew dependencies             # 查看完整依赖树
./gradlew app:dependencies         # 查看 app 模块依赖

./gradlew test                     # 运行单元测试
./gradlew lint                     # 运行代码检查
./gradlew connectedAndroidTest     # 运行设备上的测试

./gradlew clean assembleDebug      # 清理后构建 Debug
./gradlew build --parallel         # 并行构建（更快）
./gradlew wrapper --gradle-version 8.10   # 更新 Gradle Wrapper

Flutter环境安装

鸿蒙Flutter SDK

安装安卓 IDE

Flutter常用于移动端开发，所以建议先安装安卓IDE，具体如何安装见上文，如果需要打包PC端则需要对应环境，例如C++的桌面开发环境

安装Flutter SDK

Flutter SDK下载页面：https://docs.flutter.cn/install/manual

下载后按照页面步骤将Flutter添加到PATH，也就是环境变量

安装安卓 SDK

运行环境检查

flutter doctor -v

然后在安卓IDE里安装插件：https://docs.flutter.cn/tools/android-studio#setup

初始化项目

flutter create --platforms=android,ios,linux,macos,windows \
  --org com.example \
  --project-name myapp \
  myapp

Flutter 常用命令

命令	说明
flutter doctor -v	检查 Flutter 开发环境
flutter doctor --android-licenses	接受 Android SDK 许可证
flutter config --enable-windows-desktop	启用 Windows 桌面支持
flutter devices	查看已连接设备
flutter emulators	查看模拟器列表
flutter create myapp	创建 Flutter 项目
flutter create .	为当前项目补充缺失平台目录
flutter pub get	下载项目依赖
flutter pub upgrade	升级依赖
flutter pub outdated	检查可升级依赖
flutter clean	清理构建缓存
flutter run	运行项目
flutter run -d chrome	在 Chrome 中运行
flutter run -d windows	在 Windows 桌面运行
flutter run -d android	在 Android 设备运行
flutter run --release	Release 模式运行
flutter build apk	构建 APK
flutter build appbundle	构建 AAB
flutter build windows	构建 Windows 程序
flutter build apk --release	构建 Release APK
flutter build apk --split-per-abi	按 ABI 拆分 APK
flutter test	运行单元测试
flutter analyze	静态代码检查
flutter format .	格式化代码
flutter --version	查看版本

Go 开发环境

下载地址：https://go.dev/doc/install

Go 国内镜像与代理配置（PowerShell 命令）

国内镜像

go env -w GOPROXY="https://goproxy.cn,direct"

恢复官方镜像

go env -w GOPROXY="https://proxy.golang.org,direct"

Go代理

go env -w HTTP_PROXY="http://127.0.0.1:10808"
go env -w HTTPS_PROXY="http://127.0.0.1:10808"

移除代理

go env -w HTTP_PROXY=""
go env -w HTTPS_PROXY=""

查看全局配置

go env

常用命令

go mod init myproject                         # 初始化模块
go mod tidy                                   # 清理和更新依赖（最常用）

go run .                                      # 运行当前项目
go build                                      # 编译当前项目
go build -o app.exe                           # 指定输出文件名

go test -v                                    # 运行测试
go fmt ./...                                  # 格式化代码
go vet                                        # 静态检查
go mod tidy                                   # 整理依赖

go version                                    # 查看版本
go env                                        # 查看环境变量
go clean -cache                               # 清理缓存

质量检查

go install github.com/golangci/golangci-lint/cmd/golangci-lint@latest
golangci-lint run

go install honnef.co/go/tools/cmd/staticcheck@latest
staticcheck ./...

交叉编译

# 交叉编译 Windows 64位
$env:GOOS="windows"; $env:GOARCH="amd64"; $env:CGO_ENABLED="0"; go build -ldflags="-s -w" -o myapp.exe

# 交叉编译 Linux 64位
$env:GOOS="linux"; $env:GOARCH="amd64"; $env:CGO_ENABLED="0"; go build -ldflags="-s -w" -o myapp

# 交叉编译 Android ARM64
$env:GOOS="android"; $env:GOARCH="arm64"; $env:CGO_ENABLED="0"; go build -ldflags="-s -w" -o myapp

GOOS=linux GOARCH=amd64 CGO_ENABLED=0 go build -ldflags="-s -w" -o myapp

前端开发环境

nodejs下载地址：https://nodejs.org/zh-cn

国内镜像

# 设置淘宝镜像
npm config set registry https://registry.npmmirror.com

# 恢复官方镜像
npm config set registry https://registry.npmjs.org

代理

# 设置代理
npm config set proxy http://127.0.0.1:10808
npm config set https-proxy http://127.0.0.1:10808

# 取消代理
npm config delete proxy
npm config delete https-proxy

常用命令

axios是包名

npm i                              # 安装依赖
npm install axios                  # 安装依赖（生产环境）
npm install axios --save-dev       # 安装开发依赖
npm install axios@latest           # 安装最新版本

npm uninstall axios                  # 卸载包
npm cache clean --force              # 清理缓存

npm start                            # 运行 start 脚本
npm run dev                          # 运行 dev 脚本
npm run build                        # 运行 build 脚本

npm list                             # 查看已安装依赖
npm outdated                         # 检查可更新依赖
npm view express version             # 查看某个包的最新版本

npm install -g pnpm                  # 全局安装工具（pnpm包管理器）
npm update -g                        # 更新全局包
npm -v                               # 查看 npm 版本

`C#`开发环境

`.NET`

https://dotnet.microsoft.com/zh-cn/download/dotnet

`.NET Framework 4.8`

https://dotnet.microsoft.com/zh-cn/download/dotnet-framework/net48

# 恢复项目依赖，下载 NuGet 包并生成依赖缓存
dotnet restore

# 安装代码格式化
dotnet tool install -g dotnet-format

# 执行代码格式化
dotnet format

# 编译项目并执行静态代码分析
dotnet build -warnaserror -p:AnalysisLevel=latest

# 运行单元测试，确保代码逻辑正确
dotnet test

# 热重载运行
dotnet watch run

# 生成可部署的生产版本，放在 publish 目录
dotnet publish -c Release

Flutter跨端应用的架构设计

Wed, 17 Jun 2026 00:00:00 GMT

前言

Flutter最吸引我的地方就是多平台能力和跨端能力，并且他也是移动端应用比较主流的框架。

一套代码编译多端应用。

Android、iOS、Windows、macOS、Linux，甚至 Web，都可以使用同一套 Flutter 代码构建应用。如果全部都使用纯Dart语言实现的话，会非常方便和效率。

但随着项目复杂度不断提高，我发现这些场景不太够用，对于系统强关联和性能要求高的应用，纯Dart实现就不太合适，所以就需要配合其他语言来处理。

例如：

文件系统，本地服务，后台任务，蓝牙通信，USB 设备，系统通知，系统权限，等等...

这些能力都带有明显的平台特征，不同平台的生命周期，权限模型，系统能力，等等也都不同。

还有一些特殊需求场景：

大规模并发，高性能网络转发，AI 推理，密码学计算，压缩算法，数据库引擎，等等...

架构理解

其实很多跨端框架都是UI层面和业务层面的，系统层面和核心能力需要抽象出来，然后封装一个统一接口供业务层面调用。

大致思路：

Flutter负责UI和业务逻辑，接口层负责平台差异，跨平台语言负责真正的后端运行。

对于需要调用系统能力的后端，我觉得最好是使用跨平台能力优秀的编译型语言，例如go，rust，C，C++

以下以go语言为后端示例，其他语言思路也差不多。

流程如下：

App 启动
↓
初始化依赖注入 / 配置 / 存储
↓
注册当前平台的 RuntimeService
↓
加载 Flutter UI
↓
用户操作 UI
↓
ViewModel 处理状态与交互
↓
UseCase / Repository 执行业务逻辑
↓
调用统一 RuntimeService 接口
↓
Platform Adapter 适配当前平台
↓
调用原生内核
   Android → AAR / .so
   Windows → exe
   Linux → binary
   macOS → binary / framework
   iOS → XCFramework / NetworkExtension
↓
内核回传状态 / 日志 / 错误 / 流量统计
↓
RuntimeService 统一转换为 Dart Model / Stream
↓
ViewModel 更新状态
↓
UI 自动刷新

最简结构:

lib/
├── main.dart
├── ui/              # 页面、组件、ViewModel
├── domain/          # Model、UseCase、抽象接口
├── data/            # Repository、Service实现
└── platform/        # Android/Windows/Linux/macOS/iOS 适配器

后端封装统一接口

Android / iOS： Go 内核 SDK 化，做成 AAR / XCFramework 

Windows / macOS / Linux： Go 内核 daemon 化，本地 Socket IPC调用

然后Flutter层调用统一接口。

这里更建议桌面端优先使用 Unix Socket / Named Pipe 进行IPC互相通信，而非 127.0.0.1 TCP。

因为无需开放端口、性能更高、安全性更好，冲突也能更少，也更符合本地进程通信场景。

当然需要对接公网后端服务的话除外。

后端封装接口 - 代码结构示例

core/
├─ runtime/        # 纯 Go 核心逻辑：启动、停止、reload、状态、日志
├─ api/            # 统一接口定义
├─ mobile/         # Android/iOS 导出层：AAR / XCFramework
├─ daemon/         # Windows/macOS/Linux 守护进程入口
└─ ipc/            # 桌面 IPC：Named Pipe / Unix Socket

给博客补上面向AI的入口

Mon, 18 May 2026 00:00:00 GMT

给博客补上 llms.txt

最近给博客补了一点面向大语言模型的入口，也就是 llms.txt。

llms.txt 是一个为大型语言模型（LLM）设计的网站文件标准，目的是让 AI 在需要时能快速、准确地理解并利用网站内容。用一份简洁的 Markdown 文件告诉模型：这个网站是什么、哪些页面比较重要、哪些内容适合优先阅读。按照规范，它通常放在站点根路径 /llms.txt，内容尽量清晰、克制，不需要把整个网站都塞进去。

这次我给博客补了两类入口：站点根目录的 /llms.txt，以及每篇文章对应的 Markdown 原文地址，比如 /posts/docker.md。这样正常读者还是看原来的博客页面，而模型、阅读工具或者其他自动化程序，可以直接读取更干净的文本内容。

一开始直接引入astro现成库 @nuasite/llm-enhancements。但是过程中发现和我当前这个 Astro 项目不太合拍：它对 Vite、TypeScript 的版本要求过高，还会因为可选依赖解析导致本地开发服务启动失败。

为了不强行升级整套 Astro 生态，最后还是改成自己写一个很小的 Astro integration。开发环境里通过中间件提供 /llms.txt 和 /posts/*.md；正式构建时，再把这些文件写进最终产物。内容直接来自 src/content/posts，所以不用手动维护，也不用把生成文件提前塞进 public。

文章页也顺手加了两个小入口：复制 MD 链接，以及打开 MD 版本。位置放在文章元信息下面，不太显眼，但需要的时候能很快找到。

中间还遇到一个小坑：博客用了Swup做页面切换，而 .md 是纯文本资源，不是普通 HTML 页面。如果让 Swup 接管这个链接，返回时页面状态可能会乱，样式也会像丢了一样。最后给 MD 链接加了 data-no-swup，让浏览器原生打开这个资源，问题就解决了。

Go语言版本的轻量级龙虾

Sun, 17 May 2026 00:00:00 GMT

前言

原版龙虾 openclow 实在太臃肿了，根本没办法在资源受限的设备上跑，最近我又想部署个AI助手在我的路由器上跑一些定时任务，搜索了多个版本的龙虾，最后决定使用 PicoClaw。

PicoClaw 是一款用 Go 语言编写的超轻量个人AI助手。只需部署一个二进制文件，就能在任何设备上运行，包括树莓派或者路由器这些资源受限的设备。初始内存占用不到10MB，长期运行内存稳定在30MB以内。包体积也不到50MB，秒级启动。并且对标原版龙虾的能力，而且中文生态友好。

Windows部署

windows下载：https://github.com/sipeed/picoclaw/releases/latest/download/picoclaw_Windows_x86_64.zip

解压后双击运行picoclaw-launcher会自动打开浏览器，然后通过管理面板配置。

Docker部署

docker-compose.yml

services:
  picoclaw:
    image: sipeed/picoclaw:launcher
    container_name: picoclaw
    restart: always
    ports:
      - "18800:18800"
      - "18790:18790"
    volumes:
      - ./data:/root/.picoclaw
    environment:
      TZ: Asia/Shanghai
      PICOCLAW_GATEWAY_HOST: 0.0.0.0

Linux 宿主机部署（systemd）

1. 安装

mkdir -p /opt/picoclaw
cd /opt/picoclaw

wget https://github.com/sipeed/picoclaw/releases/latest/download/picoclaw_Linux_x86_64.tar.gz

tar -xzf picoclaw_Linux_x86_64.tar.gz

chmod +x picoclaw-launcher

2. 创建 systemd 服务

nano /etc/systemd/system/picoclaw.service

写入：

[Unit]
Description=PicoClaw Launcher
After=network-online.target
Wants=network-online.target

[Service]
Type=simple
WorkingDirectory=/opt/picoclaw
ExecStart=/opt/picoclaw/picoclaw-launcher -public

Restart=always
RestartSec=3

Environment=TZ=Asia/Shanghai

[Install]
WantedBy=multi-user.target

3. 启动服务

systemctl daemon-reload

systemctl enable --now picoclaw

4. 查看状态

systemctl status picoclaw

5. 查看日志

journalctl -u picoclaw -f

6. 重启服务

systemctl restart picoclaw

7. 停止服务

systemctl stop picoclaw

8. WebUI 地址

http://你的服务器IP:18800

9. 数据目录

默认保存：

/root/.picoclaw

里面包含：

配置
Provider
Workspace
对话
Channel
Cron
Agent 数据

架构	文件名	下载地址	说明
Legacy (PCBIOS)	`netboot.xyz-undionly.kpxe`	https://boot.netboot.xyz/ipxe/netboot.xyz-undionly.kpxe	传统 BIOS DHCP 引导文件，通用网卡驱动
UEFI x86_64	`netboot.xyz-snponly.efi`	https://boot.netboot.xyz/ipxe/netboot.xyz-snponly.efi	UEFI 引导文件
UEFI ARM64	`netboot.xyz-arm64-snponly.efi`	https://boot.netboot.xyz/ipxe/netboot.xyz-arm64-snponly.efi	ARM64 UEFI 引导文件

给你的电脑增加一个自定义右键菜单

Thu, 05 Feb 2026 00:00:00 GMT

Windows右键菜单

有时候写一些简单的html网页，当必须使用HTTP服务加载的时候，都需要手动启动一下命令，感觉步骤很繁琐效率也很低，都是一些重复性动作。需要在当前目录下打开终端，然后执行python -m http.server 8080

所以我就想着直接右键菜单就能在当前目录自动执行这个命令就好了。

目前最简单的方式就是注册表实现右键菜单，所以我就直接写了个注册表注入脚本，并且在启动HTTP服务的时候自动打开浏览器，代码如下：

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\Directory\Background\shell\HttpServer]
@="启动HTTP服务 (9090)"
"Icon"="imageres.dll,-5302"
"Position"="Top"

[HKEY_CLASSES_ROOT\Directory\Background\shell\HttpServer\command]
@="cmd.exe /s /k pushd \"%V\" && (start /b cmd /c \"timeout /t 1 /nobreak >nul && start http://127.0.0.1:9090\") && python -m http.server 9090"

将代码保存为.reg后缀的注册表导入脚本，例如install.reg，然后双击执行。需要注意的是要以UTF-16 LE编码保存此文件，不然中文会乱码。

右键菜单效果图：

代码解析

核心机制：向 HKEY_CLASSES_ROOT\Directory\Background\shell 写入键值。
作用域：Directory\Background 代表在文件夹空白处点击右键。如果是点在文件夹图标上，则需要写到 Directory\shell。
命令解析：
- pushd "%V": 将 CMD 工作目录切换到当前文件夹（%V 是变量）。
- start http://127.0.0.1:9090：调用默认浏览器打开此地址。
- python -m http.server 9090: Python自带的启动静态服务器快捷命令，我电脑基本必装Python。
优化体验：使用异步执行优化了一下使用体验。

进阶

此时你会发现这个右键菜单在windows 11系统里需要点击显示更多选项才能看到。

这是因为 Windows 11 重构了右键菜单，传统的注册表方式IContextMenu默认被放入二级菜单。

想要直接显示在一级菜单里，只有实现了IExplorerCommand接口并具有Package Identity (包身份)的应用，才有资格进入一级菜单。

那么想要进入一级菜单，需要做什么？

如果想要在一级菜单直接显示，单纯改注册表已经做不到了，必须升级技术栈，大致三个步骤：

语言首选 C++：写一个 DLL，实现 COM 接口IExplorerCommand。比改注册表要复杂得多，需要处理引用计数、接口查询等底层逻辑。
打包 (Sparse Package)：必须给程序一个身份证 (AppxManifest.xml)。
签名 (Identity)：必须要有数字签名才行。自己用的话，可以生成一个自签名证书并信任它。

当然我这种简单的小众需求还是使用注册表方式最合适，要是写一个DLL就有点小题大做了。

OpenWrt固件编译

Wed, 19 Nov 2025 00:00:00 GMT

介绍

OpenWrt 是一个基于 Linux 的路由器操作系统，专门为嵌入式设备（路由器、NAS、小型网关设备等）设计。

本篇教程基于immortalwrt，immortalwrt 是基于 openwrt 开发的优化版本，是专门针对中国大陆环境优化的版本。国内用户基本都使用这个版本。

项目地址：https://github.com/immortalwrt/immortalwrt

immortalwrt 在线构建

官方提供的网页在线构建叫ImageBuilder，不是编译源码，而是借助官方的服务器资源，使用预编译好的SDK，快速选择包然后生成固件。优点是构建很快，缺点是自定义程度不是很高，但是常用的配置都可以自定义，例如提前安装插件，配置网口信息和防火墙什么的。

官方在线编译地址：https://firmware-selector.immortalwrt.org

必备软件

openssh-sftp-server curl luci-theme-argon luci-i18n-homeproxy-zh-cn luci-i18n-ttyd-zh-cn luci-i18n-diskman-zh-cn luci-i18n-filemanager-zh-cn luci-i18n-package-manager-zh-cn luci-i18n-firewall-zh-cn

当你安装一个插件包时，他会自动下载所需的软件和依赖，所以只需添加对应插件的汉化包即可。

ImmortalWrt软件包查询（注意替换实际的版本和设备架构）：

带luci：https://downloads.immortalwrt.org/releases/25.12.0/packages/x86_64/luci/index.json

不带luci：https://downloads.immortalwrt.org/releases/25.12.0/packages/x86_64/packages/index.json

初始化构建脚本

要修改的地方请去掉注释

#!/bin/sh
exec >/tmp/setup.log 2>&1

###########################################################
#                  自 定 义 配 置 区 域
###########################################################

### 系统后台密码（为空则不修改）
root_password="admin"

### LAN 的 IPv4 地址（也是后台地址，例如 192.168.2.1）
lan_ip_address="192.168.2.1"

### LAN 的子网掩码（例如 255.255.255.0）
# lan_netmask="255.255.255.0"

### LAN 的 IPv4 网关（可为空）
# lan_gateway="192.168.1.1"

### LAN 的 DNS（多个 DNS 可空格分隔，如 "8.8.8.8 1.1.1.1"）
# lan_dns="8.8.8.8 223.5.5.5"

### DHCP 是否开启（1=开启，0=关闭）
# lan_dhcp_enable="1"

### DHCP 起始地址
# lan_dhcp_start="100"

### DHCP 地址池数量
# lan_dhcp_limit="150"

### DHCP 租约时间
# lan_dhcp_leasetime="12h"

### WiFi 名称 SSID（为空则不修改）
# wlan_name="ImmortalWrt"

### WiFi 密码（≥ 8 位才生效）
# wlan_password="12345678"

### PPPoE 宽带账号（为空则跳过）
# pppoe_username=""

### PPPoE 宽带密码
# pppoe_password=""

###########################################################

# ------------ root 密码 ------------
if [ -n "$root_password" ]; then
  (echo "$root_password"; sleep 1; echo "$root_password") | passwd >/dev/null
fi

# ------------ LAN 基础配置 ------------
if [ -n "$lan_ip_address" ]; then
  uci set network.lan.ipaddr="$lan_ip_address"
fi

if [ -n "$lan_netmask" ]; then
  uci set network.lan.netmask="$lan_netmask"
fi

if [ -n "$lan_gateway" ]; then
  uci set network.lan.gateway="$lan_gateway"
fi

# DNS
if [ -n "$lan_dns" ]; then
  uci delete network.lan.dns 2>/dev/null
  for d in $lan_dns; do
    uci add_list network.lan.dns="$d"
  done
fi

uci commit network

# ------------ DHCP 设置 ------------
if [ -n "$lan_dhcp_enable" ]; then
  uci set dhcp.lan.ignore=$([ "$lan_dhcp_enable" = "1" ] && echo 0 || echo 1)
fi

[ -n "$lan_dhcp_start" ] && uci set dhcp.lan.start="$lan_dhcp_start"
[ -n "$lan_dhcp_limit" ] && uci set dhcp.lan.limit="$lan_dhcp_limit"
[ -n "$lan_dhcp_leasetime" ] && uci set dhcp.lan.leasetime="$lan_dhcp_leasetime"

uci commit dhcp

# ------------ WIFI 配置 ------------
if [ -n "$wlan_name" ] && [ -n "$wlan_password" ] && [ ${#wlan_password} -ge 8 ]; then
  uci set wireless.@wifi-device[0].disabled='0'
  uci set wireless.@wifi-iface[0].disabled='0'
  uci set wireless.@wifi-iface[0].encryption='psk2'
  uci set wireless.@wifi-iface[0].ssid="$wlan_name"
  uci set wireless.@wifi-iface[0].key="$wlan_password"
  uci commit wireless
fi

# ------------ PPPoE 宽带拨号 ------------
if [ -n "$pppoe_username" ] && [ -n "$pppoe_password" ]; then
  uci set network.wan.proto=pppoe
  uci set network.wan.username="$pppoe_username"
  uci set network.wan.password="$pppoe_password"
  uci commit network
fi

echo "All done!"

构建完成后下载对应的固件包刷入系统即可。

immortalwrt 基于源码编译

使用干净的Debian 12或者ubuntu 22.04系统，国外网络通畅，有50G以上的空闲存储空间。

1：安装依赖

sudo apt update -y
sudo apt full-upgrade -y
sudo apt install -y \
  ack antlr3 asciidoc autoconf automake autopoint binutils bison build-essential \
  bzip2 ccache clang cmake cpio curl device-tree-compiler ecj fastjar flex gawk gettext \
  gcc-multilib g++-multilib git gperf haveged help2man intltool libc6-dev-i386 libelf-dev \
  libglib2.0-dev libgmp-dev libltdl-dev libmpc-dev libmpfr-dev libncurses-dev libpython3-dev \
  libreadline-dev libssl-dev libtool libyaml-dev lld llvm lrzsz genisoimage \
  ninja-build p7zip-full patch pkgconf python3 python3-pip python3-ply python3-docutils \
  python3-pyelftools qemu-utils re2c rsync scons squashfs-tools subversion swig texinfo \
  uglifyjs unzip wget nano xmlto xxd zlib1g-dev upx zstd

2：下载对应tags的源码（以`v24.10.4`为例）

后续步骤建议切换为普通用户，不要用root用户编译。

git clone -b v24.10.4 --single-branch --filter=blob:none https://github.com/immortalwrt/immortalwrt

3：进入项目目录

cd immortalwrt

4：获取最新软件包清单

./scripts/feeds update -a

5：安装软件包符号链接

./scripts/feeds install -a

6：配置固件信息

make menuconfig

这一步很重要，前三个选项分别是目标系统 - 子架构 - 目标机型。根据你的实际设备来选。

然后第四个选项Target Images是修改固件配置的，其中Root filesystem partition size是根文件系统分区大小建议修改，根据你设备的存储空间来选择，这里的值就是最大存储空间。

其他配置都是可选的，其中luci选项中可以预安装一些插件包。

7：修改LAN口IP地址等等信息

可以在这里查看默认值：https://github.com/immortalwrt/immortalwrt/blob/master/package/base-files/files/bin/config_generate

nano package/base-files/files/bin/config_generate

8：编译固件

单线程编译

make -j1 V=s

或者多线程编译

make -j$(nproc --ignore=1)

编译出来的固件在bin目录下

9：重新编译说明

如果需要重新编译则执行make distclean清理一些残留和工具链等等，然后再从第四步重新开始。

VirtualBox虚拟机运行immortalwrt

1：选择x86/64型号，编译后，下载COMBINED (EXT4)格式的镜像，并解压到下载目录

2：在文件目录下打开 PowerShell

将镜像转换成VDI格式

& "C:\Program Files\Oracle\VirtualBox\VBoxManage.exe" convertfromraw `
    "immortalwrt-24.10.4-f726c678216d-x86-64-generic-ext4-combined.img" `
    "immortalwrt.vdi" `
    --format VDI

3: 系统内修改网络配置的命令：

vi /etc/config/network

/etc/init.d/network restart

4：浏览器进入LAN口IP地址，密码是脚本中设置的密码。

X86主机设备将镜像写入到硬盘

先将镜像烧录到U盘，然后使用U盘启动进入到openwrt系统，然后使用DD命令写入镜像，就可以拔掉U盘运行openwrt系统了。

查看U盘和目标硬盘

lsblk -f

例如 U 盘是 /dev/sdb 硬盘是 /dev/sda

如果目标硬盘有被挂载则需要卸载，例如之前装了系统之类的

umount /dev/sda1
umount /dev/sda2
umount /dev/sda3

检查是否卸载成功

mount | grep sda

如果返回为空就代表卸载成功了

写入镜像（注意替换实际的U盘和硬盘）

dd if=/dev/sdb of=/dev/sda bs=4M conv=fsync

如果没报错，并且看到了两行数字就代表成功了

强制刷新缓存

sync

命令解释：

if=/dev/sdb ：输入源，U 盘设备

of=/dev/sda ：输出目标，硬盘/闪存设备

bs=4M ：每次写入 4M，提高速度

conv=fsync ：写完后刷新缓存，确保数据落盘

sync ：再次确保所有数据写入完成

香橙派开发板折腾日记

Sat, 06 Sep 2025 00:00:00 GMT

Orange Pi Zero3 香橙派开发板折腾日记

主包最近从拼夕夕入手了Orange Pi Zero3开发板，4G内存，价格是199人民币。

到货后就迫不及待的折腾了起来。

首先需要准备这些东西来安装系统

TF内存卡一个（16G以上）
TF读卡器一个
路由器用的网线一根
5V/2AUSB充电头
Type C口数据线
写盘软件balenaEtcher

注意不要和SD卡搞混了，SD卡是大的，TF卡是小的

写入系统

首先去香橙派官网，找到服务与下载，找到对应的型号，我这里是Orange Pi Zero3，然后点击进去找到官方镜像。

点击进入官方提供的百度网盘地址，下载你想要的镜像，我这里下载的是Debian 12系统，全称是Orangepizero3_1.0.4_debian_bookworm_server_linux6.1.31.7z其中bookworm代表是12的版本，serve代表是服务器版本，不带桌面的那种。

下载后用读卡器把TF卡插到电脑上，使用balenaEtcher将img格式的系统镜像烧录进去，完事后将TF卡插到香橙派开发板上。

然后使用5V/2A的USB充电头和Type C数据线给香橙派接入电源。接入电源后不要拔掉，他会自动引导并安装系统，等一会后就可以用网线将香橙派连上路由器。连上路由器是为了方便远程连接。因为没有接外设的线。

使用SSH远程连接系统

现在就可以进入路由器后台找到香橙派的局域网IP地址，使用此IP地址进行SSH连接。

Debian和Ubuntu系统的默认SSH用户名是orangepi 密码是orangepi

设置系统

通过SSH进入系统后，首先sudo -i切换为root权限，然后使用passwd命令设置一个root密码，请务必设置一个复杂的密码。

设置完密码后使用apt update更新一下源，然后安装一下常用的包apt install -y curl wget git zip tar lsof vim sudo

禁用默认用户登录

我宽带是有公网的，为了安全起见，防止SSH被爆破，建议禁用默认用户远程登录，以Debian或者Ubuntu系统为例

# 编辑SSH配置文件
nano /etc/ssh/sshd_config

# 文件末尾添加以下内容
DenyUsers orangepi

# 重启SSH服务
sudo systemctl restart ssh

连接WIFI

这个板子是支持wifi的，进入系统后，可以连上wifi，就不用插网线了。

使用nmcli dev wifi命令搜索附件的WIFI

然后使用如下命令连接WIFI

nmcli device wifi connect "Wi-Fi名称" password "Wi-Fi密码"

然后使用nmcli device status查看连接状态，如果输出的结果中有你连接的Wi-Fi名称，就代表连接成功。

然后就可以使用ip a来查看IP地址了，一般end0是有线网卡，wlan0是无线网卡，其他局域网地址可以通过这些IP来互联，或者SSH连接。当然也可以在路由器里查看分配的IP。

然后后就可以跑各种服务了

支付宝收款码前端动态渲染

Wed, 14 May 2025 00:00:00 GMT

支付宝收款码使用浏览器动态渲染

无需自己上传收款码图片，用户输入金额后前端自动生成对应金额的转账二维码，个人账户原生支持，只需到官网获取账户ID即可调用。

技术解析

原理是前端调用alipays://支付宝私有协议，是支付宝Alipay客户端使用的私有 URL 协议，也叫URL Scheme，用于通过网页、App 或其他外部应用调用支付宝客户端，执行特定动作，比如打开某个页面、发起支付、跳转小程序等。

示例：

alipays://platformapi/startapp?appId=20000123&actionType=scan&biz_data={"s":"money","u":"2088xxxxxx","a":"10","m":"打赏支持"}

然后使用qrcode将私有协议链接转换为二维码就行了。

参数解析：

appId=20000123：支付宝内置的"转账到个人账户"功能编号

actionType=scan：指定操作为扫码支付

biz_data：核心业务参数（JSON格式，需URL编码）：

s: "money"：固定值，表示转账业务

u: "2088xxxxxx"：收款方支付宝UID（用户唯一标识）

a: "10"：初始转账金额（单位：元）

m: "打赏支持"：转账备注（显示在支付宝账单）

前端性能优化技术汇总

Tue, 06 May 2025 00:00:00 GMT

前端性能优化技术合集与汇总（含示例）

1. 资源加载优化

异步加载（Asynchronous Loading）

描述：不阻塞页面渲染，后台加载资源，加载完成后执行。

应用场景：使用 async、defer 属性异步加载 JS 脚本。

示例：

<!-- async: 下载完成后立即执行，可能中断HTML解析，执行顺序不定 -->
<script async src="analytics.js"></script>

<!-- defer: HTML解析完成后，DOMContentLoaded事件前按顺序执行 -->
<script defer src="main-bundle.js"></script>

懒加载（Lazy Loading）

描述：仅在需要时加载资源（如图片、视频、组件等）。

应用场景：图片、视频、组件、评论等在进入视口时再加载。

示例：

<!-- 使用 loading="lazy" 属性（浏览器原生支持） -->
<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy" alt="Lazy loaded image">
<iframe src="placeholder.html" data-src="real-content.html" loading="lazy"></iframe>

<!-- 使用 Intersection Observer API 实现自定义懒加载 -->
<script>
  const images = document.querySelectorAll('img[data-src]');
  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.removeAttribute('data-src');
        observer.unobserve(img);
      }
    });
  });
  images.forEach(img => observer.observe(img));
</script>

预加载（Preload）

描述：页面加载时提前加载未来可能需要的资源。

应用场景：使用 <link rel="preload" href="..." as="..."> 提前加载重要资源（如字体、脚本）。

示例：

<!-- 预加载关键CSS文件 -->
<link rel="preload" href="critical.css" as="style">

<!-- 预加载将在稍后使用的JS文件 -->
<link rel="preload" href="late-loaded-script.js" as="script">

<!-- 预加载字体文件 -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

空闲时间调度（Idle Time Scheduling）

描述：使用 requestIdleCallback 在浏览器空闲时执行低优先级任务，提升页面响应。

应用场景：适用于非关键任务的加载和执行，如发送分析数据、预渲染不可见内容。

示例：

requestIdleCallback((deadline) => {
  // 如果有剩余时间，或者任务必须执行
  if (deadline.timeRemaining() > 0 || deadline.didTimeout) {
    // 执行低优先级任务，例如发送统计数据
    sendAnalyticsData();
  }
});

2. 资源压缩与合并

图片压缩（Image Optimization）

描述：压缩图片文件，减少图片体积，使用高效格式（如 WebP、AVIF）。

应用场景：网站中所有使用的图片资源。

示例：

工具: 使用在线工具如 TinyPNG、Squoosh.app 或构建工具插件（如 imagemin-webpack-plugin）进行自动化压缩。

格式选择: 使用 <picture> 标签提供多种格式供浏览器选择。

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Optimized image">
</picture>

JS / CSS 压缩（Minification）

描述：去除代码中的空格、注释等，减少文件体积，提升加载速度。

应用场景：生产环境中的所有 JavaScript 和 CSS 文件。

示例：

构建工具: 使用 Webpack、Rollup、Parcel 等构建工具，并配置相应的插件（如 TerserWebpackPlugin 用于 JS，CssMinimizerWebpackPlugin 用于 CSS）在生产构建时自动压缩代码。

// webpack.config.js (示例)
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin(),
      new CssMinimizerPlugin(),
    ],
  },
  // ...
};

CSS 和 JS 合并（Concatenation）

描述：合并多个文件，减少 HTTP 请求次数（在 HTTP/1.1 环境下尤其重要，HTTP/2 中重要性降低但仍有益）。

应用场景：将多个小的 CSS 或 JS 文件合并成一个或少数几个较大的文件。

示例：

构建工具: Webpack、Rollup 等现代构建工具通常在打包过程中自动处理模块合并。确保配置合理，避免生成过大的单一文件，可以结合代码分割使用。

// main.js (示例入口文件)
import './moduleA.js';
import './moduleB.js';
import './styles.css';
import './more-styles.css';

// 构建工具会将这些导入合并到输出的 bundle 文件中

3. 代码优化

代码分割（Code Splitting）

描述：按需加载 JS 代码，减小首屏加载体积，常见于单页应用。

应用场景：使用动态 import() 和路由懒加载，按需加载模块。

示例：

// 使用动态 import() 按需加载模块
document.getElementById('loadButton').addEventListener('click', () => {
  import('./heavy-module.js')
    .then(module => {
      module.doSomething();
    })
    .catch(err => {
      console.error('Failed to load module:', err);
    });
});

// 路由懒加载 (以 React Router 为例)
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const HomePage = lazy(() => import('./routes/HomePage'));
const AboutPage = lazy(() => import('./routes/AboutPage'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/about" component={AboutPage} />
      </Switch>
    </Suspense>
  </Router>
);

Tree Shaking

描述：删除未使用的代码（dead code elimination），减小打包体积，优化代码执行效率。

应用场景：适用于 Webpack、Rollup 等支持 Tree Shaking 的工具，需要使用 ES6 模块语法（import/export）。

示例：

构建工具配置: 在 Webpack 中，将 mode 设置为 production 会自动启用 Tree Shaking。确保你的代码使用 ES6 模块，并且没有副作用（side effects）阻止 Tree Shaking。
```
// webpack.config.js
module.exports = {
  mode: 'production', // 启用包括 Tree Shaking 在内的多项优化
  // ...
};
```

标记副作用: 如果某个模块有副作用（例如，全局样式注入、polyfill），可以在 package.json 中标记。

// package.json
{
  "name": "my-library",
  "version": "1.0.0",
  "sideEffects": false // 默认无副作用，利于 Tree Shaking
  // 或者指定有副作用的文件
  // "sideEffects": ["./src/polyfill.js", "*.css"]
}

Font Subsetting

描述：只加载网页中使用的字符集，减少字体文件的体积。

应用场景：适用于自定义字体加载和优化，特别是中文字体等字符集庞大的字体。

示例：

工具: 使用 font-spider (国人开发，适合中文字体)、glyphhanger 或在线字体子集化工具，根据项目实际使用的文字生成精简后的字体文件。

# 使用 font-spider (示例)
# 1. 在 CSS 中正常引用字体
# @font-face {
#   font-family: 'MyFont';
#   src: url('../fonts/MyFont.ttf');
# }
# body {
#   font-family: 'MyFont';
# }
# 2. 运行命令扫描 HTML 文件并生成子集字体
font-spider ./index.html

4. 浏览器渲染优化

减少重排与重绘（Reflow & Repaint）

描述：避免频繁修改布局（如 width、height、top、left），减少重排（Reflow/Layout）。优化 DOM 操作，避免页面卡顿和性能瓶颈。

应用场景：涉及 DOM 元素尺寸、位置、内容变化的 JavaScript 操作。

示例：

// 不好的做法：每次循环都读取 offsetHeight，可能触发重排
for (let i = 0; i < elements.length; i++) {
  elements[i].style.width = elements[i].offsetHeight + 'px'; // 读取触发重排
}

// 改进：先读后写，分离读写操作
const heights = [];
for (let i = 0; i < elements.length; i++) {
  heights[i] = elements[i].offsetHeight; // 批量读取
}
for (let i = 0; i < elements.length; i++) {
  elements[i].style.width = heights[i] + 'px'; // 批量写入
}

// 使用 CSS transform 代替 top/left 实现位移动画，避免重排
// 不推荐
// element.style.left = x + 'px';
// element.style.top = y + 'px';

// 推荐
element.style.transform = `translate(${x}px, ${y}px)`;

合并 DOM 操作

描述：将多次 DOM 操作合并成一次，减少重排和重绘的频率。

应用场景：需要向 DOM 中插入多个元素时。

示例：

const list = document.getElementById('myList');
const items = ['Apple', 'Banana', 'Cherry'];

// 不好的做法：每次循环都操作 DOM
// items.forEach(itemText => {
//   const li = document.createElement('li');
//   li.textContent = itemText;
//   list.appendChild(li); // 每次 appendChild 都可能触发重排/重绘
// });

// 推荐：使用 DocumentFragment
const fragment = document.createDocumentFragment();
items.forEach(itemText => {
  const li = document.createElement('li');
  li.textContent = itemText;
  fragment.appendChild(li); // 操作 Fragment 不会触发重排/重绘
});
list.appendChild(fragment); // 最后一次性插入 DOM

硬件加速（Transform & Opacity）

描述：使用 transform 和 opacity 代替布局属性（如 top、left）进行动画，利用 GPU 加速，提高动画流畅度。

应用场景：实现位移、缩放、旋转、透明度等动画效果。

示例：

.animated-element {
  /* 不推荐：使用 top/left 可能导致重排，动画可能卡顿 */
  /* position: absolute; */
  /* left: 0; */
  /* transition: left 0.3s ease; */

  /* 推荐：使用 transform 利用 GPU 加速 */
  transform: translateX(0);
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 1;
}

.animated-element.move {
  /* transform: translateX(100px); */
  transform: translate3d(100px, 0, 0); /* 强制开启 GPU 加速 */
}

.animated-element.fade-out {
  opacity: 0;
}

will-change 提前通知浏览器

描述：使用 will-change 提前告知浏览器即将发生的样式变化，让浏览器可以提前进行优化准备，避免渲染瓶颈。

应用场景：用于即将发生复杂变化的元素，特别是动画元素。

示例：

.element-about-to-animate {
  /* 告知浏览器 transform 和 opacity 属性即将发生变化 */
  will-change: transform, opacity;
}

.element-about-to-animate:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

/* 注意：不要滥用 will-change，仅在确实需要时添加，并在变化结束后移除 */
/* 可以通过 JavaScript 在动画开始前添加，结束后移除 */

5. 网络优化

HTTP/2 / HTTP/3 协议

描述：启用 HTTP/2 或 HTTP/3，利用其多路复用、头部压缩、服务器推送（HTTP/2）、基于 UDP 的 QUIC（HTTP/3）等特性，提高并行传输效率，减少请求延迟。

应用场景：Web 服务器配置。

示例：

服务器配置: 在 Nginx, Apache 或其他 Web 服务器上启用 HTTP/2 或 HTTP/3 支持（通常需要 HTTPS）。

# Nginx 配置启用 HTTP/2 (示例)
server {
    listen 443 ssl http2;
    # ... 其他 SSL 配置 ...
}
# Nginx 配置启用 HTTP/3 (需要较新版本和额外模块)
server {
    listen 443 quic reuseport;
    listen 443 ssl http2;
    # ... 其他 SSL 和 HTTP/3 配置 ...
    add_header Alt-Svc 'h3=":443"; ma=86400'; # 告知浏览器支持 HTTP/3
}

验证: 使用浏览器开发者工具的网络(Network)面板查看协议版本。

Content Delivery Network (CDN)

描述：使用 CDN 将静态资源（如图片、CSS、JS）缓存到全球各地的边缘节点，用户从最近的节点获取资源，减少网络延迟，提高加载速度。

应用场景：网站的静态资源分发。

示例：

服务商: 选择 CDN 服务商（如 Cloudflare, Akamai, AWS CloudFront, 阿里云 CDN, 腾讯云 CDN 等）。

配置: 将静态资源的 URL 指向 CDN 提供的域名。

<!-- 原始路径 -->
<!-- <script src="/assets/app.js"></script> -->
<!-- <img src="/images/logo.png"> -->

<!-- 使用 CDN 路径 -->
<script src="https://cdn.example.com/assets/app.js"></script>
<img src="https://cdn.example.com/images/logo.png">

缓存优化（Caching）

描述：使用 HTTP 缓存头（如 Cache-Control、ETag、Last-Modified）优化资源缓存，让浏览器可以复用已下载的资源，减少重复请求。

应用场景：所有可以通过 HTTP 请求的资源。

示例：

服务器配置: 配置 Web 服务器发送合适的缓存头。

# Nginx 配置示例
location ~* \.(?:css|js)$ {
    # 强缓存：缓存 1 年
    add_header Cache-Control "public, max-age=31536000, immutable";
    access_log off;
}

location ~* \.(?:jpg|jpeg|png|gif|ico|webp|avif)$ {
    # 强缓存：缓存 1 个月
    add_header Cache-Control "public, max-age=2592000";
    access_log off;
}

location = /index.html {
    # 协商缓存：每次验证
    add_header Cache-Control "no-cache";
}

ETag: 服务器为资源生成唯一标识，浏览器下次请求时通过 If-None-Match 发送此标识，服务器比对后若无变化则返回 304 Not Modified。
Last-Modified: 服务器告知资源最后修改时间，浏览器下次通过 If-Modified-Since 发送此时间，服务器比对后若无更新则返回 304。

DNS 预解析 / 预连接（DNS Prefetch / Preconnect）

描述：提前解析域名或建立到目标源（域名+端口）的 TCP 连接（甚至 TLS 握手），减少后续资源请求时的延迟。

应用场景：页面中引用了来自其他域名的资源（如 CDN、API、第三方脚本）。

示例：

<!-- DNS 预解析：提前解析域名 -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//api.example.com">

<!-- 预连接：提前完成 DNS 解析 + TCP 握手 + TLS 协商 -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://api.example.com">

6. 服务端优化

Server-Side Rendering (SSR) / Static Site Generation (SSG)

描述：使用 SSR（服务器端渲染）或 SSG（静态站点生成）在服务器端生成完整的 HTML 页面或预渲染的静态 HTML 文件，直接发送给浏览器，加快首屏显示速度，并有利于 SEO。

应用场景：内容型网站、需要良好 SEO 的应用、追求极致首屏性能的场景。

示例：

框架: 使用支持 SSR/SSG 的前端框架，如 Next.js (React), Nuxt.js (Vue), SvelteKit (Svelte), Gatsby (React, SSG), Astro 等。

// Next.js 页面示例 (SSR)
export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/data`);
  const data = await res.json();
  return { props: { data } }; // 数据将作为 props 传递给页面组件
}
function Page({ data }) {
  // 渲染页面...
}
export default Page;

// Next.js 页面示例 (SSG)
export async function getStaticProps() {
  const res = await fetch(`https://api.example.com/data`);
  const data = await res.json();
  return { props: { data } };
}
// ... Page 组件同上 ...

API 优化

描述：缩短 API 接口的响应时间，使用合适的数据格式（如 JSON），采用有效的缓存策略（如 Redis 缓存查询结果），减少 API 请求处理的延迟。

应用场景：所有前后端数据交互的接口。

示例：

后端: 优化数据库查询（添加索引、慢查询分析）、使用缓存层（Redis, Memcached）、优化业务逻辑、使用异步处理非核心任务。
数据格式: 确保 API 返回精简的 JSON 数据，避免冗余字段。
网络: 减少 API 服务器与客户端之间的网络延迟（如使用 CDN 加速 API）。

GraphQL 优化

描述：采用 GraphQL 代替传统 RESTful API，允许客户端精确指定需要获取的数据结构，避免了 REST 中常见的 over-fetching（获取过多数据）和 under-fetching（需要多次请求才能获取足够数据）的问题。

应用场景：复杂数据关联、移动端应用、需要灵活数据查询的场景。

示例：

# GraphQL 查询示例：只请求需要的字段
query GetUserProfile {
  user(id: "123") {
    id
    name
    email
    posts(last: 5) { # 只获取最近 5 篇文章
      title
      createdAt
    }
  }
}

# 相比之下，REST 可能需要多个请求或返回大量不需要的数据
# GET /users/123
# GET /users/123/posts?limit=5

7. 前端缓存与持久化

LocalStorage / SessionStorage

描述：使用 Web Storage API (LocalStorage, SessionStorage) 在浏览器端存储少量键值对数据。LocalStorage 数据持久存在，除非手动清除；SessionStorage 数据在会话结束后（通常是浏览器标签页关闭时）清除。

应用场景：存储用户偏好设置、少量非敏感数据、临时状态等，减少不必要的服务器请求。

示例：

// LocalStorage: 持久存储
localStorage.setItem('theme', 'dark');
const currentTheme = localStorage.getItem('theme');
localStorage.removeItem('theme');
localStorage.clear(); // 清除所有

// SessionStorage: 会话级存储
sessionStorage.setItem('sessionId', 'abc123xyz');
const sessionId = sessionStorage.getItem('sessionId');

注意: Web Storage 容量有限（通常 5-10MB），且是同步操作，可能阻塞主线程，不适合存储大量数据。

IndexedDB

描述：一个在浏览器中存储大量结构化数据（包括文件/Blob）的底层 API。它创建了一个事务型数据库，支持索引，可以进行高性能搜索。

应用场景：离线数据存储、大型数据集缓存、PWA（Progressive Web Apps）的数据存储。

示例：

// 打开（或创建）数据库
const request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = event => {
  const db = event.target.result;
  // 创建一个对象存储空间（类似表）
  const objectStore = db.createObjectStore('customers', { keyPath: 'id' });
  // 创建索引
  objectStore.createIndex('name', 'name', { unique: false });
};

request.onsuccess = event => {
  const db = event.target.result;
  // 使用事务进行数据操作
  const transaction = db.transaction(['customers'], 'readwrite');
  const objectStore = transaction.objectStore('customers');

  // 添加数据
  const addRequest = objectStore.add({ id: '1', name: 'Alice', email: 'alice@example.com' });
  addRequest.onsuccess = () => console.log('Data added');

  // 获取数据
  const getRequest = objectStore.get('1');
  getRequest.onsuccess = () => console.log('Retrieved data:', getRequest.result);
};

request.onerror = event => {
  console.error('Database error:', event.target.errorCode);
};

注意: IndexedDB API 较为复杂，通常建议使用封装库（如 Dexie.js, idb）。

缓存 API (Cache API)

描述：通常与 Service Worker 结合使用，提供一个用于存储和检索网络请求及其相应响应的系统。它允许你缓存资源，以便在离线时或为了提高性能而使用。

应用场景：PWA 的离线缓存、静态资源缓存、API 响应缓存。

示例：

// 在 Service Worker 中使用 Cache API
const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('Opened cache');
        return cache.addAll(urlsToCache); // 将资源添加到缓存
      })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request) // 尝试从缓存中查找匹配的请求
      .then(response => {
        // 如果缓存中有匹配的响应，则返回它
        if (response) {
          return response;
        }
        // 否则，从网络获取
        return fetch(event.request);
      })
  );
});

8. 响应式设计与适配

媒体查询（Media Queries）

描述：使用 CSS 媒体查询根据设备的特性（如视口宽度、高度、方向、分辨率等）应用不同的样式规则。

应用场景：实现响应式布局，为不同屏幕尺寸提供优化体验，加载适合的资源。

示例：

/* 默认样式 (移动优先) */
.container {
  width: 95%;
  margin: 0 auto;
}

/* 平板设备 */
@media (min-width: 768px) {
  .container {
    width: 90%;
  }
  .sidebar {
    display: block; /* 在平板上显示侧边栏 */
  }
}

/* 桌面设备 */
@media (min-width: 1024px) {
  .container {
    width: 80%;
    max-width: 1200px;
  }
}

/* 加载不同背景图 */
body {
  background-image: url('background-small.jpg');
}
@media (min-width: 768px) {
  body {
    background-image: url('background-large.jpg');
  }
}

图片适配（Responsive Images）

描述：使用 HTML 的 <picture> 元素或 <img> 元素的 srcset 和 sizes 属性，让浏览器根据设备特性（如屏幕尺寸、分辨率、网络状况）选择加载最合适的图片资源。

应用场景：为不同设备提供不同尺寸或格式的图片，节省带宽，提高加载速度。

示例：

<!-- 使用 srcset 和 sizes -->
<img srcset="image-320w.jpg 320w,
             image-480w.jpg 480w,
             image-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="image-800w.jpg" alt="Responsive image">

<!-- 使用 <picture> 元素提供不同格式或裁剪 -->
<picture>
  <source media="(min-width: 650px)" srcset="image-large.webp" type="image/webp">
  <source media="(min-width: 465px)" srcset="image-medium.webp" type="image/webp">
  <source srcset="image-small.webp" type="image/webp">
  <!-- Fallback for browsers that don't support WebP or <picture> -->
  <source media="(min-width: 650px)" srcset="image-large.jpg">
  <source media="(min-width: 465px)" srcset="image-medium.jpg">
  <img src="image-small.jpg" alt="Art directed image">
</picture>

9. 智能化和延迟加载

智能加载（Smart Loading）

描述：根据用户的行为、网络状况（如使用 Network Information API）、设备性能或数据节省偏好，智能地决定加载哪些内容或何种质量的内容。

应用场景：在慢速网络下加载低质量图片或延迟加载非关键脚本，根据用户交互历史预测并预加载可能访问的页面。

示例：

// 检查网络状况决定加载资源质量 (概念示例)
if ('connection' in navigator) {
  const connection = navigator.connection;
  if (connection.saveData === true) {
    // 用户启用了数据节省模式，加载低质量资源
    loadLowQualityResources();
  } else if (connection.effectiveType === '4g') {
    // 网络良好，加载高质量资源
    loadHighQualityResources();
  } else {
    // 网络一般或未知，加载标准资源
    loadStandardResources();
  }
} else {
  // 不支持 Network Information API，加载标准资源
  loadStandardResources();
}

按需加载（On-demand Loading）

描述：只有在用户明确需要时（如点击按钮、滚动到特定区域）才加载更多内容或功能。

应用场景：无限滚动列表、点击“加载更多”按钮、加载大型库或组件。

示例：

// 点击按钮加载更多评论
const loadMoreButton = document.getElementById('loadMoreComments');
let currentPage = 1;

loadMoreButton.addEventListener('click', () => {
  currentPage++;
  fetch(`/api/comments?page=${currentPage}`)
    .then(response => response.json())
    .then(comments => {
      renderComments(comments);
      if (comments.length === 0) {
        loadMoreButton.style.display = 'none'; // 没有更多评论了
      }
    });
});

// 结合 Intersection Observer 实现无限滚动加载
const sentinel = document.getElementById('infinite-scroll-sentinel');
const observer = new IntersectionObserver(entries => {
  if (entries[0].isIntersecting) {
    loadMoreContent();
  }
});
observer.observe(sentinel);

10. 字体优化

字体懒加载

描述：仅在需要显示相应文本时才开始加载字体文件，或者使用 font-display CSS 属性控制字体加载过程中的文本显示行为，避免字体加载阻塞页面渲染或导致文本闪烁（FOIT/FOUT）。

应用场景：优化使用了自定义 Web 字体的页面加载体验。

示例：

@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2');
  /* font-display 控制字体加载行为 */
  /* swap: 先显示后备字体，字体加载完后替换。可能导致 FOUT (Flash of Unstyled Text) */
  font-display: swap;

  /* block: 短暂阻塞（约3秒），期间不显示文本。若超时则显示后备字体，加载完后替换。*/
  /* font-display: block; */

  /* fallback: 极短阻塞（约100ms），期间不显示文本。若超时则显示后备字体，后续不再替换。*/
  /* font-display: fallback; */

  /* optional: 极短阻塞（约100ms），期间不显示文本。若超时则显示后备字体，字体仍在后台下载，但仅在下次导航时使用。*/
  /* font-display: optional; */
}

body {
  font-family: 'MyCustomFont', sans-serif; /* 指定后备字体 */
}

JS 懒加载: 可以使用 JavaScript 监听特定元素进入视口或其他条件，然后动态添加包含 @font-face 规则的 CSS 或直接加载字体。

合并字体文件

描述：如果页面使用了同一字体家族的多个字重（如 Regular, Bold, Italic），并且这些字重分别在不同的字体文件中，可以将它们合并成一个或少数几个文件（如果格式支持，如 WOFF2 可变字体），或者只加载必要的字重和字符集，以减少 HTTP 请求次数。

应用场景：使用了多个字体文件的网站。

示例：

策略: 评估是否所有字重都是必需的。如果可能，使用可变字体（Variable Fonts），一个文件包含所有变体。
工具: 使用字体编辑工具（如 FontForge）或专门的服务来合并字体文件或创建子集。
CSS: 确保 @font-face 规则正确指向合并后的文件或只引用需要的字重。

11. WebP 和 AVIF 格式

WebP / AVIF 图片格式

描述：使用现代图片格式 WebP 或 AVIF 替代传统的 JPG、PNG、GIF。它们通常能在相同视觉质量下提供更小的文件体积（WebP 比 JPG 小约 25-35%，AVIF 比 JPG 小约 50%），支持有损和无损压缩、透明度以及动画。

应用场景：网站上所有使用的图片。

示例：

<!-- 使用 <picture> 元素提供多种格式 -->
<picture>
  <!-- 优先尝试 AVIF -->
  <source srcset="image.avif" type="image/avif">
  <!-- 其次尝试 WebP -->
  <source srcset="image.webp" type="image/webp">
  <!-- 最后回退到 JPG -->
  <img src="image.jpg" alt="Modern image format example">
</picture>

<!-- 在 CSS 中使用 -->
<style>
.hero {
  /* 浏览器会自动选择它支持的第一个格式 */
  background-image: url('hero.avif'), url('hero.webp'), url('hero.jpg');
}
</style>

转换工具: 使用 Squoosh.app、cwebp/avifenc 命令行工具或构建插件（如 imagemin-webp）将现有图片转换为 WebP/AVIF。

12. JavaScript 性能优化

减少 JavaScript 阻塞

描述：避免长时间运行的 JavaScript 任务阻塞主线程，导致页面无响应。通过异步加载（async/defer）、延迟执行非关键脚本、将耗时任务移至 Web Worker 或使用 requestIdleCallback 来实现。

应用场景：优化页面加载和交互过程中的 JavaScript 执行。

示例：

async/defer: 见 1.1 异步加载示例。

延迟执行: 对于非首屏必需的 JS（如聊天插件、广告脚本），可以在页面主要内容加载完成后再加载和执行。

window.addEventListener('load', () => {
  const script = document.createElement('script');
  script.src = 'non-critical-script.js';
  document.body.appendChild(script);
});

Web Worker: 见 12.3 Web Worker 示例。
requestIdleCallback: 见 1.4 空闲时间调度示例。

优化垃圾回收（GC）

描述：编写更有效的代码以减少内存泄漏和不必要的内存分配，从而降低垃圾回收（GC）的频率和持续时间，避免 GC 暂停导致页面卡顿。

应用场景：长时间运行的应用、包含大量动态数据和事件监听器的页面。

示例：

避免全局变量: 全局变量不易被回收。

及时移除事件监听器: 在元素移除或组件卸载时，使用 removeEventListener 清除不再需要的监听器。

function handleClick() { /* ... */ }
element.addEventListener('click', handleClick);
// ... 当不再需要时 ...
element.removeEventListener('click', handleClick);

管理闭包: 注意闭包可能意外地持有不再需要的变量引用。

使用 WeakMap / WeakSet: 对于对象键或集合成员，如果希望它们在没有其他引用的情况下能被 GC 回收，可以使用 WeakMap 或 WeakSet。

const metadata = new WeakMap(); // 使用 WeakMap 存储对象元数据
let obj = {};
metadata.set(obj, { info: 'some data' });
// 当 obj 不再被引用时，WeakMap 中的条目也会被自动移除，不会阻止 obj 被回收
obj = null; // 假设这是 obj 的最后一个引用

Web Worker

描述：将计算密集型或长时间运行的 JavaScript 任务放到后台线程（Web Worker）中执行，避免阻塞主线程，保持 UI 的响应性。

应用场景：复杂计算、数据处理、图像处理、后台数据同步等。

示例：

// main.js (主线程)
const worker = new Worker('worker.js');

// 向 Worker 发送数据
worker.postMessage({ data: [1, 2, 3, 4, 5] });

// 接收来自 Worker 的消息
worker.onmessage = event => {
  console.log('Result from worker:', event.data.result);
};

// 处理错误
worker.onerror = error => {
  console.error('Worker error:', error);
};

// worker.js (后台线程)
self.onmessage = event => {
  console.log('Data received in worker:', event.data.data);
  // 执行耗时计算
  const result = event.data.data.reduce((sum, val) => sum + val * val, 0);

  // 将结果发送回主线程
  self.postMessage({ result: result });
};

13. Web API 性能优化

Intersection Observer API

描述：提供一种异步观察目标元素与其祖先元素或顶级文档视口交叉状态变化的方法。比传统的滚动事件监听更高效。

应用场景：图片/组件懒加载、无限滚动、广告可见性跟踪、触发动画等。

示例：

const targetElement = document.getElementById('observeMe');

const callback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 元素进入视口
      console.log('Element is visible!');
      targetElement.classList.add('visible');
      // 如果只需要触发一次，可以停止观察
      // observer.unobserve(targetElement);
    } else {
      // 元素离开视口
      console.log('Element is hidden!');
      targetElement.classList.remove('visible');
    }
  });
};

const options = {
  root: null, // 相对于视口
  rootMargin: '0px',
  threshold: 0.5 // 元素 50% 可见时触发回调
};

const observer = new IntersectionObserver(callback, options);
observer.observe(targetElement);

Performance API

描述：提供访问浏览器性能相关信息的接口，可以用来精确测量代码执行时间、资源加载时间、页面导航性能等。

应用场景：性能监控、代码性能分析、资源加载优化分析。

示例：

// 测量代码块执行时间
performance.mark('start-calculation');
// ... 执行一些耗时操作 ...
calculateFibonacci(40);
performance.mark('end-calculation');
performance.measure('calculation-duration', 'start-calculation', 'end-calculation');

// 获取所有测量结果
const measures = performance.getEntriesByType('measure');
measures.forEach(measure => {
  console.log(`${measure.name}: ${measure.duration}ms`);
});

// 获取资源加载性能数据
const resources = performance.getEntriesByType('resource');
resources.forEach(resource => {
  console.log(`Resource ${resource.name} loaded in ${resource.duration}ms`);
});

// 获取导航性能数据
const navigation = performance.getEntriesByType('navigation')[0];
console.log(`DOM content loaded in ${navigation.domContentLoadedEventEnd}ms`);
console.log(`Page loaded in ${navigation.loadEventEnd}ms`);

// 清除标记和测量
performance.clearMarks();
performance.clearMeasures();

Service Worker

描述：一个运行在浏览器后台的脚本，独立于网页，可以拦截和处理网络请求、推送通知、后台同步等。是构建 PWA 的核心技术之一。

应用场景：实现离线缓存、资源拦截与代理、推送通知、后台数据同步。

示例：

// main.js (注册 Service Worker)
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
      })
      .catch(error => {
        console.log('ServiceWorker registration failed: ', error);
      });
  });
}

// sw.js (Service Worker 脚本 - 缓存优先策略示例)
const CACHE_NAME = 'my-app-cache-v1';

self.addEventListener('install', event => {
  // 安装时缓存核心资源
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/app.js'
      ]);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // 缓存命中，返回缓存的响应
        if (response) {
          return response;
        }
        // 缓存未命中，从网络获取
        return fetch(event.request).then(networkResponse => {
          // 可选：将新的响应添加到缓存
          // caches.open(CACHE_NAME).then(cache => cache.put(event.request, networkResponse.clone()));
          return networkResponse;
        });
      })
      .catch(() => {
        // 网络和缓存都失败时，可以返回一个备用的离线页面
        // return caches.match('/offline.html');
      })
  );
});

DOH和ECH配置文档

Fri, 14 Mar 2025 00:00:00 GMT

前言

DoH（DNS over HTTPS）是一种安全协议，它通过 HTTPS（TLS 加密）传输 DNS 解析请求，防止 DNS 查询被窃听、篡改或屏蔽。

正常情况下，当你访问一个 HTTPS 网站时，需要先向 DNS 发送查询该域名 IP 地址的请求。由于传统 DNS 查询是明文传输的，ISP 或其他网络中间人可以看到你查询了哪个域名。虽然 HTTPS 内容是加密的，无法看到具体内容，但可以得知你在访问什么网站。

另外，访问 HTTPS 网站需要进行 TLS 握手，握手时会携带域名信息，也就是 SNI（Server Name Indication）。ISP 同样能看到这个信息。

此时，中间人可以劫持并篡改 DNS 查询返回的 IP 地址。

当我们使用加密 DNS 后，可以隐藏 DNS 查询的域名信息，但由于 TLS 握手仍会携带 SNI 信息，中间人依然能够监控。为了进一步保护隐私，网站可以配置 ECH（Encrypted Client Hello）来加密 SNI 信息。

目前 Cloudflare 已支持 ECH，使用其 CDN 服务的网站会默认开启此功能。ECH 会加密真实的 SNI 信息，只有支持 ECH 的服务器才能解密，从而实现对真实访问目标的隐藏。

ECH 配合 DoH 加密 DNS 可以提供更完整的隐私保护。

享受ECH加密的一些注意事项

服务端域名开启了ECH
服务端域名支持TLS 1.3
域名托管商支持HTTPS解析
客户端使用国际主流浏览器
客户端不要用代理
客户端使用加密DNS

`Windows 11` 配置加密 DNS

由于网络环境限制，国外的加密 DNS 服务可能无法直接访问。本文教大家配置阿里云的加密 DNS 服务。

系统设置方法：

打开 设置 > 网络和 Internet
找到当前网络连接的 属性
在 DNS 服务器分配 中选择 手动
首选 DNS 填入 223.5.5.5
DNS over HTTPS 选择 手动模板
模板地址填入 https://dns.alidns.com/dns-query

控制面板配置方法：

打开控制面板，选择 查看网络状态和任务
点击你的网卡连接
选择 属性
双击 Internet 协议版本 4 (TCP/IPv4)
点击 属性
首选 DNS 填入 223.5.5.5，备选 DNS 填入 8.8.8.8
点击 确定 保存设置

配置完成后，你的 DNS 查询将通过加密通道进行，提升上网安全性和隐私保护。

验证是否开启

访问域名 https://cdnjs.com/cdn-cgi/trace 查看sni参数

或者也可以访问https://tls-ech.dev

服务端域名配置ECH教程

由于Cloudflare CDN国内访问速度慢，所以我介绍一下不使用CDN的教程

我使用caddy较多，所以用caddy做演示，其他同理

caddy需要使用2.10.0以上的版本。

要使用caddy自动配置ech则需要编译cloudflare dns插件，用于caddy自动添加DNS记录，官方编译的包默认不带此插件。

编译`caddy`并加入`cloudflare DNS`插件的支持

1：安装go环境

2：下载xcaddy

go install github.com/caddyserver/xcaddy/cmd/xcaddy@latest

3：编译带cloudflare dns插件的caddy

xcaddy build --with github.com/caddy-dns/cloudflare

此时你的当前目录会生成一个已经包含了cloudflare dns插件的caddy二进制文件

以`debug`模式测试运行

创建/etc/caddy/Caddyfile文件，并写入以下文件

{
    debug
    dns cloudflare xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    ech ech.example.com

    log {
        output stdout
        format console
        level DEBUG
    }
}

test.example.com {
    root * /tmp
    file_server browse
    encode zstd gzip
}

配置说明

dns cloudflare这个配置填CF的区域 DNS API 令牌

ech ech.example.com替换你的任意二级域名，并且解析到你的IP，用于发布ECH公钥，或者第三方提供的ECH配置服务域名也行。

test.example.com替换你的域名，并且解析到你的IP，不要开小黄云。

root * /tmp这个配置代表以网页浏览文件的形式，浏览你服务器的/tmp目录，这里只是测试为了方便起服务。

启动`caddy`

sudo ./caddy run --config /etc/caddy/Caddyfile --adapter caddyfile

不出意外的话就启动成功了，然后可以访问你的域名看下是否能成功访问

并且/root/.local/share/caddy目录会生成一个锁文件，如果需要重新部署则需要删除这个目录

CF里也会自动添加一个类型为HTTPS的解析记录

检查`ech`是否配置成功

dig test.example.com TYPE65

执行这个命令后，在输出的信息里可以看到有如下类似的信息就代表启用成功

ech=AEr+DEBUGAgACBDEMOnixVAfd/ASODJKADKSODAPSkZIwAMADQABAAIASDASDADHw9lY2guZXhhbXBsZS5jb20AAA==

生产环境

移动二进制文件

mv ~/caddy /usr/bin/caddy

创建系统服务配置

touch /etc/systemd/system/caddy.service

写入配置

[Unit]
Description=Caddy Web Server
Documentation=https://caddyserver.com/docs/
After=network.target network-online.target
Wants=network-online.target

[Service]
User=root
Group=root
ExecStart=/usr/bin/caddy run --environ --config /etc/caddy/Caddyfile
ExecReload=/usr/bin/caddy reload --config /etc/caddy/Caddyfile
TimeoutStopSec=5s
LimitNOFILE=1048576
LimitNPROC=512
PrivateTmp=true
ProtectSystem=full
AmbientCapabilities=CAP_NET_BIND_SERVICE
CapabilityBoundingSet=CAP_NET_BIND_SERVICE

[Install]
WantedBy=multi-user.target

管理命令

# 重新加载 systemd 配置
sudo systemctl daemon-reexec
sudo systemctl daemon-reload

# 启动 Caddy
sudo systemctl start caddy

# 设置开机启动
sudo systemctl enable caddy

# 查看运行状态
sudo systemctl status caddy

生产环境反代配置示例

{
	dns cloudflare xxxxxxxxxxxxxxxxxxxxx
	ech ech.example.com
}

test.example.com {
	reverse_proxy localhost:8080
}

重新部署记得删除：/root/.local/share/caddy锁文件，和CF里的HTTPS解析记录

tailscale异地组网教程

Tue, 11 Mar 2025 00:00:00 GMT

前言

Tailscale 是一种新型组网工具. 它能帮助我们把安装了Tailscale服务的机器，都放到同一个局域网内，实现内网互联。即公司或者家里的 PC 机器连到同一网络，包括云服务器等等都能放到同一个局域网。并且能够自动发现点对点直连，如果无法直连则会通过他的公共中继服务器来转发，他的公共网络我实测大概有30M带宽，并且永久免费。当然也可以自建中继服务器，本文有介绍。部署和使用过程都非常简单方便。

安卓，ios，windows，mac 直接官网下载即可

Docker部署

docker run -d \
  --name tailscale \
  --privileged \
  --network host \
  --restart always \
  -v $(pwd)/tailscale:/var/lib/tailscale \
  tailscale/tailscale:latest \
  tailscaled --state=/var/lib/tailscale/tailscaled.state

进入容器：

docker exec -it tailscale sh

生成登录链接：

tailscale up

（可选）使用密钥连接：

tailscale up --auth-key=<你的AuthKey>

查看中继网络

tailscale netcheck

查看是否点对点直连

tailscale status

如果看到relay "tok"则说明使用了公共中继连接，tok代表日本公共节点

指定密钥运行

docker-compose.yml

services:
  tailscale:
    image: tailscale/tailscale:latest
    container_name: tailscale
    privileged: true
    network_mode: host
    restart: always
    volumes:
      - ./tailscale:/var/lib/tailscale
    command:
      - tailscaled
      - --state=/var/lib/tailscale/tailscaled.state
      - --tun=tailscale0
      - --auth-key=你的AuthKey

宿主机部署

# 安装
sudo apt install tailscale -y

# 登录
sudo tailscale up

# 查看运行状态
sudo systemctl status tailscaled

# 开机自启
sudo systemctl enable tailscaled

# 停止运行
sudo systemctl stop tailscaled

# 重启
sudo systemctl restart tailscaled

# 查看日志
sudo journalctl -u tailscaled -f

自建`derper`中继服务器

自动申请证书

services:
  derper:
    image: fredliang/derper:latest
    container_name: derper
    restart: unless-stopped
    environment:
      - DERP_DOMAIN=derper.your-domain.com  # 替换为您的域名
      - DERP_CERT_MODE=letsencrypt
      - DERP_STUN=true
      - DERP_HTTP_PORT=80
      - DERP_ADDR=:443
      - DERP_VERIFY_CLIENTS=true  # 本地 tailscaled 实例验证客户端，只允许自己使用
    ports:
      - "80:80"
      - "443:443"
      - "3478:3478/udp"
    volumes:
      - ./certs:/app/certs # 证书持久化存储
      - /var/run/tailscale/tailscaled.sock:/var/run/tailscale/tailscaled.sock

手动配置证书

services:
  derper:
    image: fredliang/derper:latest
    container_name: derper
    restart: unless-stopped
    environment:
      - DERP_DOMAIN=derper.your-domain.com  # 替换为您的域名
      - DERP_CERT_MODE=manual
      - DERP_CERT_DIR=/app/certs
      - DERP_STUN=true
      - DERP_HTTP_PORT=80
      - DERP_ADDR=:443
      - DERP_VERIFY_CLIENTS=true  # 通过本地 tailscaled 实例验证客户端
    ports:
      - "80:80"
      - "443:443"
      - "3478:3478/udp"
    volumes:
      - ./certs:/app/certs # 手动挂载证书
      - /var/run/tailscale/tailscaled.sock:/var/run/tailscale/tailscaled.sock

修改Tailscale后台配置文件添加如下内容

        "derpMap": {
                "OmitDefaultRegions": true,
                // OmitDefaultRegions 忽略官方的中继节点
                "Regions": {
                        // 这里的 901 从 900 开始随便取数字
                        "901": {
                                // RegionID 和上面的相等
                                "RegionID": 901,
                                // RegionCode 名称
                                "RegionCode": "Vultr-SG",
                                "Nodes": [
                                        {
                                                // Name 保持 1不动
                                                "Name":     "1",
                                                // 这个也和 RegionID 一样
                                                "RegionID": 901,
                                                // 域名
                                                "HostName": "<你的域名>",
                                                // 端口号
                                                "DERPPort": 443,
                                        },
                                ],
                        },
                },
        },

Docker变量	必需	描述	值
DERP_DOMAIN	是	derper 服务器主机名	your-hostname.com
DERP_CERT_DIR	否	存储证书的目录 (如果地址端口是 :443)	/app/certs
DERP_CERT_MODE	否	获取证书的模式。可选项: manual, letsencrypt	letsencrypt
DERP_ADDR	否	服务器监听地址	:443
DERP_STUN	否	是否同时运行 STUN 服务器	true
DERP_HTTP_PORT	否	提供 HTTP 服务的端口。设置为 -1 禁用	80
DERP_VERIFY_CLIENTS	否	是否通过本地 tailscaled 实例验证此 DERP 服务器的客户端	false

子网路由

192.168.3.0/24根据自己需求更改，添加子网路由后，192.168.3.0/24网段的所有设备都能直接访问tailscale中的其他设备，无需安装tailscale

开启子网路由：

tailscale up --advertise-routes=192.168.3.0/24 --accept-routes --reset

开启后，在tailscale后台找到你路由器设备，点击右侧菜单(三个点)，选择Edit route settings...，勾选192.168.3.0/24，点击Save。

然后输入以下命令查看是否存在你广播的IP段

tailscale status --json | grep advertisedRoutes

能看到你广播的网段就说明成功了，但是这个检查方式不准确，最好还是手动ping测试

需要注意的坑

子网路由功能依赖iptables，immortalwrt默认防火墙不是这个，需要安装iptables，immortalwrt默认不会让 LAN 网段流量被转发到tailscale0，需要手动加。

需要启用 IP 转发，请确保已经启用。

SSH防护最简单的两种方案

Thu, 27 Feb 2025 00:00:00 GMT

前言

互联网上有黑客无时无刻都在扫端口，我也看到过很多网友的惨痛经历，服务器的SSH密码被黑客爆破后进入服务器捣乱或者植入后门，所以网络安全要牢记心中。本篇文章为大家分享防止SSH被爆破的两种方案，并且最简单方便。

方案一：关闭密码登录改为使用私钥登录

简介：通过关闭SSH密码登录，改用公钥认证，只有拥有对应私钥的用户才能登录。服务器存储用户的公钥，客户端使用私钥进行身份验证，非对称加密确保安全性，彻底杜绝密码暴力破解。

1：生成ED25519类型的 SSH 密钥对

ssh-keygen -t ed25519

一路回车即可，生成的id_ed25519文件为私钥，使用这个私钥文件连接服务器，id_ed25519.pub文件为公钥。

2：然后进入存储SSH密钥的目录，并配置公钥

cd /root/.ssh
cat id_ed25519.pub >> authorized_keys

3：修改SSH配置文件

文件路径在/etc/ssh/sshd_config

sudo vim /etc/ssh/sshd_config

4：找到对应的配置然后修改，这里仅展示需要修改的地方

# 修改SSH服务端口
Port 2222

# 启用公钥认证
PubkeyAuthentication yes

# 指定存储公钥的文件位置(增加此项)
AuthorizedKeysFile .ssh/authorized_keys

# 禁止使用空密码登录
PermitEmptyPasswords no

# 禁止使用密码认证登录
PasswordAuthentication no

5：重启SSH服务

sudo systemctl restart ssh

方案二：端口敲门

:::note[注意] 请先看完教程再配置，配置后记得先测试一下，免得把自己关在门外了。 :::

简介：端口敲门通过关闭SSH端口，服务器监听预设的端口序列，当客户端按正确顺序敲门后，防火墙规则动态开放SSH端口，仅允许敲门成功的IP访问，阻止未授权访问。

1：安装iptables

大部分常见的Linux发行版已经默认安装了，无需额外安装，并且你安装了Docker后也是肯定安装了iptables。可以运行iptables --version查看版本。如果没有安装，可以执行这个命令安装：

sudo apt update && sudo apt install iptables -y

2：安装端口敲门程序knockd

sudo apt update && sudo apt install knockd -y

3：配置knockd

knockd的默认配置文件路径在/etc/knockd.conf

[options]
    UseSyslog
    logfile = /var/log/knockd.log

# 开启SSH访问 - 只允许敲门的IP访问
[openSSH]
    sequence    = 5003,5001
    seq_timeout = 15
    start_command = /sbin/iptables -C INPUT -s %IP% -p tcp --dport 22 -j ACCEPT || /sbin/iptables -I INPUT 1 -s %IP% -p tcp --dport 22 -j ACCEPT
    tcpflags    = syn
    cmd_timeout = 10

# 关闭所有SSH访问 - 阻止所有IP
[closeSSH]
    sequence    = 7001
    seq_timeout = 15
    start_command = /sbin/iptables -C INPUT -p tcp --dport 22 -j DROP || /sbin/iptables -I INPUT 1 -p tcp --dport 22 -j DROP && /sbin/iptables -D INPUT -s %IP% -p tcp --dport 22 -j ACCEPT 2>/dev/null
    tcpflags    = syn
    cmd_timeout = 10

4：启动knockd

sudo systemctl enable knockd
sudo systemctl start knockd

5：关门

网页访问7001端口关闭SSH服务，阻止所有IP访问SSH

6：敲门

按顺序网页访问5003和5001端口，需要15秒内完成动作，敲门后会自动放行敲门的IP允许连接SSH。

Liunx可以使用wget等命令敲门

（可选）关闭端口敲门

停止并禁用knockd

sudo systemctl stop knockd
sudo systemctl disable knockd

清除防火墙所有的自定义规则

sudo iptables -F

端口敲门不仅限于SSH端口，还能实现更多玩法。

Docker部署DeepSeek-R1本地大模型

Sat, 08 Feb 2025 00:00:00 GMT

前言

使用docker部署OpenUI + Ollama + DeepSeek-R1:7B，通过浏览器访问OpenUI进行交互。部署完成后可以离线使用DeepSeek-R1大模型。

Ollama的DeepSeek-R1大模型官网：https://ollama.com/library/deepseek-r1:7b

1.5B：CPU最低4核，内存8GB+，若GPU加速可选4GB+显存，适合低资源设备部署等场景。
7B：CPU 8核以上，内存16GB+，硬盘8GB+，显卡推荐8GB+显存，可用于本地开发测试等场景。
8B：硬件需求与7B相近略高，适合需更高精度的轻量级任务。
14B：CPU 12核以上，内存32GB+，硬盘15GB+，显卡16GB+显存，可用于企业级复杂任务等场景。
32B：CPU 16核以上，内存64GB+，硬盘30GB+，显卡24GB+显存，适合高精度专业领域任务等场景。
70B：CPU 32核以上，内存128GB+，硬盘70GB+，显卡需多卡并行，适合科研机构等进行高复杂度生成任务等场景。

部署教程

open-webui镜像大小：8 GB

docker-compose.yml配置示例

services:
  open-webui:
    image: ghcr.io/open-webui/open-webui:ollama
    container_name: open-webui
    ports:
      - "3000:8080"
    volumes:
      - ./ollama:/root/.ollama
      - ./open-webui:/app/backend/data
    restart: always

国内网络环境可以使用南京大学 ghcr 镜像加速ghcr.nju.edu.cn

容器内安装DeepSeek-R1 7b模型：

docker exec -it open-webui sh

ollama run deepseek-r1:7b

部署完成后浏览器访问3000端口使用web面板进行对话，如果需要域名访问反代一下即可。

如果有GPU服务器可以使用如下命令

docker run -d -p 3000:8080 --gpus=all \
  -v ./ollama:/root/.ollama \
  -v ./open-webui:/app/backend/data \
  --name open-webui \
  --restart always \
  ghcr.io/open-webui/open-webui:ollama

电脑本地安装ollama

官方地址：https://ollama.com
下载对应的系统版本
安装完成后打开电脑终端
查看版本

ollama --version

下载并运行 deepseek-r1:7b 模型

ollama run deepseek-r1:7b

可以在终端对话使用
也可以部署open-webui访问并使用本地ollama

docker run -d -p 3000:8080 \
  --add-host=host.docker.internal:host-gateway \
  -e OLLAMA_API_URL=http://host.docker.internal:11434 \
  -v ./open-webui:/app/backend/data \
  --name open-webui \
  --restart always \
  ghcr.io/open-webui/open-webui:main

ollama api 调用示例 POST 请求

curl http://localhost:11434/api/generate -d '{
  "model": "deepseek-r1:7b",
  "prompt": "你是什么模型?"
}'

API 会返回生成的结果，通常是 JSON 格式

一生真的太短了

Wed, 29 Jan 2025 00:00:00 GMT

又是一年冬。

我回到了村子里，时间仿佛突然放慢了脚步。于城市里那种急促而机械的节奏而言，这里的冬天显得格外压抑——枯藤缠绕着老树，残破的落叶铺在地上，空气里弥漫着寒意与衰败的气息。

家人的脸庞也在不经意间苍老了许多。

家里没有城市里永不停歇的机车轰鸣，没有人流穿梭的嘈杂声响。破旧的村庄静静地躺在冬天里，安静得近乎冷漠，让人无处可逃。

时间过得真快。

此刻我执笔之时是 2025 年 1 月 29 日，农历新年的清晨。凌晨四点，被鞭炮声惊醒，我才意识到又过年了。便再也睡不着了，躺在床上，任由思绪在黑暗中不受控制的游走。

焦虑与恐慌悄然蔓延。

依稀记得这间屋子从我小时候起几乎没有任何变化。墙壁的斑驳、陈旧的摆设，它们像是一只无形的手，把我拉回过去。那些被尘封的记忆无情的侵入大脑——刚踏入社会的那几年，我曾对世界充满好奇，对未来充满希望。

一晃眼，十年过去了，时间真的快到无法想象。

回头再看，我仍然停留在原地。没有一丝丝改变，没有任何收获。依旧是一个人，依旧过着重复且忧伤的生活。时间没有把我推向诗和远方，反而一点点地把我压进更深的抑郁里。

昨天，家人随口提起隔壁村一位老人去世了。他们说，冬天一到，老人往往更容易扛不住，说走就走。

这句话在我心里反复回响。人一旦死去，就再也见不到了。永远。

从这一刻开始，死亡的恐惧毫无征兆地袭来。

我开始不停地想：死了之后，什么都没有了。连感受"黑"的能力都没有了。甚至连"世界"本身，也似乎是依附于"我"的存在而存在的——如果我消失了，这个世界于我而言，也将彻底消散。

想到这里，我的心跳骤然加快，呼吸变得困难。

生不带来，死不带去。一切仿佛都失去了意义。

人生终将落幕。若干年后，我会死去；那些记忆中曾经认识我的人，也终将死去；直到关于我的所有痕迹彻底消散，仿佛我从未存在过一样。此时此刻正在思考的这个"我"，也将不复存在。

我好不甘...

这一生如此凄凉，甚至连"平庸"都谈不上，这种无可回避的结局，让人感到彻骨的绝望。

地球终会毁灭，人类终将消亡，连宇宙本身也拥有尽头。当宇宙走向死亡——热寂降临，一切物质与能量都会归于沉寂，世界陷入无尽的黑暗、虚无与孤独。没有任何波动，什么都不剩。

那种荒凉，深入骨髓。

有时候，我会刻意的去感受"死亡"的边缘。在夜晚极度困倦的时候，我努力感受从意识模糊到彻底沉睡的那一瞬间，去尝试意识消散的感觉。可越接近，我就越害怕。我不知道明天和意外哪一个会先到来，害怕自己一旦睡着，就再也无法醒来。

我害怕再也无法感受这个世界的温度。害怕再也见不到朋友，见不到家人。

其实，我是那么渴望未来。我想知道地球会变成什么样，人类会走向何方，宇宙在死亡之后是否还会有另一种形态。

可那一切，都注定与我无关。无论如何都无法看见。这种无论如何都无法改变的结局，绝望透顶......

所谓的百年功名，千秋霸业，万古流芳，也终究不过一场梦。

给IP申请SSL证书并开启HTTPS访问

Fri, 17 Jan 2025 00:00:00 GMT

前言

IP证书是一种特殊的SSL证书，它直接绑定到服务器的公网IP地址上，当用户通过这个IP地址访问时，也能享受到如同访问经过域名验证的HTTPS网站一样的加密安全连接。这样一来，即便是没有注册域名或仅通过IP地址访问的服务，也能确保数据传输过程中的安全性，防止信息被窃取或篡改，同时也提供了对服务器身份的验证，增加了用户对服务提供者的信任度。

本教程以caddy作为演示，如何安装caddy请参考本博客的教程，使用nginx的话思路也一样。

1. 打开免费申请IP SSL证书的网站

https://zerossl.com/

1：打开后首页就直接输入你要申请的IP，点击Next Step进入下一步。

2：输入注册邮箱和密码（邮箱可以随便填，不会验证真实性）

3：免费版IP SSL证书有效期是3个月。需要在第二项里手动选择下。否则是默认的1年付费版。

2. 验证IP所有权

以下配置中的123.123.123.123为示例IP地址，请根据自己情况替换。

1：下载Auth验证文件

2：在网站目录里创建/.well-known/pki-validation/目录，以caddy为例

mkdir -p /var/www/.well-known/pki-validation

caddy配置示例

http://123.123.123.123 {
    root * /var/www
    encode zstd gzip
    file_server
}

3：将刚刚下载的验证文件上传到/var/www/.well-known/pki-validation/目录里

4：启动caddy，访问你的公网IP，如果能看到验证文件，则代表成功

3. 生成SSL证书

然后zerossl网站里点击验证，验证成功后下载zip证书压缩包，上传到服务器/etc/caddy目录，并使用unzip命令解压

4. 合并证书文件

在/etc/caddy目录下执行如下命令：

cd /etc/caddy

cat certificate.crt ca_bundle.crt > fullchain.crt

5. 启动站点

caddy配置示例

https://123.123.123.123 {
    root * /var/www
    encode zstd gzip
    file_server

    tls /etc/caddy/fullchain.crt /etc/caddy/private.key
}

/var/www为站点目录，123.123.123.123为示例IP地址，请根据自己情况替换。

使用nginx的话思路也一样。

Docker部署Poste.io邮局

Tue, 14 Jan 2025 00:00:00 GMT

前言

很多企业都有自建邮局的需求，本篇介绍如何使用Docker部署开源的Poste.io邮局系统。

需要占用的端口

80 - HTTP（用于 web 界面和未加密的邮件服务）
443 - HTTPS（用于加密的 web 界面和邮件服务）
25 - SMTP（用于发送邮件）
587 - SMTP（用于加密的邮件发送）
993 - IMAP（用于加密的 IMAP 邮件接收）
995 - POP3（用于加密的 POP3 邮件接收）
110 - POP3（用于未加密的 POP3 邮件接收）
143 - IMAP（用于未加密的 IMAP 邮件接收）

1：检查25端口是否能通

apt update && apt install telnet -y

telnet smtp.gmail.com 25

如果显示下面的信息就代表是通的

Connected to smtp.gmail.com.
Escape character is '^]'.
220 smtp.gmail.com ESMTP d2e1a72fcca58-71dd9d6e713sm17347b3a.23 - gsmtp

2：域名解析（以cloudflare为例）

类型	名称	内容	代理状态	TTL
A	mail	服务器IP	仅 DNS	自动
CNAME	imap	mail.example.com	仅 DNS	自动
CNAME	pop	mail.example.com	仅 DNS	自动
CNAME	smtp	mail.example.com	仅 DNS	自动
MX	example.com	mail.example.com	仅 DNS	自动
TXT	example.com	v=spf1 mx ~all	仅 DNS	自动
TXT	s20241002362._domainkey	k=rsa; p=MIIBIjA.............xXX	仅 DNS	自动

最后一条TXT记录需要部署完成后进面板查看名称和内容。

替换example.com为你的域名

3：`docker-compose.yaml`启动

services:
  mailer:
    image: analogic/poste.io
    container_name: mailer
    restart: always
    hostname: mail.example.com  # 容器内主机名替换你的域名
    network_mode: host
    environment:
      - TZ=Asia/Shanghai  # 时区设置
      - DISABLE_CLAMAV=TRUE  # 禁用 ClamAV
      - DISABLE_RSPAMD=FALSE  # 启用 Rspamd
      - DISABLE_ROUNDCUBE=FALSE  # 启用 Roundcube
    volumes:
      - ./mailer:/data

4：进入面板

mail.example.com使用这个域名进入管理面板
第一行默认，第二行设置管理员邮箱，例如：admin@example.com，第三行输入管理员密码，smtp密码也是这个
左侧选择系统设置，然后上面找到TLS证书，然后申请证书。通用名默认，替代名称里把smtp这些域名也填入进去，然后申请，查看下面的日志，申请完成后保存即可。
然后左侧选择虚拟域名，然后点击域名，找到DKlM key，然后点击钥匙按钮激活，然后域名解析TXT类型的验证。
然后用管理员邮箱登录，测试发邮件即可。

poste.io批量创建邮箱脚本

#!/bin/bash

# Poste.io 容器ID或名称
CONTAINER_ID="mailer"

# 邮箱的@后缀，也就是根域名
DOMAIN="example.com"

# 所有邮箱账户的统一密码
PASSWORD="admin123456"

# 如果域名不存在，则创建域名
echo "创建域名 $DOMAIN (如果不存在)"
docker exec $CONTAINER_ID poste domain:create $DOMAIN

# 创建邮箱账户
for i in {100..200}
do
    EMAIL="$i@$DOMAIN"
    echo "正在创建邮箱: $EMAIL"
    docker exec $CONTAINER_ID poste email:create $EMAIL $PASSWORD
    
    # 检查上一个命令的退出状态
    if [ $? -eq 0 ]; then
        echo "成功创建邮箱 $EMAIL"
    else
        echo "创建邮箱 $EMAIL 失败"
    fi
    
    # 可选：添加小延迟以避免对服务器造成过大压力
    sleep 1
done

echo "邮箱创建过程完成。"

亚马逊云CDN配置教程

Mon, 13 Jan 2025 00:00:00 GMT

前言

众所周知，海外有一些免费的CDN，而且还是大厂，其中最强大的就是cloudflare，这个配置最简单，只需开启小黄云即可，但是cloudflare的很多IP国内访问速度不佳，所以本篇介绍一下亚马逊云CDN的配置方法，亚马逊云的IP相对CF的速度稍微好点，需要注意的是，亚马逊云CDN的免费额度是每个月1000G流量，并且只是下载的流量是免费，上传是收费的（不过一般的网站很少用到上传流量），注意别被反薅了，注册亚马逊云需要验证外币卡，注册方法网上有很多，就不介绍了。

配置

本教程是基于不改动源站的配置下使用亚马逊云CDN，默认源站已经开启TLS

1：源域直接填源站域名，协议选HTTPS，最小源选TLSv1，

2：行为里的压缩建议选NO，查看器协议策略选Redirect HTTP to HTTPS，缓存键和源请求要选旧版缓存设置，也就是第二个。

这里是我踩过的一个坑，必须选旧版缓存，不然访问站点会报错502

3：WAF防火墙选不启用，因为这个是付费的。

4：支持的 HTTP 版本建议全部选中，然后点击创建分配，等待部署完成，会给你分配一个域名，访问这个域名查看是否正常。

自定义域名

1：进入到常规的设置里的编辑，添加备用域名 > 也就是给用户访问的域名，然后申请证书，然后在申请证书的页面里直接点下一步，输入一个域名，验证方法就用默认的DNS 验证，然后点请求。

2：这里以cloudflare为例，在域名里添加一个CNAME，名称和值直接复制亚马逊云里的即可，等待一会亚马逊云里会显示验证成功，需要耐心等待。

3：证书验证完成后，记得回到上一个页面，选中刚刚颁发的域名，然后点保存，保存成功后等待部署完成。

4：部署完成后，在cloudflare里把刚刚的那个用于验证域名的CNAME修改一下，名称就填你刚刚申请证书的二级域名，目标填亚马逊云给你分配的域名即可。

5：如果无法访问可能是aws正在部署中，多等待一会即可。

Docker部署哪吒监控

Fri, 10 Jan 2025 00:00:00 GMT

简介

哪吒监控是一款开源的轻量化的服务器监控和运维工具，提供实时性能监控与告警通知。

1：安装Docker参考我博客的教程

2：创建docker-compose.yml文件写入如下配置

services:
  dashboard:
    image: ghcr.io/nezhahq/nezha
    restart: always
    ports:
      - "127.0.0.1:8008:8008"
    volumes:
      - ./data:/dashboard/data

监听本地防止被扫端口

然后docker compose up -d启动

3：我选择使用caddy作为web服务，简单方便，安装命令如下

使用apt包一键安装caddy：

sudo apt install -yq debian-keyring debian-archive-keyring apt-transport-https curl && curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg && curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list && sudo apt update -q && sudo apt install -yq caddy

4：写入Caddyfile反代配置

example.com {
    reverse_proxy /proto.NezhaService/* h2c://127.0.0.1:8008
    
    reverse_proxy /* 127.0.0.1:8008
}

注意替换你的域名，caddy会自动配置证书，启动caddy后就部署完成了。

5：哪吒面板配置

后台路径/dashboard默认用户名密码admin admin，进入后台后首先修改用户名和密码，必须修改强密码，因为如果被爆破后你的小鸡将会被恶意者完全掌控。

然后到设置里配置面板后台Agent对接地址，示例：example.com:443，并选中使用 TLS 连接

如果你要套cf cdn，则域名设置里的网络需要开启grpc选项，并且SSL加密模式改成完全。

6：国内网络环境说明

哪吒官方镜像托管在github，国内网络拉取很慢，可以使用南京大学的镜像加速，docker-compose.yml示例

services:
  dashboard:
    image: ghcr.nju.edu.cn/nezhahq/nezha
    restart: always
    ports:
      - "127.0.0.1:8008:8008"
    volumes:
      - ./data:/dashboard/data

国内环境安装Docker也可以参考我博客的教程

国内小鸡安装Agent请替换哪吒官方的码云地址，将复制出来的Agent安装脚本替换如下地址即可，其他参数不变

https://gitee.com/naibahq/scripts/raw/main/agent/install.sh

卸载v1版本的Agent方法

v1版本的Agent多次安装不会覆盖，而是会出现多个重复监控的情况，所以我提供一下卸载干净的方法

# 停止并禁用
sudo systemctl stop nezha-agent.service
sudo systemctl disable nezha-agent.service

# 删除服务文件
rm -f /etc/systemd/system/nezha-a*.service
rm -f /lib/systemd/system/nezha-a*.service

# 删除相关文件夹
sudo rm -rf /opt/nezha

# 重新加载 systemd
sudo systemctl daemon-reload

# 验证服务是否有残留
systemctl list-units --type=service | grep nezha

windows重装系统教程

Thu, 09 Jan 2025 00:00:00 GMT

windows重装系统之U盘引导

微软官网系统镜像下载：https://www.microsoft.com/zh-cn/software-download/windows11

1：下载Windows 11 安装媒体并执行程序写入到U盘

2：开机重复按F2或者F12或者DELETE键进入BIOS界面

3：U盘引导，UEFI ——> 对应GPT磁盘分区格式

4：将U盘改为第一启动项，然后保存并重启

5：第一个分区默认是C盘，建议分区300G：填307200MB。剩下的全给第二个分区，记得给盘符命名。

6：进入系统后，右键打开显示设置——>个性化——>主题——>桌面图标设置——>勾选想要的桌面图标

重装系统前先关闭Bitlocker磁盘加密，现在的大部分电脑都是UEFI引导，和GPT磁盘分区格式。如果无法进入安装系统的界面，需要关闭安全启动Secure Boot选项。比较旧的电脑或者主板是Legacy BIOS引导，和MBR磁盘分区格式。Linux 系统默认的磁盘分区格式主要是ext4。

windows重装系统之本地重装

1：微软官网下载Windows 11 磁盘映像 (ISO)

2：解压下载的iso文件，点击5etup按提示重装即可

系统内给磁盘分区

打开磁盘管理并压缩C盘

Win + X 快捷键 → 选择“磁盘管理”
右键点击 (C:) 分区 → 选择“压缩卷”
输入要分出的空间大小（单位：MB）→ 点击“压缩”

创建新分区

右键新出现的 未分配 空间 → 选择“新建简单卷”
按照向导完成

安装界面绕过硬件检查

报错信息：这台电脑不符合安装此版本的 Windows 所需的最低系统要求。

1：在安装界面按下Shift+F10组合键调出管理员命令窗口

2：输入regedit按回车键调出注册表

3：依次展开HKEY_LOCAL_MACHINE \ SYSTEM \ Setup目录，右键点击Setup选择新建项，命名为LabConfig

4：选择LabConfig右键–新建–DWORD（32 位）值，需要创建5个，分别命名为：BypassCPUCheck、BypassRAMCheck、BypassSecureBootCheck、BypassStorageCheck、BypassTPMCheck

5：将这些十进制的值都改成1确定后即可绕过硬件检测，继续安装

安装界面绕过联网

1：打开命令窗口：Shift + F10

2：修改注册表跳过联网

reg add HKLM\SOFTWARE\Microsoft\Windows\CurrentVersion\OOBE /v BypassNRO /t REG_DWORD /d 1 /f

shutdown /r /t 0

执行完成后会自动重启，然后就可以直接创建本地账户，而无需使用联网账户。

或者直接通过命令创建本地账户来跳过联网

net user 你的用户名 /add

net localgroup Administrators 你的用户名 /add

cd OOBE

msoobe && shutdown -r

执行完成后会自动重启，然后就可以直接登录本地账户了

磁盘分区格式

如果磁盘分区格式不对，可以按Shift + F10，打开命令窗口，更改磁盘存储格式：

diskpart                     # 进入磁盘管理
list disk                    # 列出所有磁盘
select disk 0                # 选择要操作的磁盘，0 是磁盘编号
clean                        # 清除磁盘上的所有分区和数据
convert gpt                  # 将磁盘转换为 GPT 分区格式
exit                         # 退出

完成以上步骤后，硬盘已被格式化并转换为 UEFI 的 GPT 分区格式。然后刷新可以继续进行操作系统安装。

驱动器0，即表示第一块物理磁盘，该类型索引从0开始

分区1、2、3编号，即第一个分区……依次排列，分区从1开始索引编号。

备注：

1：win+R运行msinfo32查看BIOS引导模式，或者cmd命令运行bcdedit查看引导模式，如果是\WINDOWS\system32\winload.efi则是UEFI引导

2：重装系统时有的机器需要进入UEFI BIOS固件设置，关闭安全启动Secure Boot选项。

3：如果启动时有多个系统，可以win+R运行msconfig查看引导选项卡，删掉不需要的。

4：可靠性历史可以查看当前系统的错误日志，事件查看器也有更详细的日志

5：更多问题可以问AI：https://chat.deepseek.com

系统修复命令：

# 内存诊断
mdsched.exe

# 检查并修复磁盘文件系统错误和坏道
chkdsk /f /r C:

# 扫描并修复损坏的系统文件
sfc /scannow

# 修复 Windows 系统映像及更新组件问题
dism /online /cleanup-image /restorehealth

# 修复启动引导(MBR)(UEFI)和(BCD)启动配置
bootrec /fixmbr
bootrec /fixboot
bootrec /rebuildbcd

# 重置网络设置
netsh int ip reset
netsh winsock reset

# 扫描远程计算机上的磁盘错误
chkdsk /scan

# 重置计算机，恢复出厂设置
systemreset

# 配置系统启动选项和服务
msconfig

# 修复驱动器错误
powershell -Command "Repair-Volume -DriveLetter C"

# 仅验证系统文件的完整性，不修复
sfc /verifyonly

# 显示系统的详细配置信息
systeminfo

系统激活代码

PowerShell脚本命令：

irm https://get.activated.win | iex

执行命令可以看到激活选项。选择 [1] HWID 用于 Windows 激活。选择 [2] Ohook 用于 Office 激活。

旧命令：irm https://massgrave.dev/get | iex

开源地址

新机常用软件安装

chorme浏览器：https://www.google.com/chrome/
7z解压工具：https://www.7-zip.org/
驱动总裁：https://www.sysceo.com/dc
图吧工具箱：https://www.tbtool.cn/
致美化：https://zhutix.com/
蓝屏分析工具：https://learn.microsoft.com/zh-cn/windows-hardware/drivers/debugger/
Windows官方系统工具箱：https://learn.microsoft.com/zh-cn/windows/powertoys/
文件搜索：https://www.listary.net/
文件备份和同步：https://freefilesync.org/

国内BT下载

BT下载：https://www.qbittorrent.org
比特彗星：https://www.bitcomet.com/cn
Windows镜像：https://next.itellyou.cn/
Windows镜像：https://www.hellowindows.cn/

系统安装工具

微PE：https://www.wepe.com.cn/ PE系统
https://www.ventoy.net/ 支持多系统
https://rufus.ie/zh/ 支持嵌入式烧录
https://etcher.balena.io/ 跨平台嵌入式烧录工具

官方Windows启动盘文件结构

/
├── boot/              <- 启动文件
├── efi/               <- UEFI 启动文件（适用于 UEFI 模式）
├── sources/           <- 安装源文件
│   ├── install.wim    <- 安装镜像文件
│   ├── boot.wim       <- 启动映像
├── autorun.inf        <- 自动运行配置文件
└── setup.exe          <- 安装程序

可以在启动盘中创建driver文件夹，驱动压缩包放至driver目录下，并将其解压，然后安装系统界面可以加载驱动程序，最好是将驱动解压缩并按硬件类别放置在子文件夹中。这样就可以实现离线安装网卡驱动了。

Git命令笔记

Wed, 08 Jan 2025 00:00:00 GMT

切换分支

# 基于当前分支创建dev新分支，并切换过去
git switch -c dev

# 把本地dev推送到远程，会自动在远程创建dev分支并建立跟踪关系
git push -u origin dev

重新上传代码

# 删除 Git 管理（可选）
rm -rf .git

# 初始化 Git
git init

# 创建并切换分支（可忽略）
git checkout -b main

# 添加所有文件
git add .

# 提交所有文件
git commit -m "add"

# 关联仓库
git remote add origin https://github.com/your-username/your-repo.git

# 强制推送
git push --force origin

项目添加子模块

ddns-go 为例，项目根目录执行。

git submodule add https://github.com/jeessy2/ddns-go.git
git commit -m "添加子模块"

然后提交并推送即可

更新所有子模块

项目根目录执行

git submodule update --remote --merge

然后正常提交

git add .
git commit -m "更新子模块"
git push

删除子模块

git submodule deinit -f ddns-go
git rm -f ddns-go
rm -rf .git/modules/ddns-go
rm -rf ddns-go
git commit -m "删除子模块"

锁定子模块到某个提交

cd ddns-go
git checkout <commit-hash>
cd ..
git add ddns-go
git commit -m "锁定子模块版本"

回滚

执行回滚操作后无法恢复

回滚到上一次提交

命令结尾的数字代表前几次

git reset --hard HEAD~1

强制推送

git push origin --force

或者回滚到指定提交

git reset --hard 6038e0a

配置代理

git config --global http.proxy http://127.0.0.1:10808
git config --global https.proxy http://127.0.0.1:10808

配置提交信息

git config --global user.name "user123"
git config --global user.email "user123@example.com"

如果需要更改登陆凭据，则需要在系统凭据管理器中移除旧凭据

查看配置

git config --global --list

数据库学习笔记

Wed, 08 Jan 2025 00:00:00 GMT

MySQL和MariaDB常用命令

数据库	操作	命令	描述
MySQL	更新软件包列表	`sudo apt update`	更新可用软件包列表
	安装 MySQL 服务器	`sudo apt install mysql-server`	安装 MySQL 服务器
	启动 MySQL 服务	`sudo systemctl start mysql`	启动 MySQL 服务
	检查 MySQL 服务状态	`sudo systemctl status mysql`	检查 MySQL 服务的运行状态
	运行安全安装脚本	`sudo mysql_secure_installation`	配置 MySQL 安全选项
	登录 MySQL	`sudo mysql -u root -p`	登录 MySQL，输入 root 用户密码
MariaDB	更新软件包列表	`sudo apt update`	更新可用软件包列表
	安装 MariaDB 服务器	`sudo apt install mariadb-server`	安装 MariaDB 服务器
	启动 MariaDB 服务	`sudo systemctl start mariadb`	启动 MariaDB 服务
	检查 MariaDB 服务状态	`sudo systemctl status mariadb`	检查 MariaDB 服务的运行状态
	运行安全安装脚本	`sudo mysql_secure_installation`	配置 MariaDB 安全选项
	登录 MariaDB	`sudo mysql -u root -p`	登录 MariaDB，输入 root 用户密码

功能分类	命令	描述
登录数据库	`mysql -u 用户名 -p`	登录 MySQL，使用指定的用户名，`-p` 会提示输入密码
显示数据库	`SHOW DATABASES;`	列出当前 MySQL 服务器中的所有数据库
使用数据库	`USE 数据库名;`	切换到指定数据库
创建数据库	`CREATE DATABASE 数据库名;`	创建一个新的数据库
删除数据库	`DROP DATABASE 数据库名;`	删除指定数据库
显示当前数据库	`SELECT DATABASE();`	显示当前正在使用的数据库
显示数据库表	`SHOW TABLES;`	列出当前数据库中的所有表
查看表结构	`DESCRIBE 表名;`	查看表的结构 (字段、类型、主键等)
创建表	`CREATE TABLE 表名 (字段1 数据类型, 字段2 数据类型, ...);`	创建一张表，指定列和数据类型
删除表	`DROP TABLE 表名;`	删除指定的表
插入数据	`INSERT INTO 表名 (字段1, 字段2, ...) VALUES (值1, 值2, ...);`	插入一条数据
查询数据	`SELECT 字段1, 字段2 FROM 表名 WHERE 条件;`	查询表中的数据，可以使用条件过滤
更新数据	`UPDATE 表名 SET 字段1=值1 WHERE 条件;`	更新指定的表数据
删除数据	`DELETE FROM 表名 WHERE 条件;`	删除符合条件的数据
显示创建表语句	`SHOW CREATE TABLE 表名;`	显示指定表的创建语句
清空表数据	`TRUNCATE TABLE 表名;`	清空表中的所有数据，但保留表结构
查看索引	`SHOW INDEX FROM 表名;`	查看表中所有的索引
创建索引	`CREATE INDEX 索引名 ON 表名 (字段);`	创建索引，提升查询速度
删除索引	`DROP INDEX 索引名 ON 表名;`	删除指定的索引
备份数据库	`mysqldump -u 用户名 -p 数据库名 > 备份文件.sql`	备份数据库，将数据库内容导出为 `.sql` 文件
恢复数据库	`mysql -u 用户名 -p 数据库名 < 备份文件.sql`	恢复数据库，将 `.sql` 文件导入指定数据库
创建用户	`CREATE USER '用户名'@'localhost' IDENTIFIED BY '密码';`	创建一个新的 MySQL 用户
删除用户	`DROP USER '用户名'@'localhost';`	删除 MySQL 用户
授权权限	`GRANT ALL PRIVILEGES ON 数据库名.* TO '用户名'@'localhost';`	授予用户对某个数据库的所有权限
显示用户权限	`SHOW GRANTS FOR '用户名'@'localhost';`	显示指定用户的权限
撤销权限	`REVOKE ALL PRIVILEGES ON 数据库名.* FROM '用户名'@'localhost';`	撤销指定用户对某个数据库的权限
刷新权限	`FLUSH PRIVILEGES;`	刷新 MySQL 权限表，使权限更改生效
查看服务器状态	`SHOW STATUS;`	查看 MySQL 服务器的状态和性能指标
查看数据库引擎	`SHOW ENGINES;`	显示 MySQL 支持的所有存储引擎
查看连接信息	`SHOW PROCESSLIST;`	显示当前 MySQL 的所有连接信息

大多数 SQL 语句都以分号 ; 结尾。
如果 MySQL 的权限系统发生变动（如添加或撤销用户权限），建议运行 FLUSH PRIVILEGES; 以刷新权限。

SQLite常用命令

功能分类	命令	描述
安装 SQLite	`sudo apt install sqlite3`	在 Linux（Ubuntu）中安装 SQLite
连接 SQLite	`sqlite3 数据库名.db`	连接到 SQLite 数据库（如果不存在则创建）
退出 SQLite	`.quit`	退出 SQLite 命令行工具
显示数据库表	`.tables`	显示当前数据库中的所有表
查看表结构	`.schema 表名`	显示指定表的创建语句
创建表	`CREATE TABLE 表名 (字段1 数据类型, 字段2 数据类型, ...);`	创建一张表，指定字段和数据类型
插入数据	`INSERT INTO 表名 (字段1, 字段2, ...) VALUES (值1, 值2, ...);`	插入一条数据
查询数据	`SELECT 字段1, 字段2 FROM 表名 WHERE 条件;`	查询表中的数据，可以使用条件过滤
更新数据	`UPDATE 表名 SET 字段1=值1 WHERE 条件;`	更新指定的表数据
删除数据	`DELETE FROM 表名 WHERE 条件;`	删除符合条件的数据
删除表	`DROP TABLE 表名;`	删除指定的表
查看索引	`PRAGMA index_list(表名);`	查看指定表的索引
创建索引	`CREATE INDEX 索引名 ON 表名 (字段);`	创建索引，提升查询速度
删除索引	`DROP INDEX 索引名;`	删除指定的索引
导出数据库	先`.output 文件名.sql` 再`.dump`	导出整个数据库，保存到指定的 SQL 文件
导入数据库	`.read 文件名.sql`	从 SQL 文件导入数据到当前数据库
打开数据库	`.open 数据库名.db`	打开或切换到另一个数据库

PostgreSQL常用命令

操作	命令	说明
安装 PostgreSQL	`sudo apt update` <br> `sudo apt install postgresql postgresql-contrib`	更新包管理器并安装 PostgreSQL 和相关插件
启动 PostgreSQL 服务	`sudo systemctl start postgresql`	启动 PostgreSQL 服务
重启 PostgreSQL 服务	`sudo systemctl restart postgresql`	重启 PostgreSQL 服务
停止 PostgreSQL 服务	`sudo systemctl stop postgresql`	停止 PostgreSQL 服务
检查 PostgreSQL 状态	`sudo systemctl status postgresql`	检查 PostgreSQL 服务的当前状态
设置 PostgreSQL 开机启动	`sudo systemctl enable postgresql`	设置 PostgreSQL 随系统启动自动运行
切换到 postgres 用户	`sudo -i -u postgres`	以 `postgres` 管理员用户登录
以指定用户登录	`psql -U 用户名 -d 数据库名`	以指定用户登录指定数据库
进入 PostgreSQL shell	`psql`	进入 PostgreSQL 的交互式命令行 shell
退出 PostgreSQL shell	`\q`	退出 PostgreSQL shell
查看数据库列表	`\l`	显示当前 PostgreSQL 实例中的所有数据库
创建数据库	`CREATE DATABASE 数据库名;`	创建一个新数据库
删除数据库	`DROP DATABASE 数据库名;`	删除指定的数据库
查看表格列表	`\dt`	显示当前数据库中的所有表格
创建表格	`CREATE TABLE 表格名 (列1 数据类型, 列2 数据类型, ...);`	在数据库中创建一个新表格，并定义其列和数据类型
插入数据	`INSERT INTO 表格名 (列1, 列2, ...) VALUES (值1, 值2, ...);`	向表格中插入一条数据记录
查询数据	`SELECT * FROM 表格名;`	从表格中查询所有数据
创建用户	`CREATE USER 用户名 WITH PASSWORD '密码';`	创建一个新用户，并为其设置密码
给用户授权	`GRANT ALL PRIVILEGES ON DATABASE 数据库名 TO 用户名;`	为指定的用户授权访问和操作指定数据库的所有权限
删除用户	`DROP USER 用户名;`	删除一个指定的用户
修改用户密码	`ALTER USER 用户名 WITH PASSWORD '新密码';`	修改指定用户的密码
备份数据库	`pg_dump 数据库名 > 备份文件名.sql`	将指定数据库备份到一个 `.sql` 文件中
还原数据库	`psql 数据库名 < 备份文件名.sql`	从备份的 `.sql` 文件还原数据库

wordpress和typecho和halo三种博客部署教程

Mon, 06 Jan 2025 00:00:00 GMT

使用Docker部署

Docker-compose部署wordpress

创建项目文件夹

mkdir wordpress && cd wordpress

创建docker-compose.yml文件并写入以下代码配置：

services:
  db:
    image: mysql:8.0
    volumes:
      - ./data/mysql:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: wordpressyyds
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
    networks:
      - wp

  wordpress:
    container_name: wordpress
    depends_on:
      - db
    image: wordpress:latest
    volumes:
      - ./data/wp:/var/www/html
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
    networks:
      - wp

networks:
  wp:

运行：

docker compose up -d

站点端口为 8000 后台路径 /wp-admin

修改docker中wordpress的上传限制。

进入 wordpress 容器

docker exec -it wordpress /bin/bash

wordpress 容器中的这个路径/usr/local/etc/php/，是存放 php.ini 的地方，但是默认是没有 php.ini 这个文件的，所以我们要通过复制一份php.ini-production文件，来生成 php.ini 文件。

cd /usr/local/etc/php/

cp php.ini-production php.ini

然后使用vim编辑器修改即可，如果没有则需要安装一下

更新及安装vim，使用如下代码

apt-get update
apt-get install vim

安装完成vim，现在就可以对php.ini进行编辑了。

vim php.ini

找到这几个变量，根据自己需求修改。

upload_max_filesize = 2M      # PHP最大上传文件大小
post_max_size = 8M            # 服务器最大数据量和文件大小
memory_limit = 128M           # PHP内存占用限制

最后一步！

重启wordpress

docker restart wordpress

wordpress启用redis缓存的部署方法

services:
  db:
    image: mysql:8.0
    volumes:
      - ./data/mysql:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: wordpressyyds
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
    networks:
      - wp

  wordpress:
    container_name: wordpress
    depends_on:
      - db
      - redis  # 添加redis
    image: wordpress:latest
    volumes:
      - ./data/wp:/var/www/html
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_REDIS_HOST: redis
    networks:
      - wp

  redis:
    image: redis:alpine
    container_name: redis
    restart: always
    networks:
      - wp

networks:
  wp:

在wp-config.php文件中添加以下代码

define('WP_REDIS_HOST', 'redis');
define('WP_CACHE', true);

// 确保添加在这个代码前面
/* That's all, stop editing! Happy blogging. */

容器内安装redis扩展

docker exec -it wordpress /bin/bash

apt-get update && apt-get install -y libz-dev libssl-dev

pecl install redis           # 这里直接一路回车

docker-php-ext-enable redis

重启容器

docker restart wordpress

插件商城搜索安装redis官方插件：Redis Object Cache 并启用redis缓存

修改后台路径插件WPS Hide Login
备份插件WPvivid
直播播放器插件SRS Player
优化性能缓存插件WP Fastest Cache
压缩图片和懒加载插件Smush

Docker部署halo博客

docker run -it -d --name halo -p 8090:8090 -v ./halo2:/root/.halo2 halohub/halo:2

地址： IP:8090

后台路径：/console

国内阿里云镜像

registry.fit2cloud.com/halo/halo

`docker-compose.yaml`部署

services:
  halo:
    image: halohub/halo:2
    restart: always
    depends_on:
      - mysql
    ports:
      - "8090:8090"
    volumes:
      - ./halo2:/root/.halo2
    command:
      - --spring.r2dbc.url=r2dbc:pool:mysql://mysql:3306/halo
      - --spring.r2dbc.username=halo
      - --spring.r2dbc.password=halo_password
      - --spring.sql.init.platform=mysql
      - --halo.external-url=http://公网IP:8090/

  mysql:
    image: mysql:5.7
    container_name: mysql
    environment:
      MYSQL_DATABASE: halo                  # 数据库名称
      MYSQL_USER: halo                      # 数据库用户名
      MYSQL_PASSWORD: halo_password         # 数据库密码
      MYSQL_ROOT_PASSWORD: halo_password    # 数据库root密码
    volumes:
      - ./data/mysql:/var/lib/mysql         # 映射数据库文件
    restart: always

Docker部署typecho

services:
  mysql:
    image: mysql:5.7
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: typechoPASSWORD
      MYSQL_DATABASE: typecho
      MYSQL_USER: typecho
      MYSQL_PASSWORD: typechoPASSWORD
    volumes:
      - ./mysql-data:/var/lib/mysql

  typecho:
    image: joyqi/typecho:nightly-php8.2-apache
    restart: always
    depends_on:
      - mysql
    ports:
      - "8080:80"
    environment:
      TIMEZONE: Asia/Shanghai
      TYPECHO_SITE_URL: https://your-domain.com
      TYPECHO_DB_HOST: mysql
      TYPECHO_DB_NAME: typecho
      TYPECHO_DB_USER: typecho
      TYPECHO_DB_PASS: typechoPASSWORD
    volumes:
      - ./typecho-data:/var/www/html

https://your-domain.com替换为你的网址，提前反代好。

（可选）重置后台管理员密码：删除站点目录的config.inc.php文件，然后重新安装选择保留原有数据库即可

主题文件目录`usr/themes`

安装git:

apt install git -y

下载主题：

git clone 主题Git仓库地址

复制到主题目录：

docker cp 主题文件路径 typecho-server:/app/usr/themes

仓库地址

frp内网穿透部署教程

Sun, 05 Jan 2025 00:00:00 GMT

Docker部署frp内网穿透

可选项：Docker CLI启动命令示例

docker run --restart=always --network host -d -v ./frps.toml:/etc/frp/frps.toml --name frps snowdreamtech/frps

`docker-compose`部署服务端（有公网IP）

创建配置文件

touch docker-compose.yml frps.toml

docker-compose.yaml配置

services:
  frps:
    image: snowdreamtech/frps
    container_name: frps
    network_mode: host
    volumes:
      - ./frps.toml:/etc/frp/frps.toml
    restart: always

服务端frps.toml配置

bindPort = 7000
auth.token = "admin123"

`docker-compose`部署客户端（内网）

创建配置文件

touch docker-compose.yml frpc.toml

docker-compose.yaml配置

services:
  frpc:
    image: snowdreamtech/frpc
    container_name: frpc
    network_mode: host
    volumes:
      - ./frpc.toml:/etc/frp/frpc.toml
    restart: always

客户端frpc.toml配置

serverAddr = "8.8.8.8"      # 公网服务器IP
serverPort = 7000           # 对接端口和frps一致
auth.token = "admin123"     # 认证令牌和frps一致

# 暴露SSH服务
[[proxies]]
name = "ssh"
type = "tcp"
localIP = "127.0.0.1"
localPort = 22            # 本地服务端口
remotePort = 6000         # 让frps暴露的公网端口

二进制文件部署

官方二进制文件下载地址：https://github.com/fatedier/frp/releases

配置文件和上面一样

服务端启动命令./frps -c ./frps.toml

客户端启动命令./frpc -c ./frpc.toml

DNS64和纯IPV6网络使用技巧

Sat, 04 Jan 2025 00:00:00 GMT

NAT64服务让纯V6网络支持访问纯V4站点

众所周知纯v6网络想要访问仅支持v4的网站是无法访问的，尤其是github.com和api.github.com居然不支持ipv6，所以很多人都选择使用一键warp脚本，这个脚本很简单方便，但是对于我这种有洁癖的人有点难受，因为会装一堆东西，想卸载干净也很麻烦。所以我就找到了最简单的方法，当然warp一键脚本还是很好用的，但是我图简单，就使用NAT64服务了，唯一的不足的是提供公共免费的NAT64很少，下面是我找到的可用的DNS。

原理如下：

NAT64的作用就是把IPv6网络的数据转换为IPv4网络的数据。它通过将IPv6请求中的地址转换成IPv4地址，使得IPv6设备可以通过NAT64网关访问只支持IPv4的服务器和网站。简单来说，NAT64在IPv6和IPv4之间充当了一个桥梁，负责地址和数据包的转换。

配置命令如下：

sudo tee /etc/resolv.conf <<EOF
nameserver 2a00:1098:2b::1
nameserver 2a00:1098:2c::1
nameserver 2a01:4f9:c010:3f02::1
nameserver 2a01:4f8:c2c:123f::1
EOF

测试能否访问仅支持ipv4的站点：

curl -I ipv4.google.com

温馨提示

以上DNS服务自于 https://nat64.net
更多DNS64服务来自互联网
以上都是公益DNS64，超大流量使用有限制，个人使用是完全足够的，请勿滥用

永久生效的配置方法

1：编辑 /etc/systemd/resolved.conf 文件：

sudo vim /etc/systemd/resolved.conf

2：添加或修改以下内容：

[Resolve]
DNS=2a00:1098:2b::1 2a00:1098:2c::1 2a01:4f9:c010:3f02::1 2a01:4f8:c2c:123f::1

3：重启 systemd-resolved 服务：

sudo systemctl restart systemd-resolved

简单方便的web服务caddy

Fri, 03 Jan 2025 00:00:00 GMT

介绍

caddy是和nginx一样的强大的web服务，使用go语言编写并且也是完全开源，优点是配置简单，并且自动申请并部署SSL证书，无需手动配置，大大简化了运维工作，对小白非常友好，唯一的缺点是并发量稍微不及nginx，但是这点缺点几乎可以忽略不记。除非你的网站流量高的离谱，对于一般的企业是达不到那种流量的，个人就更达不到的。

我的使用场景

除了一般的网页服务，我经常配合docker使用，由于我比较喜欢用docker，所以经常使用caddy 或者 nginx-proxy-manager来反代docker的端口，他俩使用都很简单，本文着重介绍caddy。

1：安装caddy

apt安装。

sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https curl

curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg

curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list

sudo apt update

sudo apt install caddy -yq

2：配置示例

配置路径 /etc/caddy/Caddyfile

将域名example.com反向代理到本地8080端口

caddyfile配置

example.com {
    encode gzip
    reverse_proxy localhost:8080
}

将域名example.com代理到网站目录/var/www

caddyfile配置

example.com {
    root * /var/www
    encode zstd gzip
    file_server
}

3：常用命令

启动caddy

sudo systemctl restart caddy

caddy会占用80和443端口，api服务会占用本地2019端口，启动后会自动接管域名的证书管理，自动申请SSL证书和开启HTTPS加密。Caddy 默认使用 Let's Encrypt 作为证书颁发机构（CA）来自动签发 SSL/TLS 证书，Let's Encrypt申请证书有频率限制，如果你是测试使用，可以在caddy配置文件的域名指定为http格式，不开启HTTPS加密，例如caddy配置中域名可以这样写 http://example.com

查看运行状态

systemctl status caddy

检查配置语法是否正确

caddy validate --config /etc/caddy/Caddyfile

停止服务

sudo systemctl stop caddy

完全卸载

sudo apt-get purge --auto-remove caddy

证书路径

/var/lib/caddy/.local/share/caddy/certificates/acme-v02.api.letsencrypt.org-directory

第一篇博客

Wed, 01 Jan 2025 00:00:00 GMT

博客又搬家了

2025年，新的一年，新的开始。

心血来潮，又开始折腾网站了，继之前的阿里云3M小水管部署的wordpress，感觉越来越卡，于是这次使用纯静态网站，网站托管在vercel，使用的fuwari主题。之前的wordpress也没怎么发布文章，就直接复制粘贴过来了

终于可以把服务器的钱省了，写作时就直接在Github上用MD语法写作，还是挺方便的，以后就在这里更新一些日常了，还有一些docker教程，因为我是docker的忠实粉，万物皆可docker，不管什么项目我都喜欢用docker部署，哈哈。