这是我参与「第五届青训营 」伴学笔记创作活动的第8天。

项目开发流程

提交代码到gitilab=>gitlab触发事件到jenkins=>jenkins拉取指定分支代码webpack构建=>推送镜像到镜像仓库和kubernetes

kubernetes是开源的容器集群管理系统，可以实现容器集群的自动化部署、自动扩缩容、维护等功能

webpack主要目的是集成代码、减少前端文件、以及兼容，打包出来的代码兼容新旧浏览器，然后输出到dist目录。部属时只需要dist里面的文件即可。容器打包会根据项目配置的Dockersfile文件，把webpack打包的dist进一步压缩成二进制文件，容器部署时，再解压出来。进去容器里面，看到的还是dist文件。

Docker 属于 Linux 容器的一种封装，提供简单易用的容器使用接口。

Docker是一个开源应用容器引擎，基于Go语言并遵从Apache2.0协议开源 。Docker可以让开发者打包他们的应用以及依赖包到一个轻量级、可已知的容器中，然后发不到任何Linux机器上，也可以实现虚拟化。Docker应用场景：

• Web应用的自动化打包和发布。
• 自动化测试和持续集成、发布。
• 在服务型环境中部署和调整数据库或其他的后台应用。
• 从头编译或扩展现有的OpenShift或CloudFoundry平台来搭建自己的PaaS环境。

SSR和CSR

服务器渲染：

服务端在返回 html 之前，在特定的区域，符号里用数据填充，再给客户端，客户端只负责解析 HTML 。

客户端渲染：

html 仅仅作为静态文件，客户端端在请求时，服务端不做任何处理，直接以原文件的形式返回给客户端客户端，然后根据 html 上的 JavaScript，生成 DOM 插入 html。

当代项目开发的几种架构模型

灰度发布

优点：提前收集用户使用意见，及时完善产品功能。控制未知异常只出现在小范围内，不影响大多数用户。发现产品是否存在外在问题（如合规），可及时回滚至已旧版本。

客户端渲染：每一个页面都需要去获取灰度规则，然后判断是否灰度，这个灰度请求将阻塞页面的，可能会造成较差的用户体验，所以我们可以考虑使用客户端的localStrage来存储这个用户是否为灰度用户，而不是每次请求资源时都发请求去判断是否为灰度用户，然后定期的更新localStrage内存储的值，取代大量的请求造成的体验问题。

npm模块安装机制

• 发出npm install命令
• 查询node_modules目录中是否已经存在指定模块，若存在，不再重新安装，若不存在，npm向registry查询模块压缩包的网址，下载，解压。
• 执行工程自身pre install。
• 确定首层依赖模块
• 获取模块
• 模块扁平化
• 安装模块
• 执行工程自身生命周期

pnpm

包管理器，优势在于：包安装速度极快/磁盘空间利用非常高效。

pnpm 内部使用基于内容寻址的文件系统来存储磁盘上所有的文件，这个文件系统出色的地方在于:

• 不会重复安装同一个包。用 npm/yarn 的时候，如果 100 个项目都依赖 lodash，那么 lodash 很可能就被安装了 100 次，磁盘中就有 100 个地方写入了这部分代码。但在使用 pnpm 只会安装一次，磁盘中只有一个地方写入，后面再次使用都会直接使用 hardlink
• 即使一个包的不同版本，pnpm 也会极大程度地复用之前版本的代码。举个例子，比如 lodash 有 100 个文件，更新版本之后多了一个文件，那么磁盘当中并不会重新写入 101 个文件，而是保留原来的 100 个文件的 hardlink，仅仅写入那一个新增的文件。
• 支持monorepo
• 安全性高

monorepo

单个仓库。将许多项目的代码存储在同一个repository中，这样做的目的是多个包本身相互独立，可以有自己的功能逻辑、单元测试等，同时在一个仓库下方便管理，而且模块划分的更加清晰，可维护性、可扩展性更强。