阅读 3595
一条龙!CI / CD 、打造小团队前端工程化服务

一条龙!CI / CD 、打造小团队前端工程化服务

来用 vue / react + webpack + jenkins + verdaccio + yapi + nginx 搭建小前端团队的工程化服务吧

前端工程化大家多多少少都接触过一些

随便抓个小前端一问都知道:

“前端工程化?大家都知道啊,大概就这样”

小前端工程化

为什么要工程化

在我的理解有这几点:

方便管理专注开发快速迭代等

我们先说上图右边

组件化:组件化开发

自动化:CI/CD,帮我们持续自动完成构建代码、测试、交付&部署、通知等

API Mock:提供API Mock服务,不需要在代码里面加入多余额外的测试数据

组件化开发需要搭建npm私有库,自动化功能需要我们搭建CI/CD服务,API Mock需要部署API Mock服务,我们把上面需要搭建部署的服务,暂时叫做工程化环境服务吧

工程化环境服务的搭建

我们将要搭建的小前端团队工程化环境服务就这样↓:

progress-all-wechat

所有服务都部署在docker容器,一开始我们先逐个部署熟悉一下docker

最后我们会用docker-compose统一编排:快速部署、迁移备份等

工具描述
jenkins搭建 CI / CD 服务
verdaccio搭建npm私有库
yapi搭建 api mock server
mongo暂时就提供给yapi的
nginx做基本的代理

别慌,docker基础非常简单的哈,会用到的都会讲

我们再来看一下 CI / CD 服务大概的工作

CI-CD pipeline

CI / CD 流水线在代码push到仓库,接到仓库的webhook后开始执行

当然里面也设计了基础的,快速回滚策略等

从0到1开始搭建

从0到1的全面一步步搭建整套服务环境

我们将会学到的东西↓:

FN-basics 里面包含整套服务需要的知识点都会讲,减少你大量多余的搜索:

  • git:基本命令操作和分支策略
  • shell: shell 脚本的基础用法
  • centos:centos需要的基础知识点
  • docker:基础使用docker去创建镜像,容器,持久化数据卷等
  • jenkins:jenkins 多分支流水线等基础配置
  • nginx:如何开启gzip和代理等基础知识
  • npm:简单的发布包等
  • mongodb:基础知识点和操作

文章详细

教程大概两万字左右,60多张图,为了更方便学习其中部分图片是由多张合成

刚刚在这边上传好,因为在因为字数限制只能分成几篇文章来发,请谅解

  1. 从0到1,打造小团队前端工程化服务(1/3)

  2. 从0到1,打造小团队前端工程化服务(2/3)

  3. 从0到1,打造小团队前端工程化服务(3/3)

为了更好更方便的学习,我写了一个小手册哈

获取小手册

docker

关注公众号:『前端小手册』,回复:小手册

就能获取PDF版本资源的下载

markdown文档我慢点出来哈,配合typora的night主题来看大概这样↓:

handbook1

handbook2

handbook3

掘金这里我也会尽快上!

感谢你们的关注

最后是非常非常的希望能得到你们的关注啦~~

你们小小关注就是我们大大的动力啊,我们会给你们持续地推送原创和好文

这个是我们公众号的二维码

code1

文章分类
前端
文章标签