目录
二十七、运维监控和报警
1、线上监控和报警
* 引言
- 一个完善的线上产品，必须有完善的运维体系，才能保证稳定运行。包括服务器监控，报警，以及网络安全预防。
- 一个软件的生命周期，可以分为：研发+迭代+运维，其中运维最重要。运维里，监控和报警是最重要的。
即，哪个最靠近“稳定安全的运行”，哪个就最重要。作为架构师，要深刻意识到这一点。不一定自己做，但一定要知道。
* 标题
- 运维监控和报警：保证线上服务高效、稳定运行
* 将收获什么
- 为系统增加监控和安全预防
- 出了问题要第一时间报警，重要！
* 主要内容
- 异常处理和安全预防
- 监控和报警
* 关键词
- 运维
- 监控
- 报警
- 心跳检测
- 安全
* 学习方法
- 要亲自动手操作
* 注意事项
- 如果在中大型公司，可能会有专门的运维团队负责运维，你要利用好这些资源。即，无论如何，
都要把运维做好，这是生命线！
2、异常处理和安全预防
* 本章产出
- 增加系统的安全性和稳定性
* 主要内容
- 统一异常处理
- 安全预防
- 防止网络攻击-阿里云网络防火墙WAF
* 注意事项
- 自己练习的项目，可以不用够买阿里云防火墙，但要去学习了解它，以后需要的话拿来即用
3、统一异常处理
* 代码错误的统一处理
- dev和测试环境，我们期望尽量详细、具体的暴露出代码的异常，好帮助我们尽快排查、解决问题。
而在线上环境正好相反，我们期望隐藏这些异常，给用户一个比较友好的错误提示界面。
- 但是，线上环境错综复杂，我们无法枚举出会有什么样的异常情况，所以最好的方式就是：统一的异常处理。
为每次请求，都加一个try ... catch包裹起来。
- 以中间件的方式来实现，代码参考src/middlewares/error.js
* 预防内存泄漏
- 在pm2配置中增加max_memory_restart: '300M'，这样内存使用超过300M就会自动重启。
- 关于内存泄漏
~ 如果观察pm2重启频繁，那要去排查一下内存泄漏的问题
~ 如果观察pm2重启不频繁，那可以不用着急解决，先观察着再说
- 架构师要以全面视角去看待问题，而不是仅仅以纯技术角度来看待。内存泄漏，不一定就必须要解决。
再举一个例子：假如有一个算法，空间复杂度较高，占内存较大。此时，你是花高薪聘请技术专家解决，
还是花钱扩展一下机器内存？--答案显而易见
* 总结
- 代码错误的统一处理
- 预防内存泄漏
4、安全预防
* 常见的Web攻击
- SQL注入
- XSS
- CSRF
- 网络攻击
* SQL注入
- 使用sequelize可以防止，不用刻意去解决。
- PS：只要不裸写sql语句，常见的数据库工具，都可解决sql注入的问题。
* XSS攻击
- 通过vue和React可以防止。H5也可以通过vue ssr防止。
~ vue中要输出原生html需要用v-html
~ React中要使用dangerouslySetInnerHTML
- 如果想要单独处理，可使用https://github.com/component/escape-html或者xss
- 前两天我就发现segmentfault.com暴露了一个类似的bug。
* CSRF跨站请求伪造
- 现有的逻辑，可以很好的预防CSRF攻击。
~ 提交数据都使用post请求
~ jwt有token检查
- 如果想要做单独处理，可参考https://github.com/expressjs/csurf
* 附：优化请求头
- 使用helemt优化请求头。
- 网络安全问题，你可以通过代码来处理，但http等协议标准，以及浏览器，他们也在大力合作来
推动网络安全，制定一些规范。这些安全相关的细节，跟我们日常开发的业务相关性不大，
我们也没必要去关注这些细节。但你要知道如何去使用它。
- 参考附-http请求头
- 代码修改
~ 安装koa-helmet
~ 注册到app.js
- 演示效果：访问imooc-lego.com，看一下http请求
* 总结
- SQL注入
- XSS攻击
- CSRF跨站请求伪造
- helmet优化请求头
- 网络攻击，下一节讲解~
* Content-Security-Policy内容安全策略（CSP）是一个额外的安全层，用于检测并削弱某些特定类型的攻击，包括跨站脚本（XSS）和数据注入
攻击等。无论是数据盗取、网站内容污染还是散发恶意软件，这些攻击都是主要的手段。
* X-DNS-Prefetch-Control控制着浏览器的DNS预读取功能。DNS预读取是一项使浏览器主动去执行域名解析的功能，其范围包括文档的所
有链接，无论是图片的，CSS的，还是Javascript等其他用户能够点击的URL。
* Expect-CT允许站点选择性报告和/或执行证书透明度（Certificate Transparency）要求，来防止错误签发的网站证书的使用不被察觉。当站点启
用Expect-CT头，就是在请求浏览器检查该网站的任何证书是否出现在公共证书透明度日志之中。
* Feature-Policy标头提供了一种机制，允许和拒绝在其自己的框架中以及嵌入的ifrane中使用浏览器功能。
* X-Frame-Options用来给浏览器指示允许一个页面可否在frame，<iframe>或者<object>中展现的标记。网站可以使用此功能，来确保自己
网站的内容没有被嵌到别人的网站中去，也从而避免了点击劫持（clickjacking）的攻击。
* X-Powered-By表明用于支持当前网页应用程序的技术（例如：PHP）。
* Public-Key-Pins是一种安全功能，它告诉Web客户端将特定加密公钥与某个Web服务器相关联，以降低使用伪造证书进行MITM攻击的风险。
* Strict-Transport-Security是一个安全功能，它告诉浏览器只能通过HTTPS访问当前资源，而不是HTTP。
* X-Download-Options设置noopen为阻止IE8以上的用户在您的站点上下文中执行下载，指示浏览器不要直接在浏览器中打开下载，而是仅提
供“保存”选项。
* Cache-Control通用消息头字段被用于在http请求和响应中通过指定指令来实现缓存机制。缓存指令是单向的，这意味着在请求设置的指令，在
响应中不一定包含相同的指令。
* Pragma是一个在HTTP/1.0中规定的通用首部，这个首部的效果依赖于不同的实现，所以在“请求-响应”链中可能会有不同的效果。它用来向后
兼容只支持HTTP/1.0协议的缓存服务器，与Cache-Control: no-cache效果一致。强制要求缓存服务器在返回缓存的版本之前将请求提交到源
头服务器进行验证。
* Expires响应头包含日期/时间，即在此时候之后，响应过期。
* Surrogate-Control通过检查来自源服务器的响应中的缓存头来确定要缓存的内容。
* X-Content-Type-Options被服务器用来提示客户端一定要遵循在Content-Type首部中对MIME类型的设定，而不能对其进行修改。这就禁用
了客户端的MIME类型嗅探行。
* X-Permitted-Cross-Domain-Policies为Web客户端提供了跨域处理数据的权限（如Adobe Flash或Adobe Acrobat）。
* Referrer-Policy首部用来监管哪些访问来源信息，会在Referer中发送，应该被包含在生成的请求当中。
* X-XSS-Protection当检测到跨站脚本攻击（XSS）时，浏览器将停止加载页面。
5、预防网络攻击
* 引言
- 网络攻击，是web服务的程序解决不了的，也不是程序员所专长的领域。
例如，常见的DDOS攻击，就是用大量的、动态的请求，去频繁的访问一个网站，直到这个网站挂掉为止。
特别是针对一些中小型网站，阮一峰的个人网站曾遭遇过DDOS攻击。
- 但是，作为架构师，全面的负责一个系统，自己不擅长的问题也要直到如何通过第三方服务来解决。
所以，选择了阿里云Web应用防火墙，以后简称WAF。它价格便宜，能预防常见的网络攻击。
* 配置WAF
- 购买服务。添加网站：填写域名，把CNAME指向服务器IP地址，然后上传https证书。
* 修改域名CNAME解析
- 现在域名CNAME直接解析到服务器IP地址，没有经过WAF，WAF没有机会做安全预防。
- 域名的CNAME指向WAF的地址
- 这样，网络访问的顺序就是：域名-->WAF-->服务器，WAF就可以从中做安全预防。
* 思考：短信验证码接口
- 关于获取短信验证码的接口，本来想通过WAF来做一个单IP的频率设置，即单个IP每个时间段都限制访问次数。
但是，后来发现这个服务要单独收费，还挺贵。
- 经过讨论和分析，腾讯云的短信服务，也有单个手机号的发送频率限制，所以就暂时没买这个服务。
- 遇到花销大的事情，要考虑实际情况再决定，可以先观察，出问题再即使跟进。
现在的互联网产品，都是原型模式、试错模式。所以要欢迎错误、欢迎问题，只要有合理、高效的解决方案。
* 总结
- 配置WAF
- 修改域名CNAME解析
6、监控和报警
* 引言
- 系统如果出了问题，我一定是第一个知道的人。而不是等着被用户发现。
* 本章产出
- 为系统制定一套监控和报警机制，让系统时刻在我们的掌控之中
* 主要内容
- 心跳检测-对接口自动定时“体检”
- 报警-出问题第一时间发邮件
- alinode服务器监控-实时检测CPU内存硬盘的健康状况
* 注意事项
- 该部分全部免费，可亲自动手练习
- 学会主动阅读文档，拥抱变化
7、心跳检测
* 引言
- 对接口自动定时“体检”。间隔时间自己定，不用太频繁，如10min。
* 回顾：定时任务
########
/**
通用的定时表达式规则：
* * * * * *
| | | | | |
| | | | | ----day of week(0 - 7)(0 or 7 is Sun)
| | | | --------month(1 - 12)
| | | ------------day of month(1 - 31)
| | ----------------hour(0 - 23)
| --------------------minute(0 - 59)
------------------------second(0 - 59,OPTIONAL) **【注意】linux crontab不支持秒**
*/
########
- crontab
- nodejs工具cron
* 心跳检测
- 代码参考heart-beat-check/
- pm2配置和package.json的scripts
- deploy.sh中运行npm run heart-beat-check
* 可以考虑单独拆分
- 现在心跳检测依附于biz-editor-server。
如果项目慢慢变大，可以把心跳检测单独拆分出来，作为一个单独的服务。
也可以使用第三方的一些监控服务，或者大公司自研的监控服务。
- 其实以上这些都不是关键。
最关键的是，作为架构师，你得知道有“心跳检测”这个东西，它是干什么的。知道了你就会想各种办法解决。
* 总结
- 回顾：定时任务
- 心跳检测的代码实现
- 可以考虑单独拆分
8、报警
* 引言
- 一旦出现问题，要第一时间得到通知，及时修复。
* 报警的范围
- 心跳检测
- 统一异常处理
~ middlewares/error.js
~ src/app.js中app.on('error')
- 核心流程
~ 创建
~ 保存
~ 发布
- 第三方服务
~ 发送短信
~ 上传OSS
~ 百度云-内容检查
* 报警方式
- 短信，不采用
~ 花钱
~ 如果频繁报警，可能会触发短信的频率限定机制
- 邮件，采用
~ 免费
~ 无频率限制
~ 手机接收邮件很方便，和短信一样
* 邮件报警
- 使用npm工具nodemailer，可以很方便的发送邮件。
- 以126邮箱为例。申请一个邮箱，然后开启SMTP服务，记住授权密码。注意保密！
- 代码修改
~ src/vender/sendMail.js
~ src/alarm/index.js
~ 使用mailAlarm的地方
- 运行效果如下图
* 总结
- 报警范围
- 报警方式：邮件
- 邮件报警的实现
9、alinode服务器监控
* 引言
- 之前都是业务代码的监控和报警，还缺少服务器和系统的监控、报警-alinode非常合适。
* 购买alinode
- 目前免费提供（大厂就是豪横）！！！
- 登录阿里云，直接去官网首页，申请开通即可。
- 点击每个应用的“设置”，可以看到该应用的appId和secret，这个信息很重要。
* 安装
- 【注意】接下来要登录服务器操作，操作期间可能会导致线上服务暂停。
- 可使用work账户来安装，不用root账户。
- 根据文档步骤来安装即可。
注意，根据自己需要的nodejs版本，挑选一下安装的版本，版本列表参考这里。PS：该项目目前使用的版本是v5.16.4
- 根据文档要求，看下which node和which pm2是否包含.tnvm？否则，需要重新安装。
PS：如果重新安装pm2，记得重新安装pm2 install pm2-logrotate
* 启动
- 【注意】先在服务器上修改源码（这需要用到linux vim编辑器，不了解的先去查一查），手动重启，先能正常启动alinode再说。
- 首先，保证服务器上有/tmp/目录，要在这里存放alinode的日志。
- 以biz-editor-server这个项目为例子，进入它的目录~/lego-team/biz-editor-server
新建一个文件ali-node.config.json
########
{
"appid": "86xxx4",
"secret": "7cc4xxxxxxxxxxxxxxxxxxxxxx4e2bab0fa8",
"logdir": "/tmp"
}
########
- 修改package.json的scripts
########
// 【注意】，其中`logdir`和`NODE_LOG_DIR`的值要一样
"prd": "cross-env NODE_ENV=production NODE_LOG_DIR=/tmp ENABLE_NODE_LOG=YES pm2 start bin/pm2-prd.config.js",
########
- （_PS：这么多环境变量，如果先麻烦，可以.env管理https://www.npmjs.com/package/dotenv_）
- 手动执行agenthub start ali-node.config.json，保证执行成功。可以通过agenthub list查看所有的alinode应用。
然后，停止并删掉pm2的该服务，重新启动npm run prd（nodejs和pm2都有可能重新安装过，所以要重启）
- 这样就启动了alinode监控，它会实时监控服务器状态并发送到alinode平台。
等几分钟，登录alinode控制台，就可以看到监控结果了。
* 设置报警
- 在应用列表中，对每个应用点击“报警”，即可进入报警设置页面。
- 报警不用设置的太复杂，监控一个CPU、内存、磁盘即可。
* 重新上线
- 先把服务器上修改的内容，通过git checkout .全部撤回。按正常的研发流程修改，然后重新上线。
- 本地修改代码
~ 增加ali-node.config.json
~ 修改package.json的scripts
- 提交代码，发起上线。
- 待线上完成之后，登录服务器，查看agenthub list是否有当前的应用。如果没有就再启动一下agenthub start ali-node.config.json。
* 总结
- 购买
- 安装
- 启动
- 设置报警
- 重新上线
- 【注意】要及时参考文档，文档可能会更新，不要完全依赖于视频。
二十八、脚手架发布模块架构设计和核心流程开发
1、简介
* 将收获什么
- 掌握脚手架发布模块的整体架构设计和实现原理
- 掌握前端发布流程，并了解hash和history两种路由模式区别
- 深入理解vue-router实现原理
* 主要内容
- 项目发布流程整体架构设计
- 脚手架发布流程的git自动化流程设计
- 脚手架云构建+云发布架构设计
- imooc-cli脚手架publish模块开发
* 附赠内容
- 前端发布后页面路由原理讲解
- vue-router两种路由模式详解
- history路由模式服务端配置详解
- vue-cli dev模式下history配置原理
- vue-router-next源码核心原理分析
* 关键词
- 前端发布
- 前端路由
- vue-router
* 学习方法
- 沉下心，亲自动手画图和深度思考
- 自我提问：如果让你设计，你会怎么做？
* 注意事项
- 本周内容需要具备一定计算机和操作系统基础，因为发布过程是一个综合各领域知识的过程
- Git Flow流程需要具备较好的Git操作基础，如果对Git不熟的同学建议提前预习
- vue-router-next源码具有较大难度，需要一定源码阅读经验和扎实前端基础，如果感觉难度过大，
可以暂时跳过，不影响后续学习
2、脚手架发布架构设计
* 前端发布流程
* 前端发布GitFlow+云构建+云发布
* GitFlow原理
- GitFlow主流程
~ 原稿：https://nvie.com/posts/a-successful-git-branching-model/
3、vue-router-next源码解析
* 引言
- 源码仓库：https://github.com/vuejs/vue-router-next
* vue-router常见问题
- history和hash模式的区别是什么？（涉及vue-router路由模式和前端发布原理）
- Vue dev模式下为什么不需要配置history fallback？（涉及webpack-dev-server配置）
- 我们并没有定义router-link和router-view，为什么代码里能直接使用？（涉及vue-router
初始化流程和Vue插件）
- 浏览器中如何实现URL变化但页面不刷新？（涉及vue-router history模式核心实现原理）
- vue-router如何实现路由匹配？（涉及vue-router Matcher实现原理）
- router-view如何实现组件动态渲染？（涉及Vue动态组件）
* vue-router路由模式
- 官网地址
- hash和history模式，区别：
~ 语法结构不同
~ 部署方式不同
~ SEO
* vue-router源码执行流程分析
- vue-router初始化流程
- RouterLink初始化流程
- RouterView初始化流程
二十九、脚手架发布模块git自动化流程开发
1、简介
* 将收获什么
- GitFlow实战
- 通过simple-git操作git命令
- Github和Gitee OpenAPI接入
- 本周加餐：Node最佳实践分享
* 主要内容
- Git仓库初始化（利用Github & Gitee OpenAPI）
- 本地Git初始化
- GitFlow流程实现（代码自动提交）
* 附赠内容
- Node项目最佳实践：
~ 项目结构最佳实践
~ 异常处理最佳实践
~ 测试最佳实践
~ 发布上线最佳实践
~ 安全最佳实践
* 关键词
- Git
- Github
- Gitee
- Node
* 学习方法
- 动手实践：本章以实践课程为主，一定要动手实践才能完整理解学习内容
- 结合架构图学习：上周完成了架构设计图，这部分内容非常关键，本周会用到
* 注意事项
- 需要具备Git操作基础
- 加餐部分需要有一定Node项目基础
2、Github和Gitee API接入
* Github API接入
- 接入流程：
~ 获取token：https://github.com/settings/keys
创建SSH帮助文档：https://docs.github.com/en/github/authenticating-to-github/connecting-to-github-with-ssh
~ 查看API列表：https://docs.github.com/cn/rest
课程采用Restful API
~ 调用API时需要在header中携带token：
config.headers['Authorization'] = `token ${this.token}`;
* Gitee API接入
- 接入流程：
~ 获取ssh：https://gitee.com/profile/sshkeys
~ 获取token：https://gitee.com/personal_access_tokens
创建SSH帮助文档：https://gitee.com/help/articles/4191
~ 查看API列表：https://gitee.com/api/v5/swagger
~ 调用API时需要在参数中携带access_token：
########
get(url, params, headers) {
return this.service({
url,
params: {
...params,
access_token: this.token,
},
method: 'get',
headers,
});
}
########
* 默认.gitignore模板
########
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
########
三十、脚手架发布模块云构建系统开发
1、云构建架构设计
* 为什么需要云构建
- 减少发布过程中的重新劳动
~ 打包构建
~ 上传静态资源服务器
~ 上传CDN
- 避免不同环境间造成的差异，保证依赖版本的一致性
- 提升构建性能
- 对构建过程进行统一、集中管控
~ 发布前代码统一规则检查，解决大量安全隐患或者性能瓶颈
例1：要求接口全部使用https
例2：对于某些落后版本的依赖要求强制更新
~ 封网日统一发布卡口
* 云构建架构设计图
2、WebSocket & Redis快速入门
* WebSocket入门
- 什么是WebSocket？
~ WebSocket基本概念：https://www.runoob.com/html/html5-websocket.html
- WebSocket开发流程
~ WebSocket开发流程：https://eggjs.org/zh-cn/tutorials/socketio.html
- WebSocket服务开发流程
~ 1、安装依赖
########
npm i -S egg-socket.io
########
~ 2、更新配置文件
########
// config.default.js
config.io = {
namespace: {
'/': {
connectionMiddleware: ['auth'],
packetMiddleware: ['filter'],
},
'/chat': {
connectionMiddleware: ['auth'],
packetMiddleware: [],
},
},
};
// plugin.js
exports.io = {
enable: true,
package: 'egg-socket.io',
};
########
~ 3、修改路由配置
########
// router.js
// api.io.of('/')
app.io.route('chat', app.io.controller.chat.index);
// api.io.of('/chat')
app.io.of('/chat').route('chat', app.io.controller.chat.index);
########
~ 4、开发middleware
########
// app/io/middleware/auth.js
'use strict';
module.exports = () => {
return async (ctx, next) => {
const say = await ctx.service.user.say();
ctx.socket.emit('res', 'auth!' + say);
await next();
console.log('disconnect!');
};
};
########
~ 5、开发controller
########
// app/io/controller/chat.js
'use strict';
module.exports = app => {
class Controller extends app.Controller {
async index() {
const message = this.ctx.args[0];
console.log('chat :', message + ' : ' + process.pid);
const say = await this.ctx.service.user.say();
this.ctx.socket.emit('res', say);
}
}
return Controller;
};
########
- WebSocket客户端开发流程
* Redis入门
- 什么是Redis？
~ Redis基本概念：https://www.runoob.com/redis/redis-tutorial.html
- Redis安装方法
~ Windows & Linux：https://www.runoob.com/redis/redis-install.html
~ MacOS：https://www.cnblogs.com/pangkang/p/12612292.html
- Redis开发流程
~ Redis开发流程：https://www.npmjs.com/package/egg-redis
3、本周总结
* 将收获什么
- 云构建原理、架构和实现
- WebSocket入门到实战
- Redis入门到实战
* 主要内容
- 云构建原理和架构
- WebSocket入门
- Redis入门
- 脚手架云构建能力实现
* 关键词
- WebSocket
- Redis
- 云构建
- egg插件
* 学习方法
- 先理论，再实践：本章两个核心概念WebSocket和Redis对于大部分前端同学是比较陌生的，所以需要先了
解它们的概念和开发流程，再实现云构建这样的复杂功能
* 注意事项
- 本章内容具有较大难度，需要进行扎实基础后再做项目
- 云构建过程中一定要注意安全问题，shell执行具有很大风险
* 本周作业
- 绘制云构建架构执行流程图
- 在本地实现WebSocket和Redis服务
- 在本地实现云构建服务
三十一、脚手架发布模块云发布功能开发
1、简介
* 将收获什么
- 云发布原理、架构和实现
- OSS API
- 上线发布流程
- 附赠内容：Node高分库分享
* 主要内容
- 云发布原理和架构
- OSS接入指南
- 支持Hash和History模式发布
- 云发布流程闭环流程开发
* 附赠内容
- Node高分库分享
* 关键词
- OSS
- 云发布
* 学习方法
- 逐步迭代和演进：本周的内容需要建立在上周的基础之上进行迭代，如果没有上周的技术基础，本周功能将难
以实现，所以需要在上周的内容之上进行逐步迭代和演进
* 注意事项
- 本章内容同样具有较大难度，需要完成上周的课程后才能学习，学习内容上存在强耦合关系
- 云发布的难点是架构设计和各种业务场景支持，实际应用时需要根据公司的技术体系进行一定改造和优化
* 本周作业
- 完成发布功能闭环
- 利用Listr和rxjs优化自动创建Tag流程交互
三十二、脚手架组件发布功能开发
1、简介
* 将收获什么
- 前端组件演进过程和大厂前端物料体系介绍
- 组件复用体系整体架构设计
- 脚手架组件创建+发布全流程实现
* 主要内容
- 大厂前端物料体系介绍
- 前端组件平台架构设计
- 脚手架组件创建流程复习
- 脚手架组件发布流程实现
* 关键词
- 前端物料
- 前端组件
- 组件发布
* 学习方法
- 先理解概念，再进行学习：本周和下周将共同打造一个组件体系，通过这个体系优化我们的研发流程，所以需
要先了解组件的概念，结合之前脚手架组件创建流程，再进行组件发布的开发
* 注意事项
- 本周概念较多，需要逐个理解和进阶
- 可以尝试在实际场景落地，或者优化现有研发流程
* 本周作业
- 开发新的组件模板，开发组件多预览项目
- 在本地实现组件发布全流程
2、前端物料体系介绍和前端组件平台架构设计
* 前端物料体系介绍
- 问题1：为什么会形成前端物料体系？
~ 回答：由于前端项目规模不断增大，代码中不断出现重复或类似代码，因此需要将这些代码抽象和复用，
以提高开发效率。在实践过程中不断出现新的物料类型，单纯组件库已经无法满足代码复用的需求
- 问题2：为什么要了解前端物料的概念？
~ 问答：在工作中能够更好地以物料的维度去思考项目的复用问题
- 问题3：前端物料体系和组件库的关系是什么？
~ 问答：组件库是物料体系的一部分，物料体系包括所有可复用的前端代码
- 问题4：前端物料包括哪些？
~ 问答：组件（基础组件+业务组件）、区块、页面模板、工程模板、JS库、CSS库、代码片段等等......
* 前端组件平台架构设计
三十三、组件平台开发
1、简介
* 将收获什么
- 完整实现组件从开发、发布、到浏览、应用的全流程
- 实现组件平台应用，包括组件列表、组件详情页
- 实现组件多预览功能
- 实现README文档渲染功能
- 实现前端配置动态化功能
* 主要内容
- 组件平台架构设计和技术选型
- 组件列表页功能实现
- 组件详情页功能实现
- 组件预览功能实现
- 组件README文档渲染
* 关键词
- 组件平台
- 组件预览
- 组件README
* 学习方法
- 逐步深入：本周课程与上周存在强耦合，必须先学习上周课程内容后，才能掌握本周内容
* 注意事项
- 本周课程难点在于组件平台的架构设计，即怎么设计组件平台，在具体落地过程中，可以根据自己公司的情况
进行定制
- 本周Coding难度不大，所以选用React框架来实现，以拓宽大家工具箱中的技术栈
三十四、项目单元测试用例设计和开发
1、简介
* 将收获什么
- 完整实现脚手架测试全部过程
- 测试用例设计方法
- 单元测试开发方法
* 主要内容
- Mocha快速入门
- 脚手架测试用例设计
- 脚手架单元测试开发
* 关键词
- Mocha
- 测试用例
- 单元测试
* 学习方法
- 先基础，再实战
* 注意事项
- 本周最重要的目标是帮助大家深入脚手架单元测试，在大厂中单元测试是研发流程非常重要的组成部分，本周
会让大家对单元测试有非常明确的认识，并能够快速将单元测试技术应用到自己的项目中
2、Mocha快速入门+脚手架测试用例设计
* 测试用例
- 测试用例（Test Case）是指对一项特定的软件产品进行测试任务的描述，体现测试方案、方法、技术和策略。其内
容包括测试目标、测试环境、输入数据、测试步骤、预期结果、测试脚本等，最终形成文档。
* 测试模型
- BDD：行为驱动开发（Behavior-Driven Development）（简写BDD），在软件工程中，BDD是一种敏捷软
件开发的技术。
- TDD：TDD是测试驱动开发（Test-Driven Development）的英文简称，是敏捷开发中的一项核心实践和技
术，也是一种设计方法论。TDD的原理是在开发功能代码之前，先编写单元测试用例代码，测试代码确定需要
编写什么产品代码。
* Mocha入门
- 什么是Mocha？mocha是一个功能丰富的javascript测试框架，运行在node.js和浏览器中，使异步测试变得
简单有趣。Mocha测试连续运行，允许灵活和准确的报告，同时将未捕获的异常映射到正确的测试用例。在
Github上托管。
- 中文官网：https://mochajs.cn/
3、脚手架测试用例设计
* 脚手架测试用例
- 测试维度
~ 核心流程测试
init核心流程测试
publish核心流程测试
~ 工具类测试
Package类
Git类
Command类
CloudBuild类
~ 工具函数测试
utils方法
- 测试用例
~ Package类
Package对象实例化
options参数为空，抛出异常
options参数不为对象，抛出异常
Package对象实例化（带targetPath）
targetPath：/Users/sam/Desktop/imooc-cli-dev/commands/init
storeDir：/Users/sam/.imooc-cli-dev/node_modules
packageName：@imooc-cli-dev/init
packageVersion：1.0.0
Package对象实例化（不带targetPath）
targetPath：
storeDir：/Users/sam/.imooc-cli-dev/node_modules
packageName：@imooc-cli/init
packageVersion：1.0.0
prepare方法
storeDir不存在时，创建storeDir
packageVersion为latest获取最新版本号
cacheFilePath方法
获取缓存路径
getSpecificCacheFilePath方法
获取指定版本的缓存路径
exists方法
有targetPath时，正确判断package是否存在
无targetPath时，正确判断package是否存在
getRootFilePath方法
有targetPath时，正确获取入口文件
无targetPath时，正确获取入口文件
入口文件不存在时，返回null
install方法
正确安装package
update方法
正确更新package
~ GitServer类
Gitee类实例化
获取个人或组织信息
获取指定仓库信息
创建个人仓库
创建组织仓库
获取remote信息
获取帮助文档
~ Git类
实例化（项目名称转义）
获取正确的分支号
检查项目是否为组件
获取package.json
~ Command类
实例化
参数不能为空
参数必须为数组
