https://voocii.com A modular personal website platform Wed, 12 Aug 2026 14:10:02 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed en-US © 2026 Voocii https://voocii.com/blog/mcp-stdio https://voocii.com/blog/mcp-stdio Wed, 12 Aug 2026 14:10:02 GMT { const { page, limit } = input; // 以下 url 需要修改为你自己的 API 结构， // 或者直接用那个天气 API：https://api.weather.gov/alerts/active?area=CA const url = `${API_URL}/posts?page=${page}&limit=${limit}`; const response = await fetch(url); if (!response.ok) { throw new Error(`Failed to fetch posts: ${response.statusText}`); } const data = await response.json(); return { content: [ { type: 'text', text: JSON.stringify(data) } ] }; } ); return server; } serveStdio(createServer); console.error("MCP server is running. You can now connect to it using a compatible client."); ``` ### 4. 运行测试 服务器代码写好后，编译一下确保没问题： ```bash npx tsc ``` 启动 MCP Inspector 来检查服务器是否正常： ```bash npx @modelcontextprotocol/inspector npx tsx server.ts ``` 会在浏览器启动一个 web app （实际上就是一个 MCP 客户端），从界面上调用服务器可用的工具： 工具列表：  选择获取博客，然后点击执行：  测试没问题后可以 Ctrl + C 停止运行服务器。到时客户端运行后会自动开启服务器。 ## 客户端 MCP Client ### 1. 初始化项目 ```bash mkdir mcp-client && cd mcp-client npm init -y npm pkg set type=module ``` ### 2. 安装依赖 ```bash npm install @modelcontextprotocol/client dotenv npm install -D typescript @types/node tsx ``` ### 3. 创建源代码文件 `client.ts` - 引入依赖 新版本的依赖包从 sdk 拆分为 server 和 client。这里引入 server 包： ```typescript import { Client } from '@modelcontextprotocol/client'; import { StdioClientTransport } from '@modelcontextprotocol/client/stdio'; import dotenv from 'dotenv'; ``` - 创建客户端 ```typescript dotenv.config(); // 确保 API_URL, API_KEY 等环境变量可以从 .env 文件中读取 const client = new Client({ name: "blog-posts-client", version: "0.0.1" }); // command 和 args 组成启动 **服务器** 的命令： npx tsx ../mcp-server/server.ts // server.ts 的路径也可以改成绝对路径，能让客户端/host找到就行 // 要注意这个 env 参数，如果服务器那边向上面的代码那样用到了 process.env.xxxx 来引入环境变量， // 那么客户端这里必须加上服务器需要的每一个环境变量：API_URL，API_KEY const transport = new StdioClientTransport({ command: "npx", args: ["tsx", "../mcp-server/server.ts"], env: { ...process.env, API_URL: process.env.API_URL || '', API_KEY: process.env.API_KEY || '' } }); // 必须用 await，否则后面的调用服务操作将不可预料 await client.connect(transport); // client.listTools() 能正确返回服务器注册的工具列表的前提是，创建服务器时加上 tools 的能力： // const server = new McpServer( // { "name": "blog-posts", "version": "0.0.1" }, // { capabilities: { tools: {} } } // ); // // 否则会报错： // Client.listTools() called but server does not advertise tools capability - returning empty list const {tools} = await client.listTools(); console.log("Available tools:"); tools.forEach((tool) => { console.log(`- ${tool.name}: ${tool.description}`); }); const fetchPostsResult = await client.callTool({ name: 'fetch-posts', // 精确匹配服务器里注册好的工具 arguments: { page: 1, limit: 5 } // 工具参数 }); for (const block of fetchPostsResult.content) { if (block.type === 'text') console.log(block.text); } ``` ### 4. 运行测试 客户端代码写好后，编译一下确保没问题： ```bash npx tsc ``` 启动客户端： ```bash npx tsx client.ts ``` 客户端执行结果：  ## 把 MCP 服务器配置到 codex 有两种方式 ### 1. 修改配置文件 可以直接修改 `config.toml` 文件： ```bash vim ~/.codex/config.toml ``` 添加以下内容： ```text [mcp_servers.blog-tools] enabled = true command = "npx" args = ["tsx", "/Users/rick/src/mcp-server/server.ts"] [mcp_servers.blog-tools.env] API_URL = "https://localhost:3000/api/v1/" API_KEY = "xxxYYYzzz=" ``` 上面一块内容主要是启动服务器的命令、参数和服务器代码的绝对路径；下面一块内容是环境变量。 ### 2. codex 界面上添加 设置 \ 插件 \ 添加 \ 添加 MCP 服务器，然后填入名称，命令，参数，以及环境变量  最后保存，确保工具是启动状态 `enabled = true`，然后重新启动 codex。 ### 3. 对话 codex 之后就可以开始让 codex 用了。对话时可以先让 codex 知道有个博客工具的 MCP 服务器，然后让他查个博客之类的工作，有了上下文，后续就可以直接说发布哪个目录下你写好的文章：  ]]> rick-hayek https://voocii.com/blog/mcp-2026-07-28 https://voocii.com/blog/mcp-2026-07-28 Mon, 03 Aug 2026 09:00:28 GMT rick-hayek https://voocii.com/blog/vpn-openvpn https://voocii.com/blog/vpn-openvpn Sat, 01 Aug 2026 14:35:38 GMT 注：这不是我写的脚本，而是来自github开源库，文章末尾有链接，不用担心安全问题。之所以我自己保存了一份，是因为脚本经常会更新，我这个版本我一直在用，很稳定。你也可以直接从GitHub上获取最新版的，自己看他的文档怎么运行，我看了基本也是一键安装，但我不保证最新版的安装配置能一切顺利。 3. 把服务器上创建的profile文件导出到你需要科学上网的手机或电脑上； 4. 从OpenVPN官网下载手机/电脑客户端，并安装； 5. 打开OpenVPN，导入Profile文件，连接； 6. 愉快的科学上网； ## 先决条件 脚本支持以下 Linux 发行版： | 操作系统 | 支持 | |---|---| | Amazon Linux 2023 | ✅ | | Debian >= 11 | ✅ | | Oracle Linux >= 8 | ✅ | | Rocky Linux >= 8 | ✅ | | Ubuntu >= 18.04 | ✅ | ## 安装步骤 ### 准备工作 ```bash # 在基于 Debian 的系统上更新软件包列表 sudo apt update && sudo apt upgrade -y ``` ### 安装 OpenVPN ```bash # 下载安装脚本 sudo curl -o install-openvpn.sh https://voocii.com/references/install-openvpn # 设置脚本执行权限 sudo chmod -v +x install-openvpn.sh # 运行脚本安装 OpenVPN 服务端 sudo ./install-openvpn.sh ``` 安装过程中如果有提示，尽量选择默认选项。 ### 客户端连接 在上一步安装过程中，会生成一个 `.ovpn` 客户端配置文件。如果你是以 root 用户登录的，请把它复制到普通用户目录下。 ```bash # 将客户端 ovpn 文件复制到普通用户目录 cp my-client.ovpn /home/ubuntu/ ``` ### 配置 UDP 端口 > [!WARNING] > 如果你在安装过程中没有修改端口，默认使用 UDP 1194。请确保防火墙或安全组已经开放 UDP 1194。 #### 安全策略示例 | 规则 | IP 版本 | 协议 | 端口 | 源地址 | 是否允许 | |---|---|---|---|---|---| | 入站 | IPv4 | UDP | 1194 | 0.0.0.0/0 | ✅ | | 入站 | IPv6 | UDP | 1194 | ::/0 | ✅ | ## 配置 VPN 连接 1. 将客户端的 `.ovpn` 文件（也就是总览中提到的profile文件）复制到你要连接 VPN 的客户端设备上。 ```bash # 设置私钥文件权限 chmod 400 serversecuritykey.pem # 从 VPN 服务器复制客户端配置文件到本地 # 服务器公网 IP 示例：10.20.30.40 sftp -i serversecuritykey.pem ubuntu@10.20.30.40:my-client.ovpn ./ ``` 或者使用： ```bash scp root@10.20.30.40:~/my-client.ovpn ./ ``` 2. 安装 OpenVPN 客户端软件，可从 [OpenVPN 官方网站](https://openvpn.net/client/) 下载。 3. 将 `.ovpn` 配置文件导入 OpenVPN 客户端，然后尝试连接 VPN 服务端。 ## 使用安装脚本新增客户端（推荐） 1. 重新运行安装脚本： ```bash # 重新运行 openvpn-install.sh sudo ./openvpn-install.sh --help ``` 之后会提示 OpenVPN 已经安装，并提供以下选项： - 1) 添加新用户 - 2) 撤销已有用户 - 3) 删除 OpenVPN - 4) 退出 选择 `1` 即可添加新客户端。 2. 将客户端文件从 root 目录复制到普通用户目录： ```bash cp my-client.ovpn /home/ubuntu ``` 3. 将客户端配置文件复制到本地电脑： ```bash sftp -i serversecuritykey.pem ubuntu@10.20.30.40:my-client.ovpn ./ ``` ## 排查问题 ### 服务端 ```bash # 查看服务状态 sudo systemctl status openvpn@server # 停止服务 sudo systemctl stop openvpn@server # 启动服务 sudo systemctl start openvpn@server # 重启服务 sudo systemctl restart openvpn@server # 查看服务日志 journalctl -xeu openvpn@server.service # 检查 1194 端口是否被占用 sudo ss -tulpn | grep :1194 # 杀掉所有 OpenVPN 进程 sudo pkill -9 openvpn # 查看服务端配置文件 cat /etc/openvpn/server.conf ``` ### 客户端 ```bash # 测试服务端 UDP 1194 端口连通性 nc -zvu 10.20.30.40 1194 ``` ## 参考资料 可以参考 GitHub 上的最新安装脚本：[openvpn-install](https://github.com/angristan/openvpn-install) ]]> rick-hayek https://voocii.com/blog/perf-tune-for-personal-portal https://voocii.com/blog/perf-tune-for-personal-portal Tue, 14 Jul 2026 12:30:57 GMT ( cacheKey: string, fetcher: () => Promise, options = { revalidateOnMount: true } ) { const [data, setData] = useState(null); const [error, setError] = useState(null); const [isValidating, setIsValidating] = useState(true); // 1. 客户端挂载后，立即恢复本地缓存 useEffect(() => { if (typeof window === 'undefined') return; const cached = localStorage.getItem(cacheKey); if (cached) { try { setData(JSON.parse(cached)); } catch (e) { localStorage.removeItem(cacheKey); } } }, [cacheKey]); // 2. 静默发起请求校验并更新 useEffect(() => { let active = true; async function revalidate() { setIsValidating(true); try { const freshData = await fetcher(); if (!active) return; const freshString = JSON.stringify(freshData); const cachedString = localStorage.getItem(cacheKey); if (freshString !== cachedString) { setData(freshData); localStorage.setItem(cacheKey, freshString); } } catch (err: any) { if (active) setError(err); } finally { if (active) setIsValidating(false); } } if (options.revalidateOnMount) { revalidate(); } return () => { active = false; }; }, [cacheKey, fetcher, options.revalidateOnMount]); return { data, error, isValidating }; } ``` --- ## 2. 移除 rehype-highlight 默认全语言包，精简 1.5MB+ 压缩体积 许多人写技术博客会使用 `rehype-highlight` 做代码高亮。但默认的 `rehype-highlight`（基于 Highlight.js）会在打包时**静态引入所有 190 多种编程语言的解析语法包**。 这会导致你 Next.js 构建出来的 Node.js/Edge Server Bundle 体积瞬间膨胀几兆，从而无法部署到 Cloudflare 免费版。 ### 解决方案：基于 `lowlight` 定制轻量高亮插件 既然是个人博客，我们常用的编程语言大概只有 10 种左右（例如：JS、TS、Rust、Python、Go、SQL、HTML/CSS、Bash、Markdown、JSON、YAML）。我们完全可以写一个自定义的 Rehype 插件，只静态注册我们需要的这几种语言，从物理上避开其它 150 多种语言的打包。 在你的 lib 目录下新建 `rehype-custom-highlight.ts`： ```typescript import { createLowlight } from 'lowlight'; import javascript from 'highlight.js/lib/languages/javascript'; import typescript from 'highlight.js/lib/languages/typescript'; import python from 'highlight.js/lib/languages/python'; ... // 仅注册博客用得到的常用语言 const lowlight = createLowlight({ js: javascript, javascript, ts: typescript, typescript, py: python, python, ... }); // 手写简单的 HAST 树递归遍历，避免引入额外的 node_modules 辅助库 function walk(node: any, callback: (node: any, parent: any) => void, parent?: any) { callback(node, parent); if (node.children && Array.isArray(node.children)) { for (const child of node.children) { walk(child, callback, node); } } } export default function rehypeCustomHighlight() { return function (tree: any) { walk(tree, (node: any, parent: any) => { if (node.tagName !== 'code' || !parent || parent.tagName !== 'pre') return; const className = node.properties?.className || []; const langClass = className.find((cls: any) => typeof cls === 'string' && cls.startsWith('language-')); const lang = langClass ? langClass.slice(9) : null; if (!lang) return; try { const text = node.children[0]?.value || ''; const result = lowlight.highlight(lang, text, { prefix: 'hljs-' }); if (result.children && result.children.length > 0) { node.children = result.children; } if (!node.properties.className.includes('hljs')) { node.properties.className.unshift('hljs'); } } catch (err) { // 遇到未知语言静默跳过高亮 } }); }; } ``` 将 `MDXRemote` 或编译流水线中的 `rehypeHighlight` 替换为上面的 `rehypeCustomHighlight`，打包体积即可降 **1.5MB+ Gzip 压缩体积**！ --- ## 3. 重型依赖包调优法则：寻找轻量级替代、CDN 混载与按需自实现 在 Next.js 服务端开发（尤其是在部署到 Cloudflare Workers 等 Edge runtime 资源限制严格的环境）中，引入第三方功能包是导致构建体积超限的主因。如何系统性地瘦身庞大的第三方依赖？可以遵循以下四项通用的精简法则： ### A. 寻找轻量级替代品 (Alternative Finder) 在引入大包（例如富文本编辑器、数学公式排版、三维渲染等）之前，先通过 `bundlephobia` 检查其打包体积。 * **法则**：如果一个包的体积已经超过 100KB (Gzip)，检查是否有功能精简但极度轻量的替代方案。例如，用轻量级的自定义编译器取代厚重的编译排版插件；或者用只针对单功能的微型库代替全能庞大的通用大包。 ### B. 服务端与客户端分工协作 (Server-Client Coordination) 有些第三方重型包的工作可以拆分为“结构解析”与“渲染排版”两部分： * **服务端（解析防爆屏蔽）**：在服务端只引入轻量级的词法解析插件（通常只有几 KB）。它仅仅在渲染前对源 Markdown 或 HTML 文本做语法标记和分词，并转换为普通的 HTML 自定义类名（如 `...`），借此防止渲染引擎把特殊符号错误地解析为 JS/JSX 表达式，避开 Acorn 等编译器崩溃的问题。 * **客户端（真正编译计算）**：重型的排版计算逻辑完全由客户端的 `` 组件异步承接。 ### C. CDN 外部混载方案 (CDN & Local Hybrid) 为了彻底将重型引擎从本地打包中剥离： * **法则**：不要用 `import` 将引擎 JS/CSS 静态打包进项目。而是仅在需要的动态页面中，通过 HTML 的 `