{ "version": "https://jsonfeed.org/version/1", "title": "Skyone Blog", "home_page_url": "https://blog.skyone.dev/", "feed_url": "https://blog.skyone.dev/feed.json", "author": { "name": "Skyone", "url": "https://blog.skyone.dev/about/" }, "items": [ { "id": "https://blog.skyone.dev/2026/nextjs-static-image-optimization/", "content_html": "

RSS阅读器可能无法处理 LaTeX 数学公式、代码块高亮等高级功能，请阅读原文以获取最佳阅读体验。

如你所见，我的 Blog 是基于 Next.js 开发的，使用的是静态导出扔到 Cloudflare Pages，省心省事。

\n

我不使用图床，习惯将图片和文章一起在同一个仓库里管理。然而 Next.js 的图片优化在静态导出模式下是不可用的。\n后端是纯静态的，确实无法在运行时生成适合浏览器的图片。

\n

但图片优化真的不能做吗？显然不是，下面我将分享我的做法。

\n\n

优化思路

\n

既然是静态构建，没有运行时，那就换一种思路：我们可用通过暴力的方法，在构建阶段将所有可能用到的图片类型全部构建好，\n前端选择最合适的图片显示。

\n

\"HTML

\n

\"输出文件示例\"

\n

构建阶段

\n

我们先梳理一下 next.js 官方的图片优化实现：next-image-loader。

\n

这是一个兼容 webpack 和 turbopack 的插件。它做的工作非常简单：当产生 import \"xxx.png\" 导入图片时，\n告诉 webpack 如何将二进制的图片映射为合法的 JS 代码。

\n

具体来说，next-image-loader 并不直接处理图片，而是根据图片的路径，生成形如 /_next/image?url= 的链接，\n运行时处理 /_next/image api，动态优化和缓存图片。

\n

那么思路打开，我们自行实现自己的 next-image-loader，在构建阶段真正的、优化后的图片，并生成形如 /_next/image/xxxx.avif\n（也就是前面构建的图片）。

\n
/**\n * @param buffer {Buffer}\n * @returns {Promise<string>}\n */\nasync function loader(buffer) {\n    const callback = this.async();\n    const {compilerType, isDev, assetPrefix} = this.getOptions();\n    const resourcePath = this.resourcePath;\n}\n
\n

webpack 的 loader 其实非常简单，接受源文件的内容，输出 JS 代码。现在我们有了原始图片的 Buffer，实现一个图片优化器

\n
const optimizer = async (format, buffer, option = undefined) => {\n    const optimized = await sharp(buffer, option)[format]().toBuffer();\n    if (compilerType === \"client\") {\n        const output = `${interpolatedName}.${format}`;\n        this.emitFile(output, optimized, null);\n    } else {\n        const output = path.join(\n            \"..\",\n            isDev || compilerType === \"edge-server\" ? \"\" : \"..\",\n            `${interpolatedName}.${format}`,\n        );\n        this.emitFile(output, optimized, null);\n    }\n    return `${outputPath}.${format}`;\n};\n
\n

就是简单的使用 sharp.js 转换图片格式，然后生成对应格式的输出文件的路径。

\n

可以看到，上面的代码里有一串计算最终图片位置的判断。老实说我也看不懂这是什么玩意，我只是根据原版\nnext-image-loader 抄来的。

\n

最后组装一下代码，动图生成 webp + gif，静态图片提供 avif + webp + png。

\n

至于文件名称，考虑到后续更改文件方便，我采用了文件路径 hash + 文件内容 hash 作为命名。

\n
async function interpolateName(filepath, buffer) {\n    const pathDigest = crypto.createHash(\"sha256\")\n        .update(Buffer.from(filepath, \"utf-8\"))\n        .digest(\"hex\")\n        .slice(0, 8);\n    const digest = crypto.createHash(\"sha256\")\n        .update(buffer)\n        .digest(\"hex\")\n        .slice(0, 8);\n    return `/static/media/${pathDigest}_${digest}`;\n}\n
\n
\n
\n 点击查看完整代码\n
import crypto from \"crypto\";\nimport isAnimated from \"is-animated\";\nimport path from \"path\";\nimport sharp from \"sharp\";\n\nasync function interpolateName(filepath, buffer) {\n    const pathDigest = crypto.createHash(\"sha256\")\n        .update(Buffer.from(filepath, \"utf-8\"))\n        .digest(\"hex\")\n        .slice(0, 8);\n    const digest = crypto.createHash(\"sha256\")\n        .update(buffer)\n        .digest(\"hex\")\n        .slice(0, 8);\n    return `/static/media/${pathDigest}_${digest}`;\n}\n\nconst BLUR_IMG_SIZE = 8;\n\nasync function getBlurImage(image, metadata) {\n    let blurWidth;\n    let blurHeight;\n    if (metadata.width >= metadata.height) {\n        blurWidth = BLUR_IMG_SIZE;\n        blurHeight = Math.max(Math.round(metadata.height / metadata.width * BLUR_IMG_SIZE), 1);\n    } else {\n        blurWidth = Math.max(Math.round(metadata.width / metadata.height * BLUR_IMG_SIZE), 1);\n        blurHeight = BLUR_IMG_SIZE;\n    }\n    const blur = await image\n        .resize({\n            width: blurWidth,\n            height: blurHeight,\n        })\n        .blur()\n        .png()\n        .toBuffer();\n    const dataURL = `data:image/png;base64,${blur.toString(\"base64\")}`;\n    return {\n        dataURL,\n        width: blurWidth,\n        height: blurHeight,\n    };\n}\n\nasync function loader(buffer) {\n    const callback = this.async();\n    const {compilerType, isDev, assetPrefix} = this.getOptions();\n    const resourcePath = this.resourcePath;\n\n    const interpolatedName = await interpolateName(resourcePath, buffer);\n    const outputPath = assetPrefix + \"/_next\" + interpolatedName;\n\n    const metadata = await sharp(buffer).metadata();\n    const blur = await getBlurImage(sharp(buffer), metadata);\n\n    const optimizer = async (format, buffer, option = undefined) => {\n        const optimized = await sharp(buffer, option)[format]().toBuffer();\n        if (compilerType === \"client\") {\n            const output = `${interpolatedName}.${format}`;\n            this.emitFile(output, optimized, null);\n        } else {\n            const output = path.join(\n                \"..\",\n                isDev || compilerType === \"edge-server\" ? \"\" : \"..\",\n                `${interpolatedName}.${format}`,\n            );\n            this.emitFile(output, optimized, null);\n        }\n        return `${outputPath}.${format}`;\n    };\n\n    const srcset = [];\n    if (isAnimated(buffer)) {\n        for (const format of [\"webp\", \"gif\"]) {\n            srcset.push({\n                minetype: `image/${format}`,\n                src: await optimizer(format, buffer, {animated: true}),\n            });\n        }\n    } else {\n        for (const format of [\"avif\", \"webp\", \"png\"]) {\n            srcset.push({\n                minetype: `image/${format}`,\n                src: await optimizer(format, buffer),\n            });\n        }\n    }\n\n    const exportData = JSON.stringify({\n        src: `${outputPath}.webp`,\n        height: metadata.height,\n        width: metadata.width,\n        blurDataURL: blur.dataURL,\n        blurWidth: blur.width,\n        blurHeight: blur.height,\n        srcset: srcset,\n    });\n\n    return callback(null, `export default ${exportData}`);\n}\n\nexport const raw = true;\n\nexport default loader;\n
\n
\n
\n

然后配置 next.js 以使用我们自定义的 loader ：

\n
const nextConfig: NextConfig = {\n    // ... others\n    webpack(config, context) {\n        const imageLoader = config.module.rules.find((r: any) => r.loader === \"next-image-loader\");\n        if (imageLoader) {\n            imageLoader.loader = require.resolve(\"./plugins/image/loader.mjs\");\n        }\n        return config;\n    },\n};\n
\n

类型定义

\n

仅仅配置好 webpack 可不够，TypeScript 并不知道我们改写了导入图片时的行为，我们需要覆盖 next.js 的类型定义，以 png 为例：

\n
declare module \"*.png\" {\n    export type SrcSetRecord = {\n        mimetype: string;\n        src: string;\n    }\n    export type SrcSet = Array<SrcSetRecord>\n    export type LoaderImage = {\n        src: string;\n        width: number;\n        height: number;\n        blurDataURL: string;\n        blurWidth: number;\n        blurHeight: number;\n        srcset: SrcSet;\n    }\n    const image: LoaderImage;\n    export default image;\n}\n
\n

前端部分

\n

现代浏览器给了很方便的 <picture> 和 <source> 标签。

\n
<picture>\n    <source type=\"image/avif\" src=\"/img/example.avif\">\n    <source type=\"image/webp\" src=\"/img/example.webp\">\n    <img alt=\"example\" src=\"/img/example.png\">\n</picture>\n
\n

简单来说，浏览器会从上往下尝试 source[@type]，找到第一个支持的格式，使用该格式的图片替换 img 标签的 src。\n这样就实现了自动使用合适的图片格式。

\n

此外，source 标签还支持根据媒体查询进行匹配，找到最适合屏幕的图片尺寸，但实际上收益不大，我没有用这个功能。

\n
interface PictureProps extends DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {\n    srcset: SrcSet;\n}\n\nfunction Picture({srcset, ...other}: PictureProps) {\n    const optimized = [...srcset] as SrcSet;\n    const origin = optimized.pop()!;\n\n    return (\n        <picture>\n            {optimized.map(({mimetype, src}) => (\n                <source key={mimetype} type={mimetype} srcSet={src}/>\n            ))}\n            <img\n                {...other}\n                src={origin.src}/>\n        </picture>\n    );\n}\n
\n

结束

\n

非常简单的一个实现，不清楚为什么 next.js 不不支持，也许是为了推 Vercel 的 edge function 服务？

", "url": "https://blog.skyone.dev/2026/nextjs-static-image-optimization/", "title": "为 Next.js 静态导出实现图片优化", "summary": "Next.js 静态导出无法使用内置图片优化？本文通过自定义 Webpack Loader，在构建阶段使用 Sharp 生成 AVIF、WebP 等格式，并结合 picture 标签实现纯静态站点的图片优化。", "image": "https://blog.skyone.dev/_next/static/media/89176d6f_c74d0487.webp", "date_modified": "2026-07-01T00:00:00.000Z", "author": { "name": "Skyone", "url": "https://blog.skyone.dev/about/" } }, { "id": "https://blog.skyone.dev/2026/self-hosted-services-with-mtls/", "content_html": "

RSS阅读器可能无法处理 LaTeX 数学公式、代码块高亮等高级功能，请阅读原文以获取最佳阅读体验。

飞牛OS 路径穿越漏洞敲响警钟：仅靠强密码无法防御软件漏洞。

\n

本文详解如何用 mTLS（双向 TLS 认证）保护自建 NAS、Web 服务、API 等，包含反向代理配置（以 Traefik 为例）、OpenSSL 生成证书、浏览器/App 导入证书的指南。

\n\n

引子：强密码==安全？

\n

相信各位都有所耳闻，最近，国产NAS系统飞牛OS爆出了一个高危漏洞：

\n
\n

2026年初，多位用户和安全社区相继披露：飞牛OS的某些版本存在严重的路径穿越（Path Traversal）0day漏洞。攻击者无需任何身份验证，只需构造特定的URL请求，就能直接读取NAS设备上的任意文件——从系统配置文件、用户存储的照片视频、私钥证书，到家庭相册、财务表格、个人隐私文档……全部暴露在黑客眼前。简单来说，你的NAS瞬间变成了一个“无需密码的公开网盘”，黑客想看什么就能看什么，想下载什么就能下载什么。

\n

这个漏洞影响范围极广，尤其是那些将飞牛NAS通过公网端口、官方内网穿透（fn connect）等方式暴露到互联网上的用户，几乎处于完全裸奔状态。社区反馈显示，大量设备在漏洞曝光前已被批量扫描和利用，甚至出现数据被窃取、设备被植入后门、沦为僵尸网络的情况。飞牛官方随后通过静默推送修复补丁（例如1.1.15及更高版本）试图阻断攻击链，但早期缺乏及时公告、漏洞细节披露迟缓，也引发了不少用户对厂商安全响应态度的质疑。

\n
\n

这件事给我们敲响了警钟：仅仅依赖“强密码 + 登录认证”并不一定安全。

\n

为了方便访问，自建服务（NAS、个人云盘、家庭服务器、内部管理后台等）大多跑在公网上~~（当然你自建VPN也可以）~~。软件本身再怎么加固账号密码、再怎么限制弱口令、再怎么开启两步验证，一旦程序逻辑出现哪怕一个低级但致命的漏洞（如路径穿越、命令注入、认证绕过），攻击者就能完全绕过表层的“密码防线”，直接拿到最高权限的数据访问能力。飞牛OS的这次事件，正是最典型的“认证再强也挡不住代码漏洞”的案例。

\n

密码可以改，密钥可以重置，但如果攻击者已经提前把你的所有文件都拷贝走，一切防护都成了马后炮。

\n

那么，面对这类“软件自身漏洞导致的越权访问”，我们还能做些什么？有没有一种机制，能在应用层认证之外再加一道更强硬、更底层的防护墙，让即便软件本身出现严重漏洞，黑客也很难真正拿到有效数据？

\n

答案就是本文要重点探讨的：mTLS（Mutual TLS，双向证书认证）。

\n

mTLS 简介

\n

Mutual TLS（简称 mTLS，双向 TLS 认证），也叫双向证书认证，是 TLS 协议的一种扩展认证模式。

\n
\n

默认情况下，TLS 协议只通过 X.509 证书向客户端证明服务器的身份，而客户端到服务器的身份验证则交给应用层处理（比如用户名/密码、Token 等）。不过 TLS 本身也支持通过客户端侧的 X.509 证书来实现客户端身份认证。只不过因为需要提前为每个客户端分发证书、管理证书生命周期，而且对普通终端用户来说体验较差（不像输入密码那么简单），所以在面向消费者的互联网应用中几乎从不使用这种方式。

\n

因此，**mTLS（Mutual TLS）更多出现在企业到企业（B2B）**场景中：客户端数量有限、类型相对统一（大多是程序、脚本、微服务、内部工具等）、运维负担可控，同时对安全性的要求远高于消费级环境。在这类场景下，mTLS 能让通信双方在 TLS 握手阶段就完成双向强身份验证——服务器验证客户端证书，客户端也验证服务器证书——从而建立起真正的“双方互信”通道。

\n

——来自维基百科 - Mutual authentication

\n
\n

简单一句话总结就是：

\n

mTLS = 标准 TLS（服务器证书认证） + 强制要求客户端也提供并验证有效的 X.509 证书。

\n

其工作原理如图所示：

\n

\"mTLS

\n

这种机制把身份验证从“应用层”下沉到了“传输层加密协议”本身，极大降低了应用代码出现漏洞时被绕过的风险。正如飞牛OS事件所暴露的：即使应用层认证逻辑被路径穿越或命令注入击穿，只要连接本身没有通过 mTLS 建立，黑客就能直接发起请求；反之，如果连接必须持有有效客户端证书才能建立，攻击者即便知道了 URL 和漏洞，没有提供正确的客户端证书，连 TLS 握手都完不成，何谈漏洞利用？

\n

本文不会过多纠结于 mTLS 的密码学细节或理论模型，而是聚焦于最实操的部分：

\n\n

为自建服务配置 mTLS

\n

生成自签名根证书

\n

在 mTLS 环境中，我们需要一个根证书（Root CA） 来签发服务器证书和客户端证书。这个根证书是整个信任链的起点，自签名即可（因为我们自己控制信任，不需要公网 CA）。

\n

这一步非常简单，并且只需要执行一次，使用 OpenSSL 生成自签名的根 CA 证书和私钥：

\n
openssl req -new -x509 -nodes -sha256 -days 3650 -newkey rsa:4096 \\\n  -keyout ca.key -out ca.crt \\\n  -subj \"/C=US/O=OrganizationName/CN=CommonName\"\n
\n

解释一下参数：

\n\n

执行后，你会得到两个文件：

\n\n

这两个文件务必好好保存，以后签子证书要用到。

\n

配置反向代理

\n

这里主要以 Traefik 为例，如果你使用 Nginx，参考 Nginx - Module ngx_http_ssl_module。如果你对Traefik不了解，可以看看我的另一篇文章：使用 Traefik 作为 Docker 的反向代理

\n

首先，需要在动态配置文件中定义 mTLS 策略，创建或编辑 /etc/traefik/dynamic.yml（或你使用的动态配置文件），添加如下键值对：

\n
tls:\n  options:\n    # 自定义一个名字，例如 mtls\n    mtls:\n      clientAuth:\n        caFiles:\n          # 前面生成的根 CA 证书路径（容器内路径）\n          - /etc/traefik/ca/ca.crt\n        # 表示强制要求客户端提供证书且必须验证通过\n        clientAuthType: RequireAndVerifyClientCert\n
\n

然后在 entrypoint 或 router 上启用该 mTLS 策略即可，Traefik 的配置非常灵活，你可以选择在 entrypoint 上启用 mTLS，这样其下的全部 router 都会应用此规则。相反，如果你只希望部分域名启用 mTLS，只需在其对应的 router 下配置 mTLS。

\n
    \n
  1. \n

    全局强制所有 HTTPS 流量都走 mTLS

    \n
    entryPoints:\n  websecure:\n    address: \":443\"\n    http:\n      tls:\n        # mtls 是签名 tls 配置的名称\n        # file 是动态配置文件的名称\n        options: mtls@file\n
    \n
    2. \n
  2. \n

    只对特定服务启用 mTLS

    \n
    http:\n  routers:\n    jellyfin-admin:\n      rule: \"Host(`admin.mydomain.com`)\"\n      service: jellyfin\n      entryPoints:\n        - websecure\n      tls:\n        # 只在此 router 启用 mTLS\n        options: mtls@file\n    nextcloud:\n      rule: \"Host(`cloud.mydomain.com`)\"\n      service: nextcloud\n      entryPoints:\n        - websecure\n      tls:\n        # 同样启用\n        options: mtls@file\n
    \n
    3. \n
\n

这样服务端的配置就完成啦~

\n

生成客户端子证书

\n

客户端证书（也叫子证书、Leaf Client Cert）是由我们刚刚生成的根 CA（ca.crt / ca.key） 签发的，用于证明客户端的身份。它与根 CA 的关系是信任链： 根 CA 是信任锚点 → 签发客户端证书 → Traefik 只信任由这个根 CA 签发的证书 → 实现 mTLS 双向强认证。

\n

考虑到生成证书的命令参数过多，非常麻烦，我写了一个脚本 make-client.sh，建议直接放到存放 ca.crt 和 ca.key 的目录下运行（例如 ~/ca/），修改脚本开头的几个变量，每次为一个新设备运行一次即可。

\n
#!/usr/bin/env bash\n\norganization_name=\"Skyone\"       # 你的组织/个人的标识\nclient_name=\"Windows 10 laptop\"  # 设备/用途的描述性名称\nclient_name_file=\"win10laptop\"   # 保存的文件名（简短且无空格）\n\nset -e\n\n# 创建客户端私钥（RSA 4096）\nopenssl genrsa -out client.key 4096\n\n# 创建客户端的证书请求 (CSR)\nopenssl req -new -sha256 \\\n  -key client.key -out client.csr \\\n  -subj \"/C=US/O=$organization_name/CN=$organization_name $client_name mTLS Client\"\n\n# 用 CA 给客户端证书签名, 730 天（约 2 年）\nopenssl x509 -req -sha256 -days 730 \\\n  -in client.csr -CA ca.crt -CAkey ca.key \\\n  -CAcreateserial -out client.crt\n\n# 导出 PKCS#12/.p12 证书 （不带证书链）\n# 便于 Windows / macOS / iOS / Android 导入\nopenssl pkcs12 -export \\\n  -inkey client.key -in client.crt \\\n  -out \"client-$client_name_file.p12\" -name \"$client_name_file\"\n\nrm client.csr client.key client.crt\n
\n

运行时会提示你输入导出密码，这是导入到系统密钥链/浏览器时用的密码，建议设置一个临时好记的密码，导入完设备后就可以删除 .p12 文件了。

\n

导入客户端证书

\n

我们刚刚通过 make-client.sh 生成了 PKCS#12 格式的客户端证书文件（.p12），里面同时包含了私钥和证书本身。现在需要将这个 .p12 文件安全拷贝到目标设备上，然后导入系统/浏览器的证书存储中。导入成功后，访问 mTLS 保护的服务时，浏览器或客户端工具就会自动（或手动选择）使用这个证书完成双向认证。

\n

Windows 设备

\n
    \n
  1. 将 .p12 文件拷贝到 Windows 电脑（U 盘、局域网共享、加密邮件等方式，完成后立即删除源文件）。
    2. \n
  2. 双击 .p12 文件，系统会启动证书导入向导。
    3. \n
  3. 在“证书存储位置”页面，选择 当前用户 → 下一步。
    4. \n
  4. 输入导入时设置的导出密码（脚本运行时提示输入的那个密码）。
    5. \n
  5. 存储位置选择 个人（Personal / My） → 下一步 → 完成。
    6. \n
  6. 导入成功后，可通过 certmgr.msc（Win + R 输入）打开证书管理器，在“个人 → 证书”下看到刚导入的证书（名称通常是你设置的 $organization_name $client_name mTLS Client）。
    7. \n
\n

macOS 设备

\n
    \n
  1. 双击 .p12 文件，系统会自动打开“钥匙串访问”应用。
    2. \n
  2. 输入导出密码，钥匙串会提示选择存储位置（推荐“登录”钥匙串）。
    3. \n
  3. 导入后，在钥匙串访问中搜索证书名称，可在“我的证书”分类下找到。
    4. \n
\n

iOS / iPadOS

\n
    \n
  1. 进入 设置 → 通用 → VPN 与设备管理 → 已下载的描述文件（或直接搜索“证书”）。
    2. \n
  2. 安装描述文件，输入导出密码。
    3. \n
  3. 安装完成后，证书会出现在 设置 → 通用 → 关于本机 → 证书信任设置（部分版本）或直接在 Safari 使用时自动弹出选择。
    4. \n
\n

Android 设备

\n

不同厂商 ROM 路径略有差异（小米/华为/One UI 等可能名字不同），以Pixel手机为例：

\n
    \n
  1. 进入 设置→安全与隐私→更多安全和隐私设置 → 加密与凭据（或直接搜索“证书”）。
    2. \n
  2. 选择“安装证书”→ 找到 .p12 文件，输入导出密码。
    3. \n
  3. 安装完成后，证书会出现在“用户证书”列表中。
    4. \n
\n

使用浏览器测试

\n

访问被 mTLS 保护的站点，浏览器会弹出“选择证书”，直接选择刚导入的证书（通常显示你设置的 CN 名称，如 “Skyone Windows 10 laptop mTLS Client”），点击确定。

\n

通过认证后，一切操作都不会有影响。因为 mTLS 是在 TLS 握手时实现的，而 HTTP 协议位于 TLS 内，应用程序根本感受不到 mTLS 的存在，后端程序不需要任何修改。

\n

\"浏览器选择客户端证书\"

\n

一些特定应用的说明

\n

启用 mTLS 后，并非所有客户端和服务都会“自动适配”——这取决于应用本身如何处理 TLS 连接和客户端证书。以下我遇见过的常见自建服务场景的实际表现与应对方式，供参考。

\n

浏览器访问的 Web 应用

\n

几乎所有基于浏览器的 Web 应用（包括但不限于我测试过的： Jellyfin、Immich、Nextcloud、Home Assistant、Photoprism、FileBrowser、Portainer、Traefik Dashboard、Vaultwarden、Bitwarden Web 等） 都会照常工作，就像 mTLS 不存在一样，服务端不需要任何配置。

\n

现代浏览器（Chromium based、Firefox、Safari）在 TLS 握手阶段都能自动处理客户端证书。

\n

诸如 Bitwarden 的浏览器插件也是如此，因为它们本身也就是一个 Web 页面。

\n

原生 App

\n

移动端 App 的证书处理能力差异很大，主要取决于其底层网络库：

\n", "url": "https://blog.skyone.dev/2026/self-hosted-services-with-mtls/", "title": "使用 mTLS 保护自建服务", "summary": "飞牛OS 路径穿越漏洞敲响警钟：仅靠强密码无法防御软件漏洞。本文详解如何用 mTLS（双向 TLS 认证）保护自建 NAS、Web 服务、API 等，包含反向代理配置（以 Traefik 为例）、OpenSSL 生成证书、浏览器/App 导入证书的指南。", "image": "https://blog.skyone.dev/_next/static/media/e5f7868d_8b9b90ae.webp", "date_modified": "2026-03-11T00:00:00.000Z", "author": { "name": "Skyone", "url": "https://blog.skyone.dev/about/" } }, { "id": "https://blog.skyone.dev/2025/tinyauth-traefik/", "content_html": "

RSS阅读器可能无法处理 LaTeX 数学公式、代码块高亮等高级功能，请阅读原文以获取最佳阅读体验。

你是否遇到过需要为不支持认证的服务添加认证的情况？TinyAuth 是一个轻量级的认证代理，可以帮助你为这些服务添加基本的认证。本文将介绍如何使用 TinyAuth 和 Traefik 实现简单的认证代理。

\n

TinyAuth 支持包括 GitHub OAuth、简单密码认证在内的多种认证方式，这里我使用 Pocket ID 为例。

\n\n

准备工作

\n

在开始之前，请确保你已经正确配置了 Traefik，并且可以通过 Traefik 访问你的服务。如果你还没有配置 Traefik，可以参考 使用 Traefik 作为 Docker 的反向代理 进行配置。

\n

此外，我这里使用 Pocket ID 作为认证方式，你可以自行选择其他认证方式，参考 TinyAuth 的文档。

\n

现在假设有一个 echo 服务，需要添加认证，其域名是 echo.skyone.dev，我们需要在 .skyone.dev 下的任意子域名上部署 TinyAuth（与 echo 服务的域名在同一个域下），这里我使用 auth.skyone.dev。

\n

在 Pocket ID 中注册应用

\n

首先，你需要访问 Pocket ID 的管理面板，在 OIDC Clients 标签页中点击 Add OIDC Client。会出现一个新菜单，提示你提供一些信息。我们只需要设置其中的两个字段：

\n
    \n
  1. Client ID: 这是你的应用的唯一标识符，可以随意设置。
    2. \n
  2. Redirect URI: 这是 TinyAuth 的回调地址，格式为 https://tinyauth.domain/api/oauth/callback/generic 。例如，我的回调地址是 https://auth.skyone.dev/api/oauth/callback/generic 。
    3. \n
\n

\"创建

\n

其他的选项都可以保持默认。创建完成后，你会得到一个 Client ID 和 Client Secret，这两个值稍后会用到。

\n

\"创建

\n

部署 TinyAuth

\n

接下来，我们需要配置 TinyAuth。首先，创建一个名为 tinyauth 的 Docker Compose 文件，内容如下：

\n
name: tinyauth\n\nservices:\n  tinyauth:\n    image: ghcr.io/steveiliop56/tinyauth:v3\n    container_name: tinyauth\n    restart: unless-stopped\n    networks:\n      - proxy\n    env_file:\n      - docker.env\n    volumes:\n      - /var/run/docker.sock:/var/run/docker.sock:ro\n    labels:\n      - \"traefik.enable=true\"\n      - \"traefik.docker.network=proxy\"\n      - \"traefik.http.routers.tinyauth.rule=Host(`tinyauth.skyone.dev`)\"\n      - \"traefik.http.routers.tinyauth.entrypoints=websecure\"\n      - \"traefik.http.routers.tinyauth.service=tinyauth\"\n      - \"traefik.http.services.tinyauth.loadBalancer.server.port=3000\"\n      - \"traefik.http.middlewares.tinyauth.forwardAuth.address=http://tinyauth:3000/api/auth/traefik\"\n\nnetworks:\n  proxy:\n    external: true\n
\n

这里需要修改的部分是 tinyauth.skyone.dev，将其替换为你自己的域名。

\n

这里 labels 的最后一行为 Traefik 指定了一个中间件 tinyauth，这个中间件会在请求到达 tinyauth 服务之前进行认证，http://tinyauth:3000 是 TinyAuth 在容器内部的地址。

\n

接下来，创建一个名为 docker.env 的环境变量文件，内容如下：

\n
# --- Required Environment Variables ---\nTINY_AUTH_DOMAIN=\"tinyauth.example.com\"\nPOCKET_ID_DOMAIN=\"pocket-id.example.com\"\n\nPOCKET_ID_NAME=\"Pocket ID\"\nSECRET=some-random-32-chars-string\nGENERIC_CLIENT_ID=\"your-pocket-id-client-id\"\nGENERIC_CLIENT_SECRET=\"your-pocket-id-client-secret\"\n\n# --- DO NOT EDIT BELOW THIS LINE ---\nAPP_URL=\"https://${TINY_AUTH_DOMAIN}\"\nGENERIC_AUTH_URL=\"https://${POCKET_ID_DOMAIN}/authorize\"\nGENERIC_TOKEN_URL=\"https://${POCKET_ID_DOMAIN}/api/oidc/token\"\nGENERIC_USER_URL=\"https://${POCKET_ID_DOMAIN}/api/oidc/userinfo\"\nGENERIC_SCOPES=\"openid email profile groups\"\nGENERIC_NAME=\"${POCKET_ID_NAME}\"\n
\n

注释已经写得很清楚了，这里需要修改的部分是：

\n\n

编辑好 docker.env 后，运行 docker compose up -d 即可启动。

\n

为 echo 服务启用认证代理

\n

接下来，我们需要为 echo 服务添加 Traefik 的 labels，以便使用 TinyAuth 进行认证。echo 服务的 Docker Compose 文件如下：

\n
name: echo\n\nservices:\n  echo:\n    container_name: echo\n    image: luotianyi/echo:latest\n    restart: unless-stopped\n    networks:\n      - proxy\n    labels:\n      - \"tinyauth.domain=echo.skyone.dev\"\n      - \"traefik.enable=true\"\n      - \"traefik.http.routers.echo.entrypoints=websecure\"\n      - \"traefik.http.routers.echo.rule=Host(`echo.skyone.dev`)\"\n      - \"traefik.http.routers.echo.service=echo\"\n      - \"traefik.http.services.echo.loadbalancer.server.port=5000\"\n      - \"traefik.http.routers.echo.middlewares=tinyauth\"\n\nnetworks:\n  proxy:\n    external: true\n
\n

只需要注意两行：

\n\n

你可以将这两行添加到你的任意需要认证的服务中，不需要别的操作即可实现认证。

\n

测试认证

\n

现在，你可以访问 https://echo.skyone.dev，会被重定向到 TinyAuth 的登录页面。登录后，你将被重定向回 echo 服务。

\n

\"登录页面\"

\n

\"重定向到

\n

\"登录成功\"

\n

\"重定向到

\n

注意，这里 TinyAuth 生成的 Cookie 位于 .skyone.dev 域名下，这就是 TinyAuth 和 echo 服务需要在同一个域名下的原因。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
TinyAuth 域名服务域名是否能共享 Cookie说明
auth.skyone.devecho.skyone.dev✅ 可以同属于 skyone.dev，Cookie 有效
auth.skyone.devgrafana.skyone.dev✅ 可以也在 skyone.dev 下，Cookie 有效
auth.skyone.devecho.other.skyone.dev✅ 可以虽然多一层子域，但仍在 skyone.dev 下，Cookie 有效
auth.skyone.devecho.other.dev❌ 不可以根域名不同（skyone.dev ≠ other.dev）
auth1.skyone.devauth2.skyone.dev✅ 可以都在 skyone.dev 下，Cookie 有效
auth.other.skyone.devecho.skyone.dev❌ 不可以.other.skyone.dev 不包括 echo.skyone.dev
\n

权限管理

\n

TinyAuth + Pocket ID 的组合可以实现简单的权限管理。你可以在 Pocket ID 的管理面板中为不同的用户分配不同的权限。

\n

例如，我希望 echo 服务只能被 admin 组的用户访问，可以在 Pocket ID 的管理面板中创建一个 admin 组，并将用户添加到该组中。然后在 echo 服务的 labels 中添加以下行：

\n
- \"tinyauth.oauth.groups=admin\"\n
\n

完成，当用户访问 echo 服务时，TinyAuth 会检查用户是否属于 admin 组，如果不属于，则会被拒绝访问。

\n

同样的，也可以通过用户的邮箱来限制访问，例如：

\n
- \"tinyauth.oauth.whitelist=user1@example.com,/@regex\\\\.com$/,user2@example.com\"\n
\n

可以看到，支持正则表达式（注意转义），还是很不错的。

\n

通过这种方式，TinyAuth 不仅能提供统一的登录入口，还能与 Pocket ID 的用户和组管理结合，实现精细化的访问控制。

\n

【完】

", "url": "https://blog.skyone.dev/2025/tinyauth-traefik/", "title": "使用TinyAuth和Traefik实现简单的认证代理", "summary": "使用 TinyAuth 和 Traefik 实现简单的认证代理。你是否遇到过需要为不支持认证的服务添加认证的情况？TinyAuth 是一个轻量级的认证代理，可以帮助你为这些服务添加基本的认证。", "image": "https://blog.skyone.dev/_next/static/media/7a6de1d9_1622e567.webp", "date_modified": "2025-08-16T00:00:00.000Z", "author": { "name": "Skyone", "url": "https://blog.skyone.dev/about/" } }, { "id": "https://blog.skyone.dev/2025/misskey-cloudflare-warp/", "content_html": "

RSS阅读器可能无法处理 LaTeX 数学公式、代码块高亮等高级功能，请阅读原文以获取最佳阅读体验。

我一直使用 Cloudflare tunnel 来隐藏 Misskey 的 IP 地址，但是昨天晚上忽然想到，由于 misskey 是基于 ActivityPub\n协议的，在服务器与其他服务器之间的通信中，IP 地址是公开的，如果攻击者构造了一个恶意的 ActivityPub 实现，马上就能拿到 Misskey\n源站的 IP 地址。

\n

想要避免这种情况，只能为 Misskey 的源站添加代理，而 Cloudflare Warp 就是一个不错的选择。本文根据大佬们的经验完成了 Misskey\n的 Cloudflare Warp 配置。

\n\n

Cloudflare Warp 简介

\n

Cloudflare Warp 是 Cloudflare 提供的一个 VPN 服务，旨在提供更快、更安全的互联网连接。它通过 Cloudflare\n的全球网络来加密和优化用户的网络流量，从而提高访问速度并保护用户隐私1。

\n

Warp 是限速的，为了获取不限量的 Warp+（速度更快），我们需要绑定 Cloudflare Zero Trust 的账号2。

\n

准备工作

\n

如果你决定不使用 Warp+，可以跳过这一步。

\n

注册 Cloudflare 账号，如果你还没有 Cloudflare 账号，注册一个。

\n

在 Cloudflare Zero Trust 中创建一个团队，登录 Cloudflare\n后，访问 Cloudflare Zero Trust 并创建一个新团队。

\n

在 Cloudflare Zero Trust 配置 Warp 为 Proxy 模式

\n

找到 设置 -> WARP 客户端 -> 配置文件设置，如图所示

\n

\"Cloudflare

\n

将服务模式改为“代理模式”，然后点击“保存更改”。

\n

\"Cloudflare

\n

在 网络 -> Tunnels 中，点击“添加隧道”，创建一个 Warp 隧道，拿到 Warp 令牌（warp-cli connector new 后面的那一串字符串）。

\n

构建 Warp 容器

\n

确保你的服务器上安装了 Docker 和 Docker Compose。

\n

下面是我的 docker-compose.yml 文件内容3：

\n
services:\n  cloudlare-warp:\n    container_name: cloudflare-warp\n    image: luotianyi/cloudflare-warp:latest\n    restart: unless-stopped\n    build:\n      context: build\n    volumes:\n      - \"./data:/app\"\n    environment:\n      WARP_TOKEN: ChangeMe\n    networks:\n      - proxy\n\nnetworks:\n  proxy:\n    external: true\n
\n

将 WARP_TOKEN 替换为你在 Cloudflare Zero Trust 中获取的 Warp 令牌。

\n

下面的 Dockerfile 放到 build 目录下：

\n
FROM debian:bookworm-slim\n\nWORKDIR /app\nRUN apt-get update && \\\n    apt-get install -y --no-install-recommends \\\n        ca-certificates \\\n        curl \\\n        gnupg \\\n        lsb-release && \\\n    rm -rf /var/lib/apt/lists/*\nRUN curl https://pkg.cloudflareclient.com/pubkey.gpg | gpg --yes --dearmor --output /usr/share/keyrings/cloudflare-warp-archive-keyring.gpg && \\\n    echo \"deb [arch=amd64 signed-by=/usr/share/keyrings/cloudflare-warp-archive-keyring.gpg] https://pkg.cloudflareclient.com/ $(lsb_release -cs) main\" | tee /etc/apt/sources.list.d/cloudflare-client.list && \\\n    apt-get update && \\\n    apt-get install cloudflare-warp -y --no-install-recommends && \\\n    rm -rf /var/lib/apt/lists/* && \\\n    curl -L https://github.com/go-gost/gost/releases/download/v3.2.3/gost_3.2.3_linux_amd64.tar.gz -o gost.tar.gz && \\\n    tar -xzf gost.tar.gz -C /usr/local/bin/ && \\\n    rm gost.tar.gz /usr/local/bin/LICENSE /usr/local/bin/README.md /usr/local/bin/README_en.md\nCOPY entrypoint.sh /entrypoint.sh\nRUN chmod +x /entrypoint.sh\n\nCMD [\"/entrypoint.sh\"]\nVOLUME [\"/app\"]\nEXPOSE 1080/tcp\n
\n

下面是 entrypoint.sh 4，同样放在 build 目录下：

\n
#!/usr/bin/env sh\n\nnohup /usr/bin/warp-svc > /app/warp.log &\n\nsleep 3\n\nif [ -n \"$WARP_TOKEN\" ]; then\n    echo \"Using WARP token from environment variable\"\n    warp-cli --accept-tos connector new \"$WARP_TOKEN\"\n    warp-cli --accept-tos connect\nelse\n    echo \"No WARP token provided, using default connector\"\n    warp-cli --accept-tos registration new\n    warp-cli --accept-tos mode proxy\n    warp-cli --accept-tos connect\nfi\n\ngost -L=http://:1080 -F=socks5://127.0.0.1:40000\n
\n

解释一下这个容器的功能，它会后台启动 Cloudflare Warp 服务，然后使用 warp-cli 命令连接到 Cloudflare 的 Warp 网络。由于\nWarp 只支持 socks5 协议，所以我们使用 gost 将其转换为 HTTP 代理，监听在 1080 端口。

\n

实际上这个容器并不完善，因为使用了 nohup 命令来后台运行 warp-svc，在关闭容器时必然要等到超时强制\nkill。不是很优雅的做法，但凑合用吧，不想折腾 s6-overlay 了。

\n

启动容器 docker-compose up -d，然后让我们测试一下：

\n
curl -x http://<warp-container-ip>:1080 https://ipinfo.io\n
\n

应该会告诉你你的 IP 属于 Cloudflare Warp。

\n

配置 Misskey 使用 Warp 代理

\n

这一步非常简单，只需要在 Misskey 的配置文件中添加以下内容：

\n
proxy: http://cloudflare-warp:1080\n
\n

如果你修改了容器名，这里自行同步修改。

\n

然后重启 Misskey 容器即可 docker restart misskey。打开浏览器，看看你的 Misskey 能不能获取其他服务器的信息吧。

\n

Footnotes

\n
    \n
  1. \n

    使用 Cloudflare WARP 保护 Sharkey / Misskey 源站 ↩

    \n
    2. \n
  2. \n

    Linux vps上 使用 Cloudflare ZeroTrust WARP ↩

    \n
    3. \n
  3. \n

    GitHub (TunMax/canal) ↩

    \n
    4. \n
  4. \n

    GitHub (cmj2002/warp-docker) ↩

    \n
    5. \n
\n
", "url": "https://blog.skyone.dev/2025/misskey-cloudflare-warp/", "title": "使用Cloudflare Warp隐藏Misskey的IP地址", "summary": "使用Cloudflare Warp隐藏Misskey的IP地址，避免IP泄露风险。使用容器运行 Cloudflare Warp 服务。", "image": "https://blog.skyone.dev/_next/static/media/780c3487_e58731fa.webp", "date_modified": "2025-08-10T00:00:00.000Z", "author": { "name": "Skyone", "url": "https://blog.skyone.dev/about/" } }, { "id": "https://blog.skyone.dev/2025/recent-status-july/", "content_html": "

RSS阅读器可能无法处理 LaTeX 数学公式、代码块高亮等高级功能，请阅读原文以获取最佳阅读体验。

如你所见，博客已经有一段时间没有更新了，今天抽空来除除草，也让大家这个网站还在持续更新。

\n

最近工作比较忙，项目在赶进度，确实是没有多少时间来写博客。虽然如此，最近还是有一些事情可以分享的，那么就开一个新的系列「随笔」吧，不定期\n记录最近做的有趣的事(实际上就是水文(。

\n\n

N100 小主机

\n

最近我买了一台 N100 的小主机，替换了我那工作了5年的树莓派4B。N100 是英特尔的低功耗处理器，性能比树莓派4B 强很多，而且同样功耗也很低。

\n

\"Home

\n
可以看到颜值还是很高的~
\n

目前配了 16G 内存 + 1T SSD 固态，运行着 Docker 和一些自建服务。外网访问用的是 WireGuard 组网 + 另外购买的 frp 服务。

\n

密码管理器

\n

对于密码管理，最开始我是直接记在C盘下的一个文件夹里的，后来觉得不安全，恰好那时候开始给 Git 提交上了 GPG 签名，就采用 GPG\n加密的方式存储密码，这个方案一直到现在都是可用的。

\n

但是这样做有两个显著的缺点：

\n
    \n
  1. 每次忘记密码都要去解密文件，比较麻烦。
    2. \n
  2. 完全没有同步功能，密码只能存储在本地。最开始我就一台电脑，没有什么问题，去年又买了台台式机，经常为了查密码而切换电脑，比较麻烦。
    3. \n
\n

于是，我调研了一下密码管理器，发现有很多不错的开源项目。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
功能1PasswordBitwardenKeePassXC
开源❌✅✅
云同步✅✅❌
端到端加密✅✅✅
跨平台✅✅✅
\n

存密码的东西当然是优先用开源的啦，我最开始试的是 KeePassXC + Syncthing，确实没啥问题，但手机上每次密码变更都要手动打开 Syncthing 同步，还是比较麻烦。

\n

这个月我试着将 KeePassXC 换成了 Bitwarden 的 Rust 实现 vaultwarden，使用 Docker 在自己的服务器上部署了一份，目前用起来还不错。compose 文件在 skyone-wzw/compose。

\n

Bitwarden 的 Rust 实现 vaultwarden 轻量级很多，运行起来资源占用很小。它的更倾向于个人或小团队使用，没有 OSS 等大型组织的支持，由于其完全开源（包括在 Bitwarden 里需要购买许可证的功能），现在它在GitHub 上的 Star 已经超过原本的 Bitwarden 项目了。

\n

Immich 私人相册

\n

最近我还部署了一个私人相册，使用的是 Immich，这是一个开源的照片和视频备份解决方案，支持自动备份手机上的照片和视频。

\n
\n

警告

\n

需要注意的是，Immich 目前正处于积极开发状态，并未稳定，可能出现破坏性变更，不建议将其作为唯一的备份方案。

\n
\n

Immich 比较吃配置，不太可能在云服务器上运行，我将其部署在上面提到的家里的 x86 小主机上。

\n

实际用下来，网页端完全没问题，很好看，很像 Google Photos。而手机端一开始也挺不错的，支持按相册分类自动上传，上传后会自动加入云端对于的相册。然而，当我在另一部手机上也安装了 Immich 并登录同一个账号时，发现手机端的相册列表会变成「全部照片」，而不是之前的「相册」分类，并且会有一些 Bug，例如已经上传的照片会重复上传（虽然最后会自动合并），这让我有点不爽。不过毕竟是开发中，期待后续的改进。

\n

Misskey

\n

自从今年3月部署了 Misskey 之后，我就一直在用它作为个人的主要社交网络。欢迎大家关注我的 Misskey 账号 @skyone@social.akk.moe！

\n

结语

\n

最近的情况就是这样，希望能在接下来的时间里有更多的时间来写博客和分享有趣的事情。

\n

封面图片来自 Pixiv 126375185

", "url": "https://blog.skyone.dev/2025/recent-status-july/", "title": "近期概况（2025年7月）", "summary": "最近工作比较忙，项目在赶进度，确实是没有多少时间来写博客。虽然如此，最近还是有一些事情可以分享的，那么就开一个新的系列「随笔」吧，不定期记录最近做的有趣的事。", "image": "https://blog.skyone.dev/_next/static/media/0581b7e3_cecad87c.webp", "date_modified": "2025-08-05T00:00:00.000Z", "author": { "name": "Skyone", "url": "https://blog.skyone.dev/about/" } }, { "id": "https://blog.skyone.dev/2025/btrfs-snapshot/", "content_html": "

RSS阅读器可能无法处理 LaTeX 数学公式、代码块高亮等高级功能，请阅读原文以获取最佳阅读体验。

去年从 ext4 文件系统切换到了 btrfs，当时主要看中的是快照功能。最开始使用的是 timeshift，能用，但是可定制性不够，遂尝试\n直接手动创建快照。

\n

自从用了快照，最显著的变化是：折腾各种危险的东西再也不需要使用虚拟机，直接host开搞，最坏不过回滚一下快照，重新生成一下\nGRUB，一个健康的系统就又回来了。

\n

当然，快照大多了，就开始考虑怎么自动化，于是简单写了个脚本，试了一下还不错，放在本文后面了。

\n\n

我使用的 ArchLinux 使用了如下的分区方案：

\n
╭────────────┬────────┬───────┬────────┬────────────────╮\n│ Mounted on │ Size   │ Type  │ Volume | Filesystem     │\n├────────────┼────────┼───────┼────────┼────────────────┤\n│ /          │ 937.6G │ btrfs │ @      | /dev/nvme0n1p4 │\n│ /boot      │ 920.7M │ ext4  │        | /dev/nvme0n1p2 │\n│ /boot/efi  │ 475.1M │ vfat  │        | /dev/nvme0n1p1 │\n│ /home      │ 937.6G │ btrfs │ @home  | /dev/nvme0n1p4 │\n╰────────────┴────────┴───────┴────────┴────────────────╯\n
\n

我将快照保存在 Btrfs 根分区的 .snapshots 目录，就像这样：

\n
[/]\n├─ [@]\n├─ [@home]\n╰─ .snapshots\n   ├─ [@-20250101] (ro)\n   ╰─ [@home-20250101] (ro)\n
\n

其中子卷使用 [] 表示。

\n

日常使用不挂载 [/] 子卷，也就是说，无论怎么玩都不会破坏快照。

\n
\n

请注意！建议在 fstab 中不要指定 subvolid ，而是使用 subvol 直接指定子卷名称，这样恢复快照会更方便，下面的所有例子都以此为前提。

\n
\n

创建快照

\n

当需要创建快照时，先挂载 [/] 子卷

\n
mount -o compress=zstd:3,subvol=/ /dev/nvme0n1p3 /mnt\n
\n

创建只读快照

\n
btrfs subvolume snapshot -r /mnt/@ /mnt/.snapshots/@-`date +\"%Y%m%d\"`\nbtrfs subvolume snapshot -r /mnt/@ /mnt/.snapshots/@home-`date +\"%Y%m%d\"`\n
\n

取消挂载 [/]

\n
umount /mnt\n
\n

恢复快照

\n

可以通过修改 fstab 实现只重启两次即可恢复快照，不需要进入LiveCD模式。

\n

具体思路是创建一个快照到 @-restore @home-restore

\n
mount -o compress=zstd:3,subvol=/ /dev/nvme0n1p3 /mnt\nbtrfs subvolume snapshot /mnt/.snapshots/@-yyyymmdd /mnt/@-restore\nbtrfs subvolume snapshot /mnt/.snapshots/@home-yyyymmdd /mnt/@home-restore\n
\n

编辑 /etc/fstab ，把 @ 子卷和 @home 子卷改成 @-restore 和 @home-restore。

\n
\n

这里修改 /etc/fstab 的作用是提示 grub 根分区的位置，而真正起作用的是 /mnt/@-restore/etc/fstab

\n
\n
cp /etc/fstab /mnt/@-restore/etc/fstab\ngrub-mkconfig -o /boot/grub/grub.cfg\n
\n

重启电脑。

\n

重启之后，再把两个子卷的名字改回去：

\n
mount -o compress=zstd:3,subvol=/ /dev/nvme0n1p3 /mnt\nbtrfs subvolume delete /mnt/@\nbtrfs subvolume delete /mnt/@home\nbtrfs subvolume snapshot /mnt/.snapshots/@-yyyymmdd /mnt/@\nbtrfs subvolume snapshot /mnt/.snapshots/@-yyyymmdd /mnt/@home\n
\n

编辑 /etc/fstab ，把 @-restore 子卷和 @home-restore 子卷改回 @ 和 @。

\n
grub-mkconfig -o /boot/grub/grub.cfg\n
\n

再次重启电脑。

\n

重启之后，把临时的 restore 分区删了

\n
mount -o compress=zstd:3,subvol=/ /dev/nvme0n1p3 /mnt\nbtrfs subvolume delete /mnt/@-restore\nbtrfs subvolume delete /mnt/@home-restore\numount /mnt\n
\n

结束

\n

恢复快照（LiveCD）

\n

如果你的系统已经没办法引导了，也可以使用LiveCD恢复快照，这个过程甚至比上面的要简单。

\n

进入LiveCD环境，修改 @ 和 @home 就结束了，什么配置都不用改。

\n
mount -o compress=zstd:3,subvol=/ /dev/nvme0n1p3 /mnt\nbtrfs subvolume delete /mnt/@\nbtrfs subvolume delete /mnt/@home\nbtrfs subvolume snapshot /mnt/.snapshots/@-yyyymmdd /mnt/@\nbtrfs subvolume snapshot /mnt/.snapshots/@-yyyymmdd /mnt/@home\numount /mnt\n
\n

重启即可。

\n

快照脚本

\n

自动创建快照，创建快照前会删除 Pacman 缓存，如果你不使用ArchLinux，请自行修改 make_snapshot 函数第2行为对应的包管理器

\n
#!/usr/bin/env sh\n\nset -e\n\nrun() {\n    if [ -z \"$is_fake\" ] || [ \"$is_fake\" = false ]; then\n        echo -e \"sh: \\033[1;32m$*\\033[0m\"\n        sudo \"$@\" > /dev/null\n    else\n        echo -e \"> \\033[1;32m$*\\033[0m\"\n    fi\n}\n\nmake_snapshot() {\n    NOW_DATE=$(date +\"%Y%m%d\")\n    run pacman -Sc --noconfirm\n    run mount -o compress=zstd:3,subvol=/ \"$DEVICE\" /mnt\n    \n    SNAPSHOT_FROM=\"/mnt/@\"\n    SNAPSHOT_TO=\"/mnt/.snapshots/@-$NOW_DATE\"\n    SNAPSHOT_NAME=\".snapshots/@-$NOW_DATE\"\n    if [ \"$is_fake\" = false ] && sudo btrfs subvolume list /mnt -o | grep -q \"$SNAPSHOT_NAME\"; then\n        run btrfs subvolume delete \"$SNAPSHOT_TO\"\n    fi\n    run btrfs subvolume snapshot -r \"$SNAPSHOT_FROM\" \"$SNAPSHOT_TO\"\n\n    SNAPSHOT_FROM=\"/mnt/@home\"\n    SNAPSHOT_TO=\"/mnt/.snapshots/@home-$NOW_DATE\"\n    SNAPSHOT_NAME=\".snapshots/@home-$NOW_DATE\"\n    if [ \"$is_fake\" = false ] && sudo btrfs subvolume list /mnt -o | grep -q \"$SNAPSHOT_NAME\"; then\n        run btrfs subvolume delete \"$SNAPSHOT_TO\"\n    fi\n    run btrfs subvolume snapshot -r \"$SNAPSHOT_FROM\" \"$SNAPSHOT_TO\"\n\n    run umount /mnt\n}\n\nDEVICE=$(findmnt -n -o SOURCE / | sed 's/\\[.*\\]//')\n\necho \"List all devices\"\ndf -h | grep nvme\necho -e \"Selected device: \\033[1;32m$DEVICE\\033[0m\"\necho\necho \"Following commands will be executed:\"\nis_fake=true\nmake_snapshot\n\nread -r -p \"Are you sure? [y/N] \" input\ninput=${input,,}\necho\n\nif [ \"$input\" = \"y\" ]; then\n    is_fake=false\n    make_snapshot\nfi\n
\n

列出全部快照，会自动检查 @ 和 @home 的快照是否成对出现

\n
#!/usr/bin/env sh\n\nset -e\n\nrun() {\n    echo -e \"sh: \\033[1;32m$*\\033[0m\"\n    sudo \"$@\"\n}\n\nlist_snapshots() {\n    run mount -o compress=zstd:3,subvol=/ \"$DEVICE\" /mnt\n    snapshot_dates=$(ls /mnt/.snapshots | grep '@-' | sed 's/@-//' | sort -u)\n    \n    if [ -z \"$snapshot_dates\" ]; then\n        echo -e \"\\033[1;31mNo snapshots found.\\033[0m\"\n        run umount /mnt\n        return\n    fi\n\n    # Check if each date has a corresponding home snapshot\n    for date in $snapshot_dates; do\n        if ! ls /mnt/.snapshots | grep -q \"@home-$date\"; then\n            echo -e \"\\033[1;33mWarning: No home snapshot for date $date!\\033[0m\"\n        fi\n    done\n\n    # Display the list of dates\n    echo -e \"\\n\\033[1;32mSnapshots found for the following dates:\\033[0m\"\n    for date in $snapshot_dates; do\n        echo -e \"\\033[1;36m$date\\033[0m\"\n    done\n\n    run umount /mnt\n}\n\nDEVICE=$(findmnt -n -o SOURCE /home | sed 's/\\[.*\\]//')\n\necho \"List all devices\"\ndf -h | grep nvme\necho -e \"Selected device: \\033[1;32m$DEVICE\\033[0m\"\necho\n\nlist_snapshots\n
", "url": "https://blog.skyone.dev/2025/btrfs-snapshot/", "title": "Btrfs快照方案", "summary": "分享我在 ArchLinux 中使用 Btrfs 快照替代虚拟机测试环境的实践经验，包括快照的创建、恢复方式（含非 LiveCD 场景）、分区方案及自动化脚本，让系统实验更安心更高效。", "image": "https://blog.skyone.dev/_next/static/media/ca8b24aa_997c9074.webp", "date_modified": "2025-04-05T00:00:00.000Z", "author": { "name": "Skyone", "url": "https://blog.skyone.dev/about/" } }, { "id": "https://blog.skyone.dev/2025/rust-comment-server/", "content_html": "

RSS阅读器可能无法处理 LaTeX 数学公式、代码块高亮等高级功能，请阅读原文以获取最佳阅读体验。

最近发现博客的评论系统后端有点问题，占用内存过于的大了（基于 Node.js + PostgreSQL，RES 内存占用 200MB+55MB），这不正常。而且我在国内的唯一一个服务器只有 2G 内存，很容易就被干满了。所以决定使用一个编译型语言重写一下。

\n

最开始选的其实是 Golang，因为被网上传的 Rust 入门太难吓住了😂，试了一下发现 Golang 的 ORM 实在是太难用了，而且我非常讨厌 Golang 的语法，所以还是决定用 Rust 了。

\n\n

挑选各种 crate

\n

不得不说，Rust 确实有被吹的资格，在编译型无 GC 语言中，cargo这个包管理感觉能排进第一梯队。

\n

另外，Rust 的很大基本功能也是在 crate 中实现，例如 异步运行时、随机数、加密、数据库等，都没有一个官方的实现，而是由社区维护的 crate 提供。

\n

这么做可以说是有优点也有缺点，优点是社区可以更快的迭代，缺点是可能产生很多重复的工作，以及各个库之间需要手动糊在一起，不能统一接口。

\n

最终我选择了以下 crate：

\n\n

嘛，主要就这些了，后面一些小工具陆陆续续加了点，提到的话再说。

\n

一点小坑

\n

由于是第一次写 Rust，很多东西都是边学边用，所以遇到了不少坑，这里简单记录一下。

\n

sqlx 的坑

\n

首先来拷打这个库，这个库的文档写地有点不清不楚，对 sqlx::query! 的在线模式的描述不够清楚，导致调试运行没问题，release 编译不通过。。。

\n

在线模式指的是，在项目文件夹创建一个 .env 文件，里面配置 DATABASE_URL 环境变量，sqlx::query! 会读取这个环境变量，以提供实时的 SQL 语句检查和类型生成。这个 DATABASE_URL 的格式是 sqlite:C:/path/to/db.sqlite。

\n

然而，这个 .env 文件不能添加到 git 里！这会导致 CI 里编译不通过！因为 CI 里并没有调试用的数据库，而如果想要生成这个数据库需要 cargo install sqlx-cli，编译一次需要十几分钟。。。

\n

后来，在一个文档的拐角找的了：运行 cargo sqlx prepare 会生成一个 .sqlx 文件夹，把这个文件夹加到 git 里，在 CI 里编译的时候，sqlx 会读取这个文件夹里的配置以生成类型。

\n

此外，SqliteConnectOptions::new().filename(database_path) 中的 database_path 并不是上面的 DATABASE_URL 那样的格式，而是数据库文件的路径 C:/path/to/db.sqlite 或相对路径 ./db.sqlite。试了半天才发现这个坑。

\n

tera 的坑

\n

我想要实现最终只有一个可执行程序，不需要别的资源文件，因此必须把模板文件编译进编译产物里。tera 的文档里没有内设这个功能，但是可以提供 include_dir! 这个宏配合 tera 的手动加载模板的功能实现。类似这样：

\n
#[cfg(not(debug_assertions))]\nstatic EMBED_TEMPLATE: include_dir::Dir = include_dir!(\"templates\");\n\n#[cfg(not(debug_assertions))]\npub fn make_template() -> Tera {\n    let mut tera = Tera::default();\n    for file in EMBED_TEMPLATE.files() {\n        let name = match file.path().to_str() {\n            Some(name) => name,\n            None => continue,\n        };\n        let content = match file.contents_utf8() {\n            Some(content) => content,\n            None => continue,\n        };\n        if let Err(_) = tera.add_raw_template(name, content) {\n            std::process::exit(1);\n        }\n    }\n    tera\n}\n\n#[cfg(debug_assertions)]\npub fn make_template() -> Tera {\n    Tera::new(\"templates/**/*\").expect(\"Failed to load templates\")\n}\n
\n

通过 cfg 宏来判断是否在 debug 模式下，如果是则从文件夹加载模板，否则从编译产物加载模板。兼具了开发和生产的需求。

\n

嵌入静态资源

\n

嵌入静态资源其实和嵌入模板差不多，只是需要让 axum 和 include_dir 配合。通过一个 /static/{*path} 路由来处理静态资源：

\n
static EMBED_STATIC: include_dir::Dir = include_dir!(\"static\");\n\npub async fn static_path(Path(path): Path<String>) -> impl IntoResponse {\n    let path = path.trim_start_matches('/');\n    let mime_type = mime_guess::from_path(path).first_or_text_plain();\n\n    match EMBED_STATIC.get_file(path) {\n        None => (StatusCode::NOT_FOUND, \"Not Found\").into_response(),\n        Some(file) => {\n            let body = file.contents();\n            let mut header = HeaderMap::new();\n            if let Ok(mine_type) = mime_type.to_string().parse() {\n                header.insert(http::header::CONTENT_TYPE, mine_type);\n            }\n            #[cfg(not(debug_assertions))]\n            if let Ok(cache_control) = \"public, max-age=86400\".parse() {\n                header.insert(http::header::CACHE_CONTROL, cache_control);\n            }\n            (StatusCode::OK, header, body).into_response()\n        }\n    }\n}\n
\n

管理后台的身份认证

\n

管理后台的身份认证我选择使用 HTTP Basic Auth，但是没找到合适的中间件，所幸这个功能并不复杂，也就自己试着写了一个，核心思想就是用 axum 提供的 axum::middleware::from_fn_with_state 简化编写中间件的复杂度，和写 header 其实差不多。

\n
#[derive(Clone)]\npub struct BasicAuthorize {\n    name: String,\n    password: String,\n}\n\nimpl BasicAuthorize {\n    pub fn new(name: String, password: String) -> BasicAuthorize {\n        BasicAuthorize { name, password }\n    }\n\n    pub async fn handler(\n        State(state): State<BasicAuthorize>,\n        request: Request,\n        next: Next,\n    ) -> impl IntoResponse {\n        let auth = request.headers().get(\"authorization\");\n        if let Some(token) = auth {\n            if let Ok(token) = token.to_str() {\n                if token.starts_with(\"Basic \") {\n                    let token = token.trim_start_matches(\"Basic \");\n                    if let Ok(token) = base64::prelude::BASE64_STANDARD.decode(token.as_bytes()) {\n                        if let Ok(token) = String::from_utf8(token) {\n                            let parts: Vec<&str> = token.splitn(2, ':').collect();\n                            if parts.len() == 2 {\n                                if parts[0] == state.name && parts[1] == state.password {\n                                    return next.run(request).await;\n                                }\n                            }\n                        }\n                    }\n                }\n            }\n        }\n\n        let mut headers = HeaderMap::new();\n        headers.insert(\"WWW-Authenticate\", \"Basic\".parse().unwrap());\n        (http::StatusCode::UNAUTHORIZED, headers, \"Unauthorized\").into_response()\n    }\n}\n
\n

然后和通过 axum::middleware::from_fn_with_state 注册这个中间件：

\n
let auth = auth::BasicAuthorize::new(admin_username, admin_password);\nlet private_api = Router::new()\n    .nest(\"/api/admin\", admin::admin_routes())\n    .layer(axum::middleware::from_fn_with_state(auth.clone(), auth::BasicAuthorize::handler));\n
\n

还是挺直观的。

\n

总结

\n

首先讲讲个人感受，一句话：Rust 的学习难度不过如此嘛~。从0开始写一个简单的服务我只用了 2 天（业余时间）。

\n

可以看出，Rust 确实融合了很多语言的特性，但这都不是事，因为：

\n\n

总的来说，这次写这个服务还是挺顺利的，Rust 的文档和社区都很好，遇到问题基本上都能在网上找到答案。但是 Rust 的生态还是不够完善，很多库都是半成品，需要自己去糊在一起，这一点和 Node.js 的生态差距还是很大的。

\n

通过这次对 comment-server 的重构，内存占用从 200MB+55MB 降到了 10MB，可以说是非常成功了。而且 Rust 的编译产物也非常小，只有 17MB （在内嵌模板和静态资源的情况下）。

\n
\n

偏点题，评论系统的前端使用 React + Material-UI。管理面板使用前面提到的 Tera 模板渲染，使用 TailwindCSS + daisyui。

\n

以前一直觉得 React 更好，这次发现拿模板渲染真的快，4 个页面一小时就写好了。

\n

通知系统用的是 TelegramBot ，简单方便。后续计划实现基于 Email 的回复通知。

\n
\n

【完】感谢阅读！

", "url": "https://blog.skyone.dev/2025/rust-comment-server/", "title": "使用 Rust 实现自己的评论系统", "summary": "最近用 Rust 重写了博客的评论系统，这里分享一下实现过程以及一些对 Rust 的看法。主要使用了 tokio、sqlx、tera、axum 等 crate。包含遇到的一些坑和我的解决方案。", "image": "https://blog.skyone.dev/_next/static/media/a26bac62_36afea58.webp", "date_modified": "2025-01-26T00:00:00.000Z", "author": { "name": "Skyone", "url": "https://blog.skyone.dev/about/" } }, { "id": "https://blog.skyone.dev/2024/docker-peertube/", "content_html": "

RSS阅读器可能无法处理 LaTeX 数学公式、代码块高亮等高级功能，请阅读原文以获取最佳阅读体验。

PeerTube 是一个自由开源的去中心化视频分享平台，它使用 WebTorrent 技术来实现 P2P 视频流传输。本来想用 PeerTube 来搭建一个视频分享平台，但是发现 PeerTube 的 Docker 部署文档有很多缺失的细节，所以写了这篇文章来记录一下 PeerTube 的 Docker 部署过程。

\n

我已经搭建好了一个示例，大家可用访问 https://video.akk.moe 查看效果。

\n\n

再贴一个 PeerTube 的嵌入式标签：

\n\n

Docker Compose

\n

我的 Docker Compose 文件是根据官方的 docker-compose.yml 修改而来的，官方的配置非常不实用\n包含了很多不必要的配置，比如官方自定义了一个 nginx 容器，实在没必要；而且还用到了 PostFix 邮箱服务，一般人都不会用到。

\n

下面是我的 Docker Compose 文件：

\n
services:\n  nginx:\n    container_name: peertube-nginx\n    image: nginx:alpine\n    restart: \"unless-stopped\"\n    networks:\n      - proxy\n      - peertube\n    volumes:\n      - \"./nginx:/etc/nginx/conf.d\"\n      - \"./logs:/var/log/nginx\"\n      - \"./data:/var/www/peertube/storage\"\n      - \"assets:/var/www/peertube/peertube-latest/client/dist:ro\"\n    labels:\n      - \"traefik.enable=true\"\n      - \"traefik.docker.network=proxy\"\n      - \"traefik.http.routers.peertube.rule=Host(`video.example.com`)\"\n      - \"traefik.http.routers.peertube.entrypoints=web\"\n      - \"traefik.http.services.peertube.loadbalancer.server.port=9000\"\n\n  peertube:\n    container_name: peertube\n    image: chocobozzz/peertube:production-bookworm\n    restart: \"unless-stopped\"\n    networks:\n      - peertube\n    env_file:\n      - docker.env\n    #ports:\n    #  - \"1935:1935\" # Comment if you don't want to use the live feature\n    volumes:\n      - \"assets:/app/client/dist\"\n      - \"./data:/data\"\n      - \"./config:/config\"\n    depends_on:\n      - database\n      - redis\n\n  database:\n    container_name: peertube-database\n    image: postgres:13-alpine\n    restart: \"unless-stopped\"\n    networks:\n      - peertube\n    env_file:\n      - docker.env\n    volumes:\n      - \"./database:/var/lib/postgresql/data\"\n\n  redis:\n    container_name: peertube-redis\n    image: redis:6-alpine\n    restart: \"unless-stopped\"\n    networks:\n      - peertube\n    volumes:\n      - \"./redis:/data\"\n\nnetworks:\n  proxy:\n    external: true\n  peertube:\n    name: peertube\n\nvolumes:\n  assets:\n    name: peertube-assets\n
\n

主要修改了：

\n\n

要使用的话，只需要将 video.example.com 替换成你的域名。

\n

下面是对应的 docker.env 文件：

\n
# Postgres configuration\nPOSTGRES_USER=peertube\nPOSTGRES_PASSWORD=\nPOSTGRES_DB=peertube\n\n# PeerTube configuration\nPEERTUBE_DB_NAME=${POSTGRES_DB}\nPEERTUBE_DB_USERNAME=${POSTGRES_USER}\nPEERTUBE_DB_PASSWORD=${POSTGRES_PASSWORD}\nPEERTUBE_DB_HOSTNAME=peertube-database\nPEERTUBE_REDIS_HOSTNAME=peertube-redis\n\nPEERTUBE_WEBSERVER_HOSTNAME=\nPEERTUBE_TRUST_PROXY=[\"127.0.0.1/8\", \"loopback\", \"10.0.0.0/8\", \"172.16.0.0/12\", \"192.168.0.0/16\"]\n\nPEERTUBE_SECRET=\n\n# E-mail configuration\nPEERTUBE_SMTP_USERNAME=\nPEERTUBE_SMTP_PASSWORD=\nPEERTUBE_SMTP_HOSTNAME=smtp.office365.com\nPEERTUBE_SMTP_PORT=587\nPEERTUBE_SMTP_FROM=\nPEERTUBE_SMTP_TLS=false\nPEERTUBE_SMTP_DISABLE_STARTTLS=false\nPEERTUBE_ADMIN_EMAIL=\n\nPEERTUBE_OBJECT_STORAGE_UPLOAD_ACL_PUBLIC=\"public-read\"\nPEERTUBE_OBJECT_STORAGE_UPLOAD_ACL_PRIVATE=\"private\"\nPEERTUBE_WEBSERVER_HTTPS=true\n#PEERTUBE_LOG_LEVEL=info\n
\n

要修改的项目有：

\n\n

这里默认你将 docker.env 和 docker-compose.yml 放在了 /app/path 目录下。

\n

Nginx 配置

\n

Nginx 的配置同样是从官方的 chocobozzz/peertube-webserver 中抄来的，做了如下修改：

\n\n
upstream backend {\n    server peertube:9000;\n}\n\nserver {\n    listen 9000;\n\n    access_log /var/log/nginx/peertube.access.log; # reduce I/0 with buffer=10m flush=5m\n    error_log  /var/log/nginx/peertube.error.log;\n\n    ##\n    # Application\n    ##\n\n    location @api {\n        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;\n        proxy_set_header Host              $host;\n        proxy_set_header X-Real-IP         $remote_addr;\n\n        client_max_body_size  100k; # default is 1M\n\n        proxy_connect_timeout 10m;\n        proxy_send_timeout    10m;\n        proxy_read_timeout    10m;\n        send_timeout          10m;\n\n        proxy_pass http://backend;\n    }\n\n    location / {\n        try_files /dev/null @api;\n    }\n\n    location ~ ^/api/v1/videos/(upload-resumable|([^/]+/source/replace-resumable))$ {\n        client_max_body_size    0;\n        proxy_request_buffering off;\n\n        try_files /dev/null @api;\n    }\n\n    location ~ ^/api/v1/users/[^/]+/imports/import-resumable$ {\n        client_max_body_size    0;\n        proxy_request_buffering off;\n\n        try_files /dev/null @api;\n    }\n\n    location ~ ^/api/v1/videos/(upload|([^/]+/studio/edit))$ {\n        limit_except POST HEAD { deny all; }\n\n        # This is the maximum upload size, which roughly matches the maximum size of a video file.\n        # Note that temporary space is needed equal to the total size of all concurrent uploads.\n        # This data gets stored in /var/lib/nginx by default, so you may want to put this directory\n        # on a dedicated filesystem.\n        client_max_body_size                      12G; # default is 1M\n        add_header            X-File-Maximum-Size 8G always; # inform backend of the set value in bytes before mime-encoding (x * 1.4 >= client_max_body_size)\n\n        try_files /dev/null @api;\n    }\n\n    location ~ ^/api/v1/runners/jobs/[^/]+/(update|success)$ {\n        client_max_body_size                      12G; # default is 1M\n        add_header            X-File-Maximum-Size 8G always; # inform backend of the set value in bytes before mime-encoding (x * 1.4 >= client_max_body_size)\n\n        try_files /dev/null @api;\n    }\n\n    location ~ ^/api/v1/(videos|video-playlists|video-channels|users/me) {\n        client_max_body_size                      6M; # default is 1M\n        add_header            X-File-Maximum-Size 4M always; # inform backend of the set value in bytes before mime-encoding (x * 1.4 >= client_max_body_size)\n\n        try_files /dev/null @api;\n    }\n\n    ##\n    # Websocket\n    ##\n\n    location @api_websocket {\n        proxy_http_version 1.1;\n        proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;\n        proxy_set_header   Host              $host;\n        proxy_set_header   X-Real-IP         $remote_addr;\n        proxy_set_header   Upgrade           $http_upgrade;\n        proxy_set_header   Connection        \"upgrade\";\n\n        proxy_pass http://backend;\n    }\n\n    location /socket.io {\n        try_files /dev/null @api_websocket;\n    }\n\n    location /tracker/socket {\n        # Peers send a message to the tracker every 15 minutes\n        # Don't close the websocket before then\n        proxy_read_timeout 15m; # default is 60s\n\n        try_files /dev/null @api_websocket;\n    }\n\n    # Plugin websocket routes\n    location ~ ^/plugins/[^/]+(/[^/]+)?/ws/ {\n        try_files /dev/null @api_websocket;\n    }\n\n    ##\n    # Performance optimizations\n    # For extra performance please refer to https://github.com/denji/nginx-tuning\n    ##\n\n    root /var/www/peertube/storage;\n\n    # Enable compression for JS/CSS/HTML, for improved client load times.\n    # It might be nice to compress JSON/XML as returned by the API, but\n    # leaving that out to protect against potential BREACH attack.\n    gzip              on;\n    gzip_vary         on;\n    gzip_types        # text/html is always compressed by HttpGzipModule\n                      text/css\n                      application/javascript\n                      font/truetype\n                      font/opentype\n                      application/vnd.ms-fontobject\n                      image/svg+xml;\n    gzip_min_length   1000; # default is 20 bytes\n    gzip_buffers      16 8k;\n    gzip_comp_level   2; # default is 1\n\n    client_body_timeout       30s; # default is 60\n    client_header_timeout     10s; # default is 60\n    send_timeout              10s; # default is 60\n    keepalive_timeout         10s; # default is 75\n    resolver_timeout          10s; # default is 30\n    reset_timedout_connection on;\n    proxy_ignore_client_abort on;\n\n    tcp_nopush                on; # send headers in one piece\n    tcp_nodelay               on; # don't buffer data sent, good for small data bursts in real time\n\n    # If you have a small /var/lib partition, it could be interesting to store temp nginx uploads in a different place\n    # See https://nginx.org/en/docs/http/ngx_http_core_module.html#client_body_temp_path\n    #client_body_temp_path /var/www/peertube/storage/nginx/;\n\n    # Bypass PeerTube for performance reasons. Optional.\n    # Should be consistent with client-overrides assets list in client.ts server controller\n    location ~ ^/client/(assets/images/(icons/icon-36x36\\.png|icons/icon-48x48\\.png|icons/icon-72x72\\.png|icons/icon-96x96\\.png|icons/icon-144x144\\.png|icons/icon-192x192\\.png|icons/icon-512x512\\.png|logo\\.svg|favicon\\.png|default-playlist\\.jpg|default-avatar-account\\.png|default-avatar-account-48x48\\.png|default-avatar-video-channel\\.png|default-avatar-video-channel-48x48\\.png))$ {\n        add_header Cache-Control \"public, max-age=31536000, immutable\"; # Cache 1 year\n\n        root /var/www/peertube;\n\n        try_files /storage/client-overrides/$1 /peertube-latest/client/dist/$1 @api;\n    }\n\n    # Bypass PeerTube for performance reasons. Optional.\n    location ~ ^/client/(.*\\.(js|css|png|svg|woff2|otf|ttf|woff|eot))$ {\n        add_header Cache-Control \"public, max-age=31536000, immutable\"; # Cache 1 year\n\n        alias /var/www/peertube/peertube-latest/client/dist/$1;\n    }\n\n    location ~ ^(/static/(webseed|web-videos|streaming-playlists/hls)/private/)|^/download {\n        # We can't rate limit a try_files directive, so we need to duplicate @api\n\n        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;\n        proxy_set_header Host              $host;\n        proxy_set_header X-Real-IP         $remote_addr;\n\n        proxy_limit_rate 5M;\n\n        proxy_pass http://backend;\n    }\n\n    # Bypass PeerTube for performance reasons. Optional.\n    location ~ ^/static/(webseed|web-videos|redundancy|streaming-playlists)/ {\n        limit_rate_after            5M;\n\n        set $peertube_limit_rate  5M;\n\n        # Use this line with nginx >= 1.17.0\n        limit_rate $peertube_limit_rate;\n        # Or this line with nginx < 1.17.0\n        # set $limit_rate $peertube_limit_rate;\n\n        if ($request_method = 'OPTIONS') {\n          add_header Access-Control-Allow-Origin  '*';\n          add_header Access-Control-Allow-Methods 'GET, OPTIONS';\n          add_header Access-Control-Allow-Headers 'Range,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';\n          add_header Access-Control-Max-Age       1728000; # Preflight request can be cached 20 days\n          add_header Content-Type                 'text/plain charset=UTF-8';\n          add_header Content-Length               0;\n          return 204;\n        }\n\n        if ($request_method = 'GET') {\n          add_header Access-Control-Allow-Origin  '*';\n          add_header Access-Control-Allow-Methods 'GET, OPTIONS';\n          add_header Access-Control-Allow-Headers 'Range,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';\n        }\n\n        # Enabling the sendfile directive eliminates the step of copying the data into the buffer\n        # and enables direct copying data from one file descriptor to another.\n        sendfile on;\n        sendfile_max_chunk 1M; # prevent one fast connection from entirely occupying the worker process. should be > 800k.\n        aio threads;\n\n        # web-videos is the name of the directory mapped to the `storage.web_videos` key in your PeerTube configuration\n        rewrite ^/static/webseed/(.*)$ /web-videos/$1 break;\n        rewrite ^/static/(.*)$         /$1        break;\n\n        try_files $uri @api;\n    }\n}\n
\n

一个字都不用改，所以直接复制粘贴即可，放到 /app/path/nginx/peertube.conf。

\n

登录 PeerTube 网页

\n

上面的配置弄完直接 docker-compose up -d ，这里不多说，下面讲讲怎么使用。

\n

访问你的 PeerTube 网页，PeerTube 在首次启动时会自动创建一个名为 root 的账户，密码通过 docker logs peertube | head -n 50 可用找到，该账户的邮箱是你在 docker.env 中填的 PEERTUBE_ADMIN_EMAIL。

\n

先用这个账户登录，在设置中修改密码，然后创建一个新账户，这个账户就是你的主账户，可以上传视频，记得将这个账户设置为管理员。

\n

然后就可以退出 root 账户，登上新创建的账户，上传头像、设置 banner ...... 等的装饰性操作。

\n

再创建一个频道，PeerTube 的视频是以频道为容器的，所以你需要先创建一个频道，然后再上传视频。

\n

主页面可用使用 markdown 编写，下面是我写的一个例子，只需要将网站名字替换一下即可：

\n
本网站使用使用 PeerTube 搭建的个人测试视频站，名为 **XXXTube**。\n\n请注意，使用此网站即代表您同意 [XXXTube 隐私政策](/about/peertube)。\n\nThis website is a personal test video site powered by PeerTube, called **AkkTube**.\n\nPlease note that by using this site you agree to the [XXXTube Privacy Policy](/about/peertube).\n\n<peertube-container data-layout=\"col\" data-title=\"本地视频\" data-description=\"只包含在本网站上传的视频\">\n  <peertube-videos-list data-count=\"10\" data-only-local=\"true\" data-max-rows=\"4\"></peertube-videos-list>\n</peertube-container>\n
\n

\"Example

\n

看起来不错~

\n

【完】

", "url": "https://blog.skyone.dev/2024/docker-peertube/", "title": "使用 Docker 部署 PeerTube", "summary": "使用 Docker 部署 PeerTube。PeerTube 是一个自由开源的去中心化视频分享平台，它使用 WebTorrent 技术来实现 P2P 视频流传输。本来想用 PeerTube 来搭建一个视频分享平台，但是发现 PeerTube 的 Docker 部署文档有很多缺失的细节，所以写了这篇文章来记录一下 PeerTube 的 Docker 部署过程。", "image": "https://blog.skyone.dev/_next/static/media/5a303396_8c3eb1be.webp", "date_modified": "2024-12-22T00:00:00.000Z", "author": { "name": "Skyone", "url": "https://blog.skyone.dev/about/" } }, { "id": "https://blog.skyone.dev/2024/nextjs-app-router/", "content_html": "

RSS阅读器可能无法处理 LaTeX 数学公式、代码块高亮等高级功能，请阅读原文以获取最佳阅读体验。

写了很多 Next.js 的代码，总结了一下 Server Component 和 Client Component 的规律，希望对后来者有用。如果有错误，欢迎大佬指正！

\n\n

如何区分Client Component？

\n

我总结了以下规律，可以快速区分一个组件是否为服务端组件：

\n
    \n
  1. 默认导出（export default）为 async 函数的组件为 Server Component。
    2. \n
  2. 标记了 use client; 的源文件里的组件都是 Client Component。
    3. \n
  3. 其余情况下，组件既是 Server Component 也是 Client Component。也就是说，既可以在服务端运行，又可以在客户端运行。为了方便描述，下面我将这种组件称为 Server/Client Component
    4. \n
\n

我们知道 Next.js 官方说的是 “在 App Router 下不标明 use client 的为 Server Component”，但是我强烈建议**任何不应该被发送到客户端的 Server Component 都加上 async ，即使该组件没有用到异步逻辑！**原因下一节提到。

\n

正确使用 Server Component

\n
\n

我们都知道，Server Component 不能访问浏览器 API（如 window 对象），也不能使用常规 React Hook，这一点理所当然，不在这里赘述。

\n
\n

顾名思义，Server Component 就是在服务端运行的组件，可以访问浏览器端不存在的Node API，例如连接数据库等。

\n

这些服务端操作通常是异步的，所以 Next.js 允许我们的 Server Component 返回 Promise，而 Client Component 则不行。因此，加上 async 可以保证我们的组件（以及组件内部的变量）永远不会被发送到 Client。如下面的例子：

\n
interface User {\n    name: string;\n    email: string;\n}\n\ninterface Props {\n    user: User;\n    content: string;\n}\n\nasync function UserComment({comment}: Props) {\n    const {user, content} = comment;\n    return (\n        <dir>\n            <p>{user.name}</p>\n            <img src={gravatarUrl + tools.md5(user.avatar)}/>\n            <p>{content}</p>\n        </dir>\n    );\n} \n
\n

显然，这个函数没有用到异步逻辑，但是，我将其标为 async ，为什么呢？我们不能把评论者的 email 暴露出来，只是通过 email 的 md5 显示 gravatar 头像。

\n

如果不添加 async ，而这个组件因为某种原因（后面会将）被当作 Client Component，这个组件的参数当然也会一并被发送到浏览器，评论者的邮箱就暴露了！

\n

而一旦添加了 async ，这个组件就只能是 Server Component，里面的数据不存在泄漏到客户端的风险。

\n

还有一点，上面的例子中，tools.md5 一般都是 Node API 实现的，显然只能在 Server Component 中运行，添加 async 也能帮助你排除错误。一旦你试图在 Client Component 里使用 Server Component，Next.js 就会立刻向你报错。而当你在 Client Component 里使用 Server/Client Component （既可以作为 Server Component 又可以作为 Client Component 的组件）时，Next.js 只会在运行时向你报错“我在浏览器里找不到 crypto 包啊”。

\n

正确使用 Browser API

\n

何时使用浏览器API？Next.js 官方告诉我们，只有在标记了 \"useclient\" 的组件里才能使用浏览器 API。然而我觉得这句话并不十分正确，就像下面的代码一定会报错：

\n
\"use client\";\n\nfunction Demo() {\n    // 找不到 window 对象\n    window.alert(\"233\")\n    \n    return <p>233</p>\n}\n
\n

为什么报错？所谓 Client Component 并不是一定在浏览器里运行的，实际上，Client Component的首次渲染在服务端，Node当然找不到 window.alert。Next.js 的对 Client 的处理是：只运行一遍主要逻辑，不运行Hook。也就是说，useEffect 里的函数是确确实实在浏览器运行的，因此，这段代码应该改成：

\n
\"use client\";\n\nfunction Demo() {\n    useEffect(() => {\n        window.alert(\"233\");\n    });\n    \n    return <p>233</p>\n}\n
\n

我相信下面这个例子一定能帮你理解：

\n
\"use client\";\n\nfunction Counter() {\n\tconst [count, setCount] = useState(0);\n    const handleClick = useCallback(() => setCount(prev => prev + 1), []);\n    \n    useEffect(() => {\n        console.log(\"始终在浏览器终端\");\n    });\n    \n    console.log(`count = ${count}`);\n    \n    return (\n        <div>\n            <p>{count}</p>\n            <button onClick={}>Click me</button>\n        </div>\n    );\n}\n
\n

直接放到 /src/app/page.tsx ，打开网页并点几下按钮，观察一下控制台。

\n

其中服务端控制台会显示一次 count = 0，只会的都显示在浏览器控制台。而 \"始终在浏览器终端\" 则只会在浏览器控制台显示。

\n

除了 Hook，浏览器 API 还能在一切”副作用“中使用。什么是副作用呢？比如说用户点击按钮产生的事件、监听用户鼠标移动产生的事件等等。也就是说，onClick 、onChange 等里面也可以使用浏览器 API。

\n

相互调用

\n

Server Component 能不能调用 Client Component？反过来行不行？答案是：Server Component 能调用 Client Component，Client Component 不能直接调用 Server Component。

\n

还是以例子来说明，例如下面的 Server Component 能调用 Client Component：

\n
async function SomeServerComponent() {\n    // ...\n    return <SomeClientComponet props={props}/>;\n    // props 不能传递 function 等不可序列化的数据\n}\n
\n

下面的 Client Component 不能调用 Server Component：

\n
\"use client\";\n\nfunction SomeClientComponent() {\n    // ...\n    return <SomeServerComponet/>; // ❌ 错误\n}\n
\n

而Client Component 能使用作为参数传递的、已经实例化的 Server Component：

\n
// SomeServerComponent.tsx\nexport default async function SomeServerComponent() {\n    return <p>SomeServerComponent</p>;\n}\n\n// SomeClientComponent.tsx\n\"use client\";\n\ninterface Props {\n    children: ReactNode;\n}\n\nexport default function SomeClientComponent({children}: Props) {\n    return (\n        <DataProvider>\n            {children}\n        </DataProvider>\n    );\n}\n\n// somepage/layout.tsx\nexport default async function SomePageLayout() {\n    return (\n    \t<SomeClientComponent> {/* SomePageLayout 使用 Client Component */}\n            <SomeServerComponent/>\n            {/* SomePageLayout 使用 Server Component 并将结果传递给 Client Compoent */}\n        </SomeClientComponent>\n    )\n}\n
\n

例子中 SomePageLayout 使用 Server Component 并将结果传递给 Client Compoent，因为ReactNode本身是可以序列号的，所以 SomePageLayout 作为 Server Component 可以调用 Server Component 并将其结果序列化后传递给 Client Compoent。

\n

Server/Client Component

\n

最后来讲讲我第一节定义的 Server/Client Component，它是既可以作为 Server Component 又可以作为 Client Component 的组件，可以实现服务端客户端的逻辑共用，但代价是什么呢？Server/Client Component 继承了 Server Component 和 Client Component 的全部限制。

\n

具体来说：Server/Client Component 不能使用 Browser API 和 Hook（因为可以在服务端运行），不能使用 Node API（因为可以在客户端运行）。

\n

也就是说，Server/Client Component 只能做从数据到 dom 树的转化，不能获取数据，不能拥有状态，也不能持有包含隐私的数据。

\n

正是因为这么多限制，Server/Client Component 可以在 Server Component 和 Client Component 中随意使用。它就是个纯函数，或者说从 data 到 ReactNode 的 Map。

\n

【完】

", "url": "https://blog.skyone.dev/2024/nextjs-app-router/", "title": "Next.js App Router 经验总结", "summary": "Next.js App Router 经验总结。写了很多 Next.js 的代码，总结了一下 Server Component 和 Client Component 的规律，希望对后来者有用。如果有错误，欢迎大佬指正！其中包含了如何区分 Server Component 和 Client Component，正确使用 Server Component，正确使用 Browser API，相互调用，以及 Server/Client Component 的使用。", "image": "https://blog.skyone.dev/_next/static/media/190ae667_ef5c515a.webp", "date_modified": "2024-10-11T00:00:00.000Z", "author": { "name": "Skyone", "url": "https://blog.skyone.dev/about/" } }, { "id": "https://blog.skyone.dev/2024/luks-yubikey-encrypt-2/", "content_html": "

RSS阅读器可能无法处理 LaTeX 数学公式、代码块高亮等高级功能，请阅读原文以获取最佳阅读体验。

在上一篇文章 使用 YubiKey 解密 LUKS 分区 之后我发现了两个问题：

\n\n

最近又查看了一下 ArchWiki1，最终解决了以上两个问题。写下这篇文章以作记录。

\n\n

计划分盘

\n

由于GRUB只识别基础的文件系统，解密根分区任务位于 initramfs 之中，因此内核镜像和 initramfs 不能被加密。具体步骤是：

\n\n

本次分区假设如下2：

\n
/dev/sda1 1GB   -> /boot/efi FAT32\n/dev/sda2 500MB -> /boot     FAT32\n/dev/sda3 other -> /dev/mapper/system btrfs\n                   |- /\n                   |- /@          -> /\n                   |- /@home      -> /home\n                   |- /.snapshots\n
\n

进行之前先确保已经能使用密码解密系统，具体参考使用 YubiKey 解密 LUKS 分区。

\n

配置 Yubikey

\n

首先安装相关依赖3，然后将 Yubikey 插入电脑，检查是否出现 /dev/hidrawX 设备，完成后将 Yubikey FIDO2 插入密钥槽：

\n
systemd-cryptenroll --fido2-device=auto /dev/sda3\n
\n

可选参数：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明
/dev/sda3设备路径
--fido2-device设备，可用 auto，或前面的 /dev/hidrawX
--fido2-with-client-pin默认是 yes，若为 no，从而开机时只需要触摸 YubiKey 而不需输入 PIN
--fido2-credential-algorithm算法，此处选择 eddsa
\n

配置 crypttab

\n

编辑 /etc/crypttab.initramfs ，systemd 会将这个文件打包到 initramfs 的 /etc/crypttab

\n
# name  device                                     password  options\nsystem  UUID=2f9a8428-ac69-478a-88a2-4aa458565431  none      fido2-device=auto,token-timeout=30\n
\n

意思是：使用 FIDO2 设备将 /dev/sda3 解密到 /dev/mapper/system ，如果超过 30 秒未使用 FIDO2 设备则回退到密码解密。

\n\n

配置 initramfs

\n

BusyBox 模式下并不支持这些功能4，我们需要改用 systemd 模式。幸好这个过程并不复杂。

\n

编辑 /etc/mkinitramfs.conf ，修改其中的 HOOKS （参考 dm-crypt/System configuration#mkinitramfs），要确保：

\n\n

重新生成 initramfs

\n
mkinitramfs -p linux\n
\n

修改内核参数

\n

如果你之前配置过 luks 相关的内核参数，需要修改一下。

\n

编辑 /etc/default/grub ，修改其中的 GRUB_CMDLINE_LINUX ，与 luks 相关的 cryptdevice 等参数全部删掉，因为这是用于 encrypt hook 的，而我们现在用的是 sd-encrypt hook，这个 hook 会自动识别 /etc/crypttab 中的配置（由 systemd 自动从 /etc/crypttab.initramfs 复制到 initramfs 中的 /etc/crypttab ）。

\n

只需要保留 root=/dev/mapper/system 即可。例如

\n
GRUB_CMDLINE_LINUX=\"root=/dev/mapper/system rw loglevel=3 quiet\"\n
\n

这里的 /dev/mapper/system 不需要使用 UUID，因为这个是由我们 /etc/crypttab 中的 name 指定的，不会改变。

\n

改完记得 grub-mkconfig -o /boot/grub/grub.cfg 。

\n

Footnotes

\n
    \n
  1. \n

    dm-crypt/System configuration - ArchWiki ↩

    \n
    2. \n
  2. \n

    dm-crypt/Device encryption ↩

    \n
    3. \n
  3. \n

    安装 FIDO2 及 Yubikey 的相关依赖 ↩

    \n
    4. \n
  4. \n

    Linux Full Disk Encryption with Yubikey ↩

    \n
    5. \n
\n
", "url": "https://blog.skyone.dev/2024/luks-yubikey-encrypt-2/", "title": "使用 YubiKey 解密 LUKS 分区（续）", "summary": "本文介绍如使用 Yubikey 解密 LUKS 分区。使用 systemd 的 sd-encrypt hook，并配置为可以在超时后回退到密码解密。", "image": "https://blog.skyone.dev/_next/static/media/3fc2a9b7_14f9f16d.webp", "date_modified": "2024-07-03T00:00:00.000Z", "author": { "name": "Skyone", "url": "https://blog.skyone.dev/about/" } }, { "id": "https://blog.skyone.dev/2024/archlinux-plasma-faq/", "content_html": "

RSS阅读器可能无法处理 LaTeX 数学公式、代码块高亮等高级功能，请阅读原文以获取最佳阅读体验。

去年11月我写了一篇ArchLinux安装GNOME桌面，也正是那时候我将电脑的主要系统从Windows转到了ArchLinux。诚然， gnome 很好，如果你需要一个不需要折腾就能用的桌面环境，那么 gnome 是一个不错的选择。

\n

我一开始也是这么想的，直到……今年 KDE Plasma 6 发布了。我不得不说，KDE Plasma 6 的演示视频真的很吸引人，所以我决定尝试一下，于是我又折腾了一遍系统，这次安装的是 KDE Plasma 桌面。新的大版本发布，肯定有大量的问题，尤其是搭配 NVIDIA 和 Wayland 这两个离谱的玩意。Wayland 由于 x11 历史包袱太重，经常出现兼容问题（尤其是 Chromium），而 NVIDIA 一直以来都是 Linux 用户的痛点，Linus 骂的一点都不冤。

\n

现在新系统用了也有一段时间了，是该动笔记录一下，免得下次装又到处找资料。这次文章分两部分：安装 KDE Plasma 桌面和常见问题解决。欢迎大家在评论区补充。

\n\n

安装 KDE Plasma 桌面

\n

Arch Linux 的安装已经老生常谈了，见安装 ArchLinux & Windows 双系统。这里只记录安装 KDE Plasma 桌面的步骤。

\n

首先，经过一系列的安装步骤，你应该已经进入了 ArchLinux 命令行，并有了一个属于 wheel 组的非 root 用户。接下来，我们就可以安装 KDE Plasma 桌面了。

\n
sudo pacman -S plasma-meta sddm networkmanager bluez-utils\n
\n

官方提供了多个包，plasma-meta 是一个元包，包含了 KDE Plasma 桌面的所有组件基本组件。此外，你也可以选择 plasma 包组，它包含的软件和 plasma-meta 是一样的，关于元包和包组的区别，可以参考ArchWiki | Meta package and package group。还有两个可选的包：kde-applications 和 kde-applications-meta，它们包含了一些额外的应用程序，比如 Dolphin 文件管理器、Konsole 终端等。但是这里我选择后续自己安装需要的应用程序。

\n

sddm 是 KDE Plasma 的默认登录管理器，networkmanager 是网络管理器，bluez-utils 是蓝牙管理工具。

\n

不要急着启动桌面，这时候我们还没安装终端模拟器，进去就出不来了（笑）。接下来我们安装终端模拟器、文件管理器。

\n
sudo pacman -S konsole dolphin\n
\n

konsole 是 KDE Plasma 的终端模拟器，dolphin 是 KDE Plasma 的文件管理器。

\n

接下来我们启用 sddm 服务，这样就会直接进入 KDE Plasma 桌面了。

\n
sudo systemctl enable --now sddm\n
\n

在桌面环境下打开 konsole 终端，启动 networkmanager 和 bluetooth 服务。

\n
sudo systemctl enable --now NetworkManager bluetooth\n
\n

常见配置

\n

中文字体

\n

我推荐 noto-fonts-cjk，它是 Google 的开源字体，支持中日韩文。此外，noto-fonts-emoji 是支持 emoji 表情的字体，noto-fonts-extra 是支持更多语言的字体。

\n
sudo pacman -S noto-fonts-cjk noto-fonts-emoji noto-fonts-extra\n
\n

然后进入系统设置，把语言设置为中文，注销重新登录。

\n

一些常用程序推荐

\n\n

输入法

\n

最重要的当然是输入法了，我使用 fcitx5。

\n
sudo pacman -S fcitx5 fcitx5-chinese-addons fcitx5-qt fcitx5-gtk fcitx5-configtool\n
\n

网上一堆教程全是基于 x11 的，到了 wayland 就不好使了。我自己试了很久，过程如下：

\n

在设置的 “键盘” - “虚拟键盘” 里面选择 fcitx5 即可让输入法自动启动，编辑 /etc/environment 文件，添加：

\n
XMODIFIERS=@im=fcitx\nSDL_IM_MODULE=fcitx\n
\n

注意不要包含 GTK_IM_MODULE 和 QT_IM_MODULE，这是 x11 的设置，wayland 不需要，如果有的话，注释掉。

\n

设置里 “语言和时间” - “输入法” 添加简体中文即可，甚至不需要注销即可使用。

\n

在最新的 chromium 里，一开始出现的无法输入中文的问题已经解决了，不需要特殊处理。

\n

万恶的 NVIDIA 驱动

\n

尽管 Arch Linux 提供里开箱即用的 NVIDIA 驱动包，但在 plasma + wayland 仍然有问题。首先安装 nvidia 驱动：

\n
sudo pacman -S nvidia\n
\n

这时一定不要重启，否则会进不去桌面。先创建 /etc/modprobe.d/nvidia_drm.conf 文件，添加：

\n
options nvidia-drm modeset=1\n
\n

再编辑 /etc/mkinitcpio.conf 文件，修改 HOOKS 行，将 kms 去掉，然后重新生成 initramfs：

\n
sudo mkinitcpio -P\n
\n

最后重启电脑，应该就可以进入 KDE Plasma 桌面了。

\n

kvm 虚拟机

\n

尽管日常生活大部分工作都可以在 Linux 下完成，但有时候还是需要 Windows 的，比如 Office 就无可替代。我使用 virt-manager + qemu + kvm 来运行 Windows 虚拟机。

\n
sudo pacman -S qemu-full libvirt virt-manager dnsmaq\n
\n

其中 qemu-full 包含了全部的 qemu 组件，比较省事，反正也没多大；libvirt 是虚拟化管理工具的后端；virt-manager 是图形化的虚拟机管理工具；dnsmaq 是 DNS 服务器，用于虚拟机的网络。

\n

将自己加入 libvirt 组，这样就不用每次都 sudo 了：

\n
sudo usermod -aG libvirt $USER\n
\n

启动 libvirtd 服务：

\n
sudo systemctl enable --now libvirtd\n
\n

之后就可以打开 virt-manager 创建虚拟机了，顺便写写如何在 virt-manager 下安装 Windows 10 LTSC。

\n

Windows 10 LTSC 虚拟机

\n

首先下载 Windows 10 LTSC 镜像，然后打开 virt-manager，点击 “创建新虚拟机”，选择 “本地安装媒体”，选择下载的镜像文件。

\n

选择引导为 UEFI，系统类型选择 Windows 10，内存和 CPU 根据自己的电脑配置选择，其中 CPU 的拓扑从上到下分别是 sockets（指的是 CPU 插槽）、cores（指的是 CPU 核心）、threads（指的是 CPU 线程），比如我的电脑是 6 核 12 线程，那么我选择 1、6、12。

\n

硬盘选择 qcow，类型设置为 virtio，也就是半虚拟化的硬盘，性能非常出色。

\n

网络我选择 nat。

\n

还需要准备一个 virtio 驱动，下载地址：Fedora VirtIO Drivers ISO，在虚拟机设置里添加一个光驱，选择这个 ISO 文件。

\n

整个安装过程基本和实体机一样，但在选择安装位置的时候，需要先加载 virtio for win10 x64 驱动，然后才能看见硬盘。

\n

安装完成后还要进入刚刚挂载的 virtio 驱动光盘，安装 virtio 网卡驱动，不然网络无法使用。以及显卡驱动 qxldod，不然分辨率很低。安装 spice 驱动，可以让虚拟机和宿主机共享剪贴板。安装 qeumu-guest-agent，可以让虚拟机和宿主机通信。

\n

常见问题解决

\n

无法进入桌面

\n

上面的安装 KDE Plasma 桌面里提到了，安装完 NVIDIA 驱动后，一定要修改 /etc/modeprobe.d/nvidia_drm.conf 文件，添加：

\n
options nvidia-drm modeset=1\n
\n

如果还是没有效果，按键盘 Ctrl + Alt + F2 进入命令行，登录后执行：

\n
cat /sys/module/nvidia_drm/parameters/modeset\n
\n

如果返回 N，则说明没有生效，执行，那就换个方案，删除 /etc/modeprobe.d/nvidia_drm.conf 文件，然后编辑 /etc/default/grub 文件，修改 GRUB_CMDLINE_LINUX_DEFAULT 行，在引号里添加：

\n
nvidia-drm.modeset=1\n
\n

然后更新 grub 配置：

\n
sudo grub-mkconfig -o /boot/grub/grub.cfg\n# 这里的路径根据自己的系统配置而定，也可能是 /boot/efi/grub/grub.cfg\n
\n

重启电脑，应该就可以进入 KDE Plasma 桌面了。

\n

无法输入中文

\n

如果实在无法输入中文，可以尝试按照 x11 的方式配置，尽管不推荐，但是仍然可以使用。具体来说，编辑 /etc/environment 文件，添加：

\n
GTK_IM_MODULE=fcitx\nQT_IM_MODULE=fcitx\nXMODIFIERS=@im=fcitx\nSDL_IM_MODULE=fcitx\n
\n

在设置里 “自动启动” 里添加 fcitx5，然后注销重新登录。

\n

gpg 导致关机时间很慢

\n

经过多次测试，确认是 KDE 的 gpg GUI kleopatra 无法正常退出导致的。这个目前没法解决，只能等待修复，在这之前要么关机前手动退出 kleopatra，要么卸载 kleopatra。

\n

卸载了 kleopatra git 的签名就无法验证了，需要额外安装 pinentry：

\n
sudo pacman -S pinentry\n
\n

在 ~/.gnupg/gpg-agent.conf 文件中添加：

\n
pinentry-program /usr/bin/pinentry-qt\n
", "url": "https://blog.skyone.dev/2024/archlinux-plasma-faq/", "title": "ArchLinux KDE Plasma安装及常见问题", "summary": "ArchLinux KDE Plasma 6 安装及常见问题解决。本文根据个人使用经验整理，包含从安装 KDE Plasma 桌面到常见问题解决的全过程。", "image": "https://blog.skyone.dev/_next/static/media/d74c1156_4974e76b.webp", "date_modified": "2024-05-19T00:00:00.000Z", "author": { "name": "Skyone", "url": "https://blog.skyone.dev/about/" } }, { "id": "https://blog.skyone.dev/2024/css-scope/", "content_html": "

本文使用MDX编写，部分内容RSS阅读器无法处理，请阅读原文以获取最佳阅读体验。

\n

备注

\n

\n

本文是 MDN | @scope 的翻译，并根据我自己的理解进行了适当地修改和补充。采取与原文相同的许可证。

\n

截至 2025 年 5 月，Firefox 仍然不支持 @scope 规则，但是 Chrome 与 Safari 已经支持。详情查看 Can i use @scope。

\n
\n

@scope 可以让我们精确的定位 DOM 子树中的元素，而无需编写难以覆盖的过于特定的选择器，并且不会将选择器与 DOM 结构耦合得太紧密。

\n

在 JavaScript 里，可以使用 CSSScopeRule 访问 @scope 规则。

\n
（此部分使用MDX渲染，请查看原文）
\n

语法

\n

@scope 包含一个或多个规则集（称为作用域样式规则），并定义将它们应用于选定元素的范围。 @scope 可以通过两种方式使用：

\n
    \n
  1. \n

    像其他 at 规则一样，作为 CSS 中的独立块，可以指定规则的作用域上限和下限。

    \n
    @scope (scope root) to (scope limit) {\n  rulesets\n}\n
    \n
    2. \n
  2. \n

    作为内联样式（ <style> 标签内的样式）包含在 HTML 中的，在这种情况下，两个限定参数可以被省略，并且包含的规则集自动将范围限定为 <style> 元素的封闭父元素。

    \n
    <parent-element>\n  <style>\n    @scope {\n      rulesets\n    }\n  </style>\n</parent-element>\n
    \n
    3. \n
\n

描述

\n

复杂的 Web 文档可能包括页眉、页脚、新闻文章、地图、媒体播放器、广告等组件。随着复杂性的增加，有效管理这些组件的样式变得更加困难，而通过限定样式的范围有助于我们管理这种复杂性。让我们考虑以下 DOM 树：

\n
body\n└─ article.feature\n   ├─ section.article-hero\n   │  ├─ h2\n   │  └─ img\n   │\n   ├─ section.article-body\n   │  ├─ h3\n   │  ├─ p\n   │  ├─ img\n   │  ├─ p\n   │  └─ figure\n   │     ├─ img\n   │     └─ figcaption\n   │\n   └─ footer\n      ├─ p\n      └─ img\n
\n

如果想选择带有 article-body 类的 <section> 内的 <img> 元素，可以执行以下操作：

\n\n

这就是 @scope 有用的地方。它可以定义一个精确的范围，让 CSS 选择器只作用于这个范围之内。例如，上述问题可以这么解决：

\n
@scope (.article-body) to (figure) {\n  img {\n    border: 5px solid black;\n    background-color: goldenrod;\n  }\n}\n
\n

由于 .article-body 指定了 CSS 规则生效的上限，而 <figure> 指定了下限。CSS 规则只作用于 .article-body 与 <figure> 之间的元素，不会选择 <figure> 元素内的元素。

\n
\n

备注

\n

\n

这种具有上限和下限的范围通常称为环形范围。

\n
\n

如果你想选择带有 article-body 类的 <section> 内的所有图像，也可以省略范围限制：

\n
@scope (.article-body) {\n  img {\n    border: 5px solid black;\n    background-color: goldenrod;\n  }\n}\n
\n

或者，你可以采用刚刚提到的第二种写法，将 @scope 块内联包含在 <style> 元素内，该元素又位于 <section> 内：

\n
<section class="article-body">\n  <style>\n    @scope {\n      img {\n        border: 5px solid black;\n        background-color: goldenrod;\n      }\n    }\n  </style>\n\n  <!-- ... -->\n</section>\n
\n
\n

重要

\n

\n

需要注意的是，虽然 @scope 将选择器的应用隔离到特定的 DOM 子树，但它并不能完全隔离这些子树内应用的样式。这在继承中最为明显——子级继承的属性（例如颜色或字体系列）仍然会被继承，超出任何设置的范围限制。

\n
\n

:scope 伪类

\n

在 @scope 块的上下文中，:scope 伪类代表作用域根，它提供了一种从作用域内部将样式应用到作用域根本身的简单方法：

\n
@scope (.feature) {\n  :scope {\n    background: rebeccapurple;\n    color: antiquewhite;\n    font-family: sans-serif;\n  }\n}\n
\n

事实上，会被 :scope 隐式地添加到所有作用域样内的式规则的前面。也就是说，任何 @scope 作用域内的 CSS 选择器前面都会被浏览器自动加上 :scope ，但是不计入 CSS 特异性。

\n

以下的三条规则是等价的 （但特异性不相等，查看@scope 的特异性）：

\n
@scope (.feature) {\n  img { ... }\n\n  :scope img { ... }\n\n  & img { ... }\n}\n
\n

注意事项

\n\n

@scope 的CSS特异性

\n

简单来说， @scope 不会改变其内部规则的特异性，例如：

\n
@scope (.article-body) {\n  /* img 的特异性是 0-0-1 */\n  img { ... }\n}\n
\n

但是，如果显式地将 :scope 伪类添加到作用域选择器之前，则在计算其特异性时需要将其考虑在内。:scope 与所有常规伪类一样，具有 0-1-0 的特异性。例如：

\n
@scope (.article-body) {\n  /* :scope img 的特异性为 0-1-0 + 0-0-1 = 0-1-1 */\n  :scope img { ... }\n}\n
\n

当在 @scope 块内使用 & 选择器时，& 代表作用域根选择器（上限选择器）；它在内部计算为包装在 :is() 伪类函数内的选择器。可能听不懂，直接看例子就明白了：

\n
@scope (figure, #primary) {\n  & img { ... }\n}\n
\n

& img 等价于 :is(figure, #primary) img。:is() 选择器的特异性为它内部生效的最大的 CSS 选择器的特异性，在这个例子中是 #primary ，特异性为 1-0-0 ，因此这个条规则的特异性为 1-0-1。

\n

:scope 与 & 的不同之处

\n

:scope 表示匹配的作用域根（指定的是元素本身），而 & 表示用于匹配作用域根的选择器（是选择器而不是选中的元素）。因此，可以多次应用 &（选择器可以重复使用多次）。但是，只能使用 :scope 一次（作用域根不能作为自身的子元素）。

\n
@scope (.feature) {\n  /* .feature 内的 .feature */\n  & & { ... }\n\n  /* 错误 */\n  :scope :scope { ... }\n}\n
\n

解决 @scope 冲突

\n

@scope 为 CSS 添加了一个新标准：范围邻近度。这表明当两个作用域具有冲突的样式时，将应用 DOM 树层次结构中到作用域根的跳跃次数最少的样式。让我们看一个例子来看看这意味着什么。

\n

采用以下 HTML 片段，其中不同主题的卡片相互嵌套：

\n
<div class="light-theme">\n  <p>Light theme text</p>\n  <div class="dark-theme">\n    <p>Dark theme text</p>\n    <div class="light-theme">\n      <p>Light theme text</p>\n    </div>\n  </div>\n</div>\n
\n

下面的 CSS 很符合直觉，但可惜是错误的：

\n
.light-theme {\n  background: #ccc;\n}\n\n.dark-theme {\n  background: #333;\n}\n\n.light-theme p {\n  color: black;\n}\n\n.dark-theme p {\n  color: white;\n}\n
\n

最里面的段落的文字应该被设置为黑色，因为它位于浅色主题卡内。但是，它是 .light-theme p 和 .dark-theme p 选择器的目标。由于 .dark-theme p 规则在源代码中出现得较晚，因此应用了该规则，因而该段落最终被错误地设置为白色。

\n

可以使用 @scope 解决此问题，如下所示：

\n
@scope (.light-theme) {\n  :scope {\n    background: #ccc;\n  }\n  p {\n    color: black;\n  }\n}\n\n@scope (.dark-theme) {\n  :scope {\n    background: #333;\n  }\n  p {\n    color: white;\n  }\n}\n
\n

现在，最里面的段落已正确着色为黑色。这是因为它距离 .light-theme 作用域根仅一级 DOM 树层次结构，但距离 .dark-theme 作用域根两级。因此，.light-theme 被应用。

\n
\n

重要

\n

\n

范围邻近性原则会覆盖源代码顺序原则，但其本身会被其他更高优先级的样式（例如 !importance、@layers 和特异性）所覆盖。

\n
\n

例子

\n

@scope 内的基本样式

\n

在此示例中，我们使用两个单独的 @scope 块分别将元素内的链接与 .light-scheme 和 .dark-scheme 类进行匹配。请注意 :scope 如何用于选择作用域根本身并为其提供样式。在此示例中，范围根是应用了类的 <div> 元素。

\n
（此部分使用MDX渲染，请查看原文）
\n

指定作用域根和范围限制

\n

在此示例中，我们有一个匹配 DOM 结构的 HTML 片段。该结构代表了一个典型的文章摘要。需要注意的关键特性是 <img> 元素，它嵌套在结构的各个级别中。

\n

这个示例的目的是展示如何使用作用域根和限制来样式化从层次结构的顶部开始的 <img> 元素，但仅限于（不包括）<figure> 元素内的 <img> —— 实际上创建了一个环形范围。

\n
（此部分使用MDX渲染，请查看原文）
", "url": "https://blog.skyone.dev/2024/css-scope/", "title": "CSS @scope 规则", "summary": "CSS @scope 规则可以让我们精确的定位 DOM 子树中的元素，而无需编写难以覆盖的过于特定的选择器，并且不会将选择器与 DOM 结构耦合得太紧密。本文将介绍 `@scope` 的语法、描述、注意事项等内容。本文是 MDN 的翻译，并根据我自己的理解进行了适当地修改和补充。", "image": "https://blog.skyone.dev/_next/static/media/d10e726e_5391a901.webp", "date_modified": "2024-05-06T00:00:00.000Z", "author": { "name": "Skyone", "url": "https://blog.skyone.dev/about/" } } ] }