知名博主鱼皮「面试鸭」背后的网站技术架构浅分析

[toc]

「鱼皮」简介

「鱼皮」是国内这两年各自媒体平台上一个存在感很强的博主，全称「程序员鱼皮」。

只要和「写程序」沾上一点边的一些知名博主，其评论区经常可看到他的影子，真是一个勤奋的小伙子，背后不知为让自己的影响力度散播更大，付出多少努力。在很长一段时间，一直延续到现在，他依然能常常活跃到 bilibili 的首页视频页。

https://space.bilibili.com/12890453

他动手能力很强，人应该很聪明，第一份工作在腾讯公司，之后辞职创业了。

他在自媒体上发布的视频，大都是一些知识分享，也有很多他的各种小项目，优秀的素质和狂热的活力让他备受欢迎，粉丝蹭蹭蹭往上涨，据小道消息，仅仅一个「知识星球」就让他挣了百来万了，卧槽.....

然而，他才 23 岁，当然一个年龄数字的话不好判断人命的真实长短，因为有周岁、虚岁等等。他说他是 1999 年出生的，那显然，比我大个两岁，我是 2001 年末的。

马斯克二十多岁就亿万富翁，而抖音什么抬杠冠军大蓝，也自称大二就挣够 80 万了，WordPress 的作者，23 岁也已经是亿万富翁了......

我一个只追求纯粹和艺术化生活的人，突然想到每天中午自己馋的想点外卖却还要不停算账那狼狈模样，反观数不清的各种年少得志的他们，年纪轻轻就拥有了富可敌村、富可敌镇的强大力量...... 我实在备受刺激。乌合之众，芸芸众生，望向大街，人来人往熙熙攘攘又皆为利往......

去年初，我还在学校时，他发布了个辅助网友们背诵计算机知识点八股文的「面试鸭」网站，当然，那时候感觉这个「面试鸭」上线后在网上很受欢迎和“欢迎”，社区活跃度很高，以及每天都有人给他"送" DDOS 攻击套餐等等，还有给他挖掘各种漏洞。

我也像追剧一样，天天看他的更新，看他不停扮演“小丑”。有一天他公布了其「面试鸭」的技术架构，我不假思索点击进去，嗯，说实话，这个五分钟不到的视频，却震撼了我很久。

https://www.bilibili.com/video/BV1sa41117zV 就是这个视频

我本以为一个小网站嘛，什么「面试鸭」，不就买个服务器，上 Github 里选个喜欢的语言，pull 几个仓库，一改改再上传一下吗，在计算机黑科技遍地的时代，傻子都能开个超级互联网公司！

然而视频里陈述的 「面试鸭」的前后端之部署复杂，让我觉得这完全不像个小网站的规模了。而且全程没用到服务器，并且让我感觉一路上花的钱比买个服务器便宜多了，看来即使技术分享很自由活跃的计算机世界，还是要吃信息差呀，相比其他行业，计算机业的烦恼是技术栈太多。

很可笑，一个部署的技术如此复杂之网站，居然挡住不 DDOS。看来 DDOS 真的是黑客世界里的大榔头啊，简单粗暴，杀人嘎嘎有效，轻轻一敲，脑干涂地。（据说，现在抵挡 DDoS 最有效的免费的办法，就是 cloudfare 的真人验证服务）

当然这种架构肯定不是复杂度极大的，跟任何小的互联网公司比起都不算很复杂，但相比我的 ccgxk.com ，已是恐怖至极。

最终，「面试鸭」还是倒闭了。当然视频还在，一年半过去了，今天我又来看这个视频，稍微整理一下。

下面来细细分析这图里的各个细节。

前端

这里，前端三件套不变，HTML + JavaScript + CSS，也不可能会变，但每个元素他都开了个挂。

（前端世界，发展迅猛，人数众多，这个部分无论「鱼皮」弄多复杂，弄多少听都没听过的大轮子，我都不意外）

前端框架

HTML + JavaScript ，他使用了 React 框架，还有大名鼎鼎蚂蚁集团的 Umi，来实现路由。这样项目便可快速搭建了。

之后又用了个 dva 的框架，据说是管理用户信息和权限的，我不太熟悉这个。

据说为防止自己的项目长太大，引起混乱，他使用了 TypeScript 来约束变量。

（鱼皮学的真多真快）

CSS 还是使用的 less 这种工具，引入 less.js 来让 JavaScript 控制 CSS，以降低开发的门槛，当然，整个页面使用了 ant design components 赠送的组件，以便风格统一。

检查代码

eslint 这个工具，检查 JavaScript 代码。

style lint 这个工具，检查 CSS 代码。

最后 prettier 再一键格式化代码。

然后再使用经典的 webpack 一键把所有内容编译打包构建......

结语

好了，这就是前端。好硬核，放在 2023 年我的眼里依旧算狠人。这是一个人能顾得过的活儿吗？不得好几个人吗？

不过，他提到了个疑似广告的部分，他之所以能用这么多工具，是使用了个「ant design pro 脚手架」的一站式工具。开箱即用，一行命令生成初始化项目代码......

部署

部署比较简单，使用他自己公司的腾讯的 docker 云容器托管上，这个镜像里封装添加了 Nginx web，估计是转发地址用的？？

云容器好啊，实现弹性伸缩和负载均衡。比服务器好伺候多了，很可惜，直到现在，我 docker 还没正式学过。

后端

语言和框架

网站需要有后端，主要用的是 node.js 的 express 框架。一个和 java springboot 一样名气很大的企业级框架。

最开始他想的简单，就是云函数，一个功能一个函数，独立部署，互不影响。但他发现这种“面向过程”的思想不可靠，就还是选择框架了。

数据库

一个很熟悉的身影飘过，MongoDB！

这是一个文档数据库，这单词长得挺嚣张，好像是苏联的重型钢铁武器一样，比广泛被使用的 MySQL 要读写快。不过他说字段更易扩展......字段更易扩展是什么意思？？？

高并发，低性能消耗，尤其是查询，离不开 Redis 等这种非关系数据库。直接数据存内存。这样就有了缓存、登录会话、限流、分布式锁等。

搜索引擎

之后，一个前一段时间见过的一个东西出现了，elastisearch ！

这是什么？这也是个非关系数据库，和 Redis 一个类型，只不过这个是专业为搜索准备的引擎解决方案。

Github 就是用的这个，阮一峰也曾写过关于它的入门教程，甚至 WordPress 也有它的插件，为无数文章巨多的网站提供优秀的搜索服务。

（emlog 也一定要整个啊，搜索引擎太重要了！）

鱼皮说，这东西不仅可帮助储存数据，还能自动分词。我不清楚他是直接在本地部署了个，还是使用的第三方托管。

（后端也整的好专业，卧槽）

Java？？

为实现「微信公众号 -- 一键登录」，他又做了个 Java springboot 简易程序。这小小年纪 23 岁，懂得挺杂呀。

不过，他说这是根据一个现成的 微信 Java 库弄的。

结语

还是使用的 docker 部署，不过，是放到（或者说白嫖）微信云托管。我没搞清上下文，这是说的是 小服务 还是 整个后端。

其他

上面那些没完，为了性能与安全性，他又在 云托管 的上层，套了个 ecdn。这词造的好高端。意思好像是 全站加速网络。

之后，他身为专业的前端工程师，必然忘不了搜索引擎优化，即 SEO，是 prerender 预渲染服务。检测到是爬虫来了，就给爬虫那些为爬虫准备的信息。

高端大气

真的高端大气，也恰恰向我们这种小白，好好展示了一下一个小互联网公司，架构应该是什么样子。（当然，大互联网公司，还得再比这个复杂上百倍不止）

挺有参考作用，虽然花里胡哨，可能还不如 php + MySQL 来的稳定，但至少告诉我们，学啊学啊，不学明天就变废物了...... 学海无涯，学无止境，而且这些技术时刻又面临淘汰，尤其是前端。