feat: update docs and components, fix DLQ demo bug
This commit is contained in:
sanbuphy
@@ -13,21 +13,21 @@
|
||||
就像在现实生活中，不同的东西有不同的送法：
|
||||
|
||||
1. **发传单（静态网页）**：
|
||||
* *场景*：公司的介绍页、博客文章。
|
||||
* *特点*：内容是**死**的，印好了就不变了。
|
||||
* *做法*：直接把“传单”贴在离用户最近的宣传栏（CDN）上。谁来看都一样，速度最快，成本最低。
|
||||
- _场景_：公司的介绍页、博客文章。
|
||||
- _特点_：内容是**死**的，印好了就不变了。
|
||||
- _做法_：直接把“传单”贴在离用户最近的宣传栏（CDN）上。谁来看都一样，速度最快，成本最低。
|
||||
|
||||
2. **送乐高积木（SPA 单页应用）**：
|
||||
* *场景*：类似飞书、Notion 这种复杂的网页软件。
|
||||
* *特点*：交互特别多，像个**软件**。
|
||||
* *做法*：先给你寄一个“空盒子”和一大堆“零件”（JS代码），你的浏览器收到后，自己在本地把页面“拼”出来。
|
||||
* *好处*：一旦加载完，点哪里都很快，因为不需要再找服务器要页面了，只需要要数据。
|
||||
- _场景_：类似飞书、Notion 这种复杂的网页软件。
|
||||
- _特点_：交互特别多，像个**软件**。
|
||||
- _做法_：先给你寄一个“空盒子”和一大堆“零件”（JS代码），你的浏览器收到后，自己在本地把页面“拼”出来。
|
||||
- _好处_：一旦加载完，点哪里都很快，因为不需要再找服务器要页面了，只需要要数据。
|
||||
|
||||
3. **送热披萨（SSR 服务端渲染）**：
|
||||
* *场景*：股票大盘、新闻头条、个性化推荐。
|
||||
* *特点*：数据**实时变动**，或者需要**千人千面**。
|
||||
* *做法*：必须在用户下单的那一秒，由办事员（服务器）现场查数据、现场组装好页面，再热乎乎地交给你。
|
||||
* *好处*：数据绝对新鲜，而且搜索引擎（爬虫）最喜欢这种完整的页面。
|
||||
- _场景_：股票大盘、新闻头条、个性化推荐。
|
||||
- _特点_：数据**实时变动**，或者需要**千人千面**。
|
||||
- _做法_：必须在用户下单的那一秒，由办事员（服务器）现场查数据、现场组装好页面，再热乎乎地交给你。
|
||||
- _好处_：数据绝对新鲜，而且搜索引擎（爬虫）最喜欢这种完整的页面。
|
||||
|
||||
下面这个互动图，带你体验这三种不同的“配送路线”：
|
||||
|
||||
@@ -37,32 +37,32 @@
|
||||
让我们看看它们都是干什么的，以及**为什么**我们缺不了它们：
|
||||
|
||||
1. **用户 (User) —— 寄件人**
|
||||
* *动作*：在浏览器输入网址，回车。
|
||||
* *人话*：就像是你发出了一个“我想看网页”的请求包裹。
|
||||
- _动作_：在浏览器输入网址，回车。
|
||||
- _人话_：就像是你发出了一个“我想看网页”的请求包裹。
|
||||
|
||||
2. **DNS (域名解析) —— 查号台**
|
||||
* *为什么需要？* 电脑只认识数字（IP地址），人脑只记得住单词（域名）。
|
||||
* *人话*：它负责告诉你“baidu.com”这个名字对应的**门牌号 (IP地址)** 到底是哪一家。
|
||||
- _为什么需要？_ 电脑只认识数字（IP地址），人脑只记得住单词（域名）。
|
||||
- _人话_：它负责告诉你“baidu.com”这个名字对应的**门牌号 (IP地址)** 到底是哪一家。
|
||||
|
||||
3. **CDN (内容分发) —— 家门口的快递柜**
|
||||
* *为什么需要？* 服务器可能在地球另一边，传一张图片过来太慢了。
|
||||
* *人话*：如果你要的东西（图片、视频）在楼下的快递柜（CDN节点）里正好有备份，直接给你，**不用跑远路**去总仓库取。
|
||||
- _为什么需要？_ 服务器可能在地球另一边，传一张图片过来太慢了。
|
||||
- _人话_：如果你要的东西（图片、视频）在楼下的快递柜（CDN节点）里正好有备份，直接给你，**不用跑远路**去总仓库取。
|
||||
|
||||
4. **WAF (防火墙) —— 小区保安**
|
||||
* *为什么需要？* 互联网上有很多坏人（黑客）想搞破坏。
|
||||
* *人话*：它站在门口，把带炸弹的、发传单的（恶意攻击）都**拦在外面**，只让正常的客人进去。
|
||||
- _为什么需要？_ 互联网上有很多坏人（黑客）想搞破坏。
|
||||
- _人话_：它站在门口，把带炸弹的、发传单的（恶意攻击）都**拦在外面**，只让正常的客人进去。
|
||||
|
||||
5. **LB (负载均衡) —— 大堂经理**
|
||||
* *为什么需要？* 访问的人太多了，一台服务器累死也干不完。
|
||||
* *人话*：它看着后面开着的 10 个窗口（服务器），把你引导到那个**最空闲**的窗口去办理业务，不让你干等。
|
||||
- _为什么需要？_ 访问的人太多了，一台服务器累死也干不完。
|
||||
- _人话_：它看着后面开着的 10 个窗口（服务器），把你引导到那个**最空闲**的窗口去办理业务，不让你干等。
|
||||
|
||||
6. **Server (服务器) —— 办事员**
|
||||
* *为什么需要？* 总得有人真正干活，处理你的订单、计算金额。
|
||||
* *人话*：他是真正**处理业务**的人，负责把网页内容拼好，或者把数据算出来给你。
|
||||
- _为什么需要？_ 总得有人真正干活，处理你的订单、计算金额。
|
||||
- _人话_：他是真正**处理业务**的人，负责把网页内容拼好，或者把数据算出来给你。
|
||||
|
||||
7. **DB (数据库) —— 档案室**
|
||||
* *为什么需要？* 办事员脑子记不住那么多数据，而且断电了不能忘。
|
||||
* *人话*：这里**永久保存**着你的账号、密码、历史订单等核心机密数据。
|
||||
- _为什么需要？_ 办事员脑子记不住那么多数据，而且断电了不能忘。
|
||||
- _人话_：这里**永久保存**着你的账号、密码、历史订单等核心机密数据。
|
||||
|
||||
弄懂了这个流程，部署就不难了。部署无非就是把这些环节一个个打通。
|
||||
|
||||
@@ -99,6 +99,7 @@
|
||||
### 2.1 怎么选配置？
|
||||
|
||||
新手最容易犯两个错：
|
||||
|
||||
1. **买太小**：1核1G 的机器，跑个 Hello World 还行，稍微装点东西就卡死。
|
||||
2. **买太大**：一上来就买 8核16G，结果每天只有 10 个人访问，纯属浪费钱。
|
||||
|
||||
@@ -157,6 +158,7 @@ sudo npm i -g pm2
|
||||
|
||||
**CDN (内容分发网络)** 就是解决这个问题的。
|
||||
它在全球各地建了无数个“小仓库”。当你把图片、CSS、JS 文件放到 CDN 上：
|
||||
|
||||
- 北京用户访问，CDN 就近从北京节点给他。
|
||||
- 纽约用户访问，CDN 就近从纽约节点给他。
|
||||
|
||||
@@ -169,6 +171,7 @@ sudo npm i -g pm2
|
||||
## 5. CI/CD：告别“手工搬砖”
|
||||
|
||||
以前发布网站是这样的：
|
||||
|
||||
1. 在本地改代码。
|
||||
2. 用 FTP 软件把文件上传到服务器。
|
||||
3. SSH 连上去重启服务。
|
||||
@@ -181,6 +184,7 @@ sudo npm i -g pm2
|
||||
|
||||
你只需要做一件事：**把代码推送到 Git 仓库**。
|
||||
剩下的事情，流水线（Pipeline）自动帮你做：
|
||||
|
||||
1. **检测**：自动发现有新代码了。
|
||||
2. **安装**：自动在新环境里装依赖 (`npm install`)。
|
||||
3. **构建**：自动打包 (`npm run build`)。
|
||||
@@ -207,6 +211,7 @@ sudo npm i -g pm2
|
||||
### 6.1 监控 (Observability)
|
||||
|
||||
你需要给服务器装上“摄像头”和“报警器”：
|
||||
|
||||
- **日志 (Logs)**：记录程序运行的每一句话。报错了查日志，一查一个准。
|
||||
- **指标 (Metrics)**：CPU 用了多少？内存剩多少？QPS（每秒请求数）是多少？
|
||||
- **告警 (Alerts)**：当 CPU 飙到 90%，或者错误率突然升高时，直接发短信/钉钉告诉你。
|
||||
@@ -224,24 +229,24 @@ sudo npm i -g pm2
|
||||
|
||||
别慌，按这个表排查：
|
||||
|
||||
| 现象 | 可能原因 | 怎么办？ |
|
||||
| :--- | :--- | :--- |
|
||||
| 现象 | 可能原因 | 怎么办？ |
|
||||
| :------------- | :--------------------------------------- | :------------------------------------------------------------------------- |
|
||||
| **打不开网站** | 域名没解析好？服务器挂了？防火墙拦住了？ | 1. `ping 域名` 看看通不通。<br>2. 检查云厂商防火墙是不是没开 80/443 端口。 |
|
||||
| **HTTPS 报错** | 证书过期了？没配置好？ | 运行 `certbot renew` 试着续期一下。 |
|
||||
| **改了没生效** | 浏览器缓存？CDN 缓存？ | 强制刷新浏览器 (Ctrl+F5)；去 CDN 控制台点“刷新缓存”。 |
|
||||
| **发布失败** | 依赖装不上？代码写错了？ | 去看 CI/CD 的日志，最后几行通常就是原因。 |
|
||||
| **HTTPS 报错** | 证书过期了？没配置好？ | 运行 `certbot renew` 试着续期一下。 |
|
||||
| **改了没生效** | 浏览器缓存？CDN 缓存？ | 强制刷新浏览器 (Ctrl+F5)；去 CDN 控制台点“刷新缓存”。 |
|
||||
| **发布失败** | 依赖装不上？代码写错了？ | 去看 CI/CD 的日志，最后几行通常就是原因。 |
|
||||
|
||||
---
|
||||
|
||||
## 8. 名词速查表 (Glossary)
|
||||
|
||||
| 缩写 | 全称 | 人话解释 |
|
||||
| :--- | :--- | :--- |
|
||||
| **DNS** | Domain Name System | **域名解析**。把网址变成 IP。 |
|
||||
| **CDN** | Content Delivery Network | **加速网络**。把资源存到离用户最近的地方。 |
|
||||
| **HTTPS** | HyperText Transfer Protocol Secure | **安全协议**。给数据传输加把锁。 |
|
||||
| **CI/CD** | Continuous Integration / Deployment | **自动发布**。提交代码后自动跑完测试和上线流程。 |
|
||||
| **PM2** | Process Manager 2 | **进程管家**。Node.js 的保姆，负责让程序一直跑着。 |
|
||||
| 缩写 | 全称 | 人话解释 |
|
||||
| :-------- | :---------------------------------- | :------------------------------------------------- |
|
||||
| **DNS** | Domain Name System | **域名解析**。把网址变成 IP。 |
|
||||
| **CDN** | Content Delivery Network | **加速网络**。把资源存到离用户最近的地方。 |
|
||||
| **HTTPS** | HyperText Transfer Protocol Secure | **安全协议**。给数据传输加把锁。 |
|
||||
| **CI/CD** | Continuous Integration / Deployment | **自动发布**。提交代码后自动跑完测试和上线流程。 |
|
||||
| **PM2** | Process Manager 2 | **进程管家**。Node.js 的保姆，负责让程序一直跑着。 |
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user