本次项目的技术合作伙伴，主要是 Claude Code、Codex、Cursor、OpenCode，以及半死不活的 Antigravity。为了达到目前的进展，雇佣他们花费 80$+，消耗了50 亿+的 Token。

而我在这次项目里的角色，也从过去 V1 那种古法全栈开发，转变成了一个产品经理：带着几个 Agent 同事，一步步完成需求分析、文档编写、UI 设计、前后端开发、自动化测试与部署的全流程。

期间也没少和他们为了某些实现细节、架构设计争论不休，在上下文里来回拉扯。好在结果论上，目前至少搞定了一个完成度还算不错的版本。目前整个项目已开源，具体的地址，放在了结尾。

这里用几个截图简单对比下 V1 和 V2 正式初版的差别（以下图片可手动翻页）。

也可以通过我归档的旧版域名访问对比：跳转旧版博客 （数据已不互通）。

那么，为什么我非要进行这次重写式的迭代升级？

原因其实并不复杂。

第一，V1 那版本身就不够完善。后台管理比较简陋，项目结构也略显混乱，很多东西都是当时为了能跑起来先堆上去的。

第二，V1 借助了太多第三方服务。比如腾讯云 COS，比如腾讯云的图形验证码服务。结果就是，很多时候第三方服务一变，某个流程就直接瘫痪，比如注册、图片上传这类场景。

所以 V2 里，我把对象存储换成了开源的 Garage，验证码也改成了用 GoCaptcha 自己实现。能自己掌控的部分，就尽量自己掌控。

第三，我对一个博客这种并不算重量级的应用，却被一个 Spring Boot 后端服务占掉 300M+ 内存这件事，一直心存不满。

所以这次我干脆做了一次大刀阔斧的调整。

前台主站从 Nuxt 2 升级到了 Next 16 SSR；后台管理改成 React CSR；后端则从 Spring Boot 2 换成了 Gin。

我没有再选择那些看起来花里胡哨的新框架，而是尽量选择各个方向里成熟、稳定、可长期维护的方案。我期待这版博客能在底层上有一个更坚实的基础，成为一个可以长期稳定运行，并且不断在此基础上迭代的生产级项目，而不是每次改着改着又变成需要重写的开发版玩具。

接下来聊聊架构细节。

前端项目采用了 Monorepo 的组织方式。前台展示 Web 和后台管理 Admin，既是两个独立应用，又可以天然共享类型、组件、Hook 等公共模块。

组件库这块，我只引入了 React Aria 作为基础 UI 能力，尽可能减少第三方样式体系的干扰。后续所有组件，基本都是在这个基础上进行二次封装。

后端则作为整个前端的数据支撑。在 V1 已经有的文章、分类、音乐等基础管理能力之上，V2 又补上了数据统计、内容审核等多个核心模块。

数据统计模块的意义在于，博客以后可以不再依赖 Google Analytics 这类第三方统计服务。访问数据、用户行为、内容表现，都可以进一步掌握在自己手里。

内容审核这块，则做了一套更偏智能化的管理逻辑。系统会根据用户是否是新用户、历史审核情况、行为风险等信息，自动划分不同安全等级，并采用不同的处理策略。作为一个已经备案的网站，这部分也算是非常重要的风控能力。

另外，由于 V1 版本曾经遭遇过多次不同类型的攻击，所以这次 V2 在前后端结合层面，也做了更严厉的请求限制。

尤其是邮箱发送、用户注册、图片上传这些安全敏感，或者涉及资源写入的场景，只要超过正常用户的请求频率，就会逐步升级惩罚。当然，不同场景下也会有不同的释放规则，避免误伤正常用户。

接下来再讲讲性能，主要说前端这块。

作为服务端渲染应用，SSR 虽然能更快给出首屏内容，但也会有水合问题。水合完成之前，页面虽然已经显示出来了，但实际上还不能真正交互。

V1 版本里，我的做法比较粗暴：直接显示一个全屏加载页，等页面彻底加载好了再展示内容。

V2 则改成了主体骨架屏模式。页面会先展示出大体结构，再尽一切手段，尽快加载核心资源，比如 JS 和 CSS，让页面尽早进入可交互状态。

为此，我把图片等元素在服务端渲染阶段都先处理成纯骨架屏。等水合结束，页面可以正常交互后，再切换成懒加载图片。

图片这块也单独做了一层处理。

我在 Go 里专门实现了一套图片裁切、压缩和格式转换服务。上传时，会根据图片本身的情况进行合理转换，再存入 Garage；读取时，也会根据具体场景，响应式返回合适的尺寸和压缩比例。

这样就不会再出现一个头像动不动占 500KB 的情况。头像、封面、文章图片、后台预览图，不同场景都有对应的尺寸要求，不再是一张原图到处硬塞。

另外，图片和音乐资源也都加上了 CDN 鉴权，并且开启了防盗链。博客访问域名也额外加了一层中转，避免再次出现真实 IP 被直接攻击的情况。

一篇文章不足以说出全部的思考与升级点，暂且收尾，后续用更细分的文章分享吧。

总的来说，V2 不是一次简单的原有升级，而是一次多位一体的整体重写。

它远不到完美，但至少，目前这个博客从一个“跌跌撞撞”的个人项目，往一个更接近生产级的长期项目上推了一步。后续再慢慢迭代吧。

前端开源仓库：

https://github.com/yevpt/blog-frontend

后端开源仓库：

https://github.com/yevpt/blog-backend

1. 安装Nvm

虽然可以直接在官网下载Node最新版本进行安装与配置。但是出于对于多版本切换的需求以及可能性，我的主张一直是尽可能地直接安装Nvm，一个Node的版本管理工具。

1.1 Linux环境

使用nvm-sh进行安装，可以查看nvm-sh的网站查看最新版本的安装脚本。

1.1.1 使用脚本下载安装

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

注意：如果此脚本无法执行成功，一般是国内服务器的网络不通。 可以访问IPAddress.com，输入raw.githubusercontent.com，查询到真实IP地址。 然后修改hosts解锁真实ip，操作如下：

-- 1. 打开并编辑hosts文件
sudo vi /etc/hosts
-- 2. 在hosts文件中填写以下内容，*.*.*.*为刚才查询到的真实ip
*.*.*.* raw.githubusercontent.com

1.1.2 关掉并重新打开Shell

1.1.3 查看Nvm版本

nvm --version

使用此脚本安装的Nvm对应的安装目录如下： ROOT用户：/root/.nvm 其他用户：/home/username/.nvm

1.1.4 更换Nvm为淘宝源

-- 1. 打开环境配置文件
vi ~/.bash_profile 
-- 2. 输入以下环境配置，修改镜像为淘宝源
NVM_NODEJS_ORG_MIRROR=http://npm.taobao.org/mirrors/node
-- 3. 执行以下命令，使其生效
source ~/.bash_profile

1.2 Win环境

1.2.1 安装

访问nvm-windows，并下载nvm-setup.zip。 下载完成后解压，点击安装即可。无需任何配置。

需要注意的是，在安装之前，请务必卸载或删除以下内容：

• 任何存在的node版本
• 现有的nodejs安装目录（例如：C:\Program Files\nodejs）
• 现有的NPM目录（例如C:\Users\xxx\AppData\Roaming\npm）

1.2.2 更换源

安装目录下，找到settings.txt并添加以下内容：

node_mirror: https://npm.taobao.org/mirrors/node
npm_mirror: https://npm.taobao.org/mirrors/npm

1.3 Mac环境

在Mac下安装Nvm，首先请注意，不要使用Homebrew进行安装!原因如下：

Homebrew installation is not supported. If you have issues with homebrew-installed nvm, please brew uninstall it, and install it using the instructions below, before filing an issue.

出自 Nvm 官方文档

接下来说下正确的安装方式：

1.3.1 安装

终端执行命令：

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.37.2/install.sh | bash

1.3.2 测试是否安装成功

终端输入nvm list 看是否成功执行。 如果一切正常，此时NVM应可以在终端使用。 因为之前的安装命令会在.bash_profile文件中加入：

export NVM_DIR="/Users/$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"  # This loads nvm

1.3.3 更换源

在.bash_profile中加入：

export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node

同时让.bash_profile的更改即时生效

source .bash_profile

2. 使用Nvm安装、管理Node版本

2.1 安装Node

2.1.1 查看当前所有可以安装的版本

-- Mac OR Linux
nvm ls-remote
-- Win
nvm list available

2.1.2 安装选择好的版本，例如v14.15.0

nvm install v14.15.0 

2.1.3 切换版本安装好的版本

nvm use v14.15.0 

2.1.3 设置默认版本为切换的版本

如果存在旧版本，当安装了新版本，会出现使用use指令切换版本后，再次打开终端，还是使用旧版本的情况，此时，可以使用nvm alias default指定默认版本即可。

nvm alias default v14.15.0  

2.1.4 测试是否安装与配置成功

node -v

2.1.5 Linux的相关安装目录

默认全局包目录： /.nvm/versions/node/vx.x.x/lib/node_modules 默认全局bin目录：/.nvm/versions/node/vx.x.x/bin 默认配置：/user/.npmrc

2.2 Nvm的常用命令总结如下：

• nvm list 当前安装的所有NODE版本
• nvm ls-remote 查看所有的NODE可用版本
• nvm list available 查看所有的NODE可用版本(WIN10)
• nvm v 查看版本
• nvm install latest 安装最新版NODE版本
• nvm install xxx 下载你想要的版本
• nvm use xxx 使用指定xxx版本的NODE
• nvm alias default xxx 设置默认版本
• nvm uninstall xxx 卸载xxx版本的NODE

2.3 更换Npm源

2.3.1 方式1 指定默认源

npm config set registry https://registry.npm.taobao.org

2.3.1 方式2 安装Nrm进行源管理与切换 （推荐）

-- 1. 安装nrm
npm install -g nrm
-- 2. 查看可选的源，可以看到一个taobao的源
nrm ls 
-- 3. 测试相应源的响应时间
nrm test 
-- 4. 切换到taobao源
nrm use taobao

2.3.2 方式3 使用Cnpm（不推荐）

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后就可以使用Cnpm代替Npm。

个人不是很推荐这种方式，有时候安装依赖包会出现各种问题。

3. Npm备用命令

• 查看全局安装过的包

npm list -g --depth 0

• 升级依赖（空格选择，回车升级）

- npm-check
- npm install -g npm-check
- npm-check -u -g

• 配置Npm代理

npm config set proxy=http://127.0.0.1:xxxx

4. 常见问题的解决

• Electron安装失败

安装Electron时，可能会出现安装缓慢，甚至无法安装的问题，此时替换下Electron源即可。

npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron

• node-sass安装失败的问题

npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass

• windows-build-tools

npm install --global --production windows-build-tools
npm config set python "C:\\\\Users\\\\xxx\\\\AppData\\\\Local\\\\Programs\\\\Python\\\\Python39\\\\python.exe"

• Npm或者Yarn安装chromedriver时失败

npm config set chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
yarn config set "chromedriver_cdnurl" "https://npm.taobao.org/mirrors/chromedriver"

• list -g lead to npm ERR! missing error?

npm update -g --verbose

5 参考

• nvm 解决nodejs无法全局/usr/bin/node问题
• nvm-github
• 正确的安装和使用nvm(mac)