Junwen's home
  • ES6

    • ES6 Decorator
    • ES6核心特性
    • Promise&Generator
  • js原理

    • 简单实现bind、apply和call
    • 如何遍历一个dom tree
    • 实现函数currying
    • 实现一个event
    • 详解js的继承
    • 详解requestAnimationFrame
    • Canvas api详解
    • DOM事件
    • EventLoop详解
    • JavaScript的内存管理
    • JavaScript的运行机制
    • Math对象
    • new操作符都做了什么
    • create基本实现原理
    • Set、Map、WeakSet和WeakMap
    • web worker原理
    • WebGL教程(MDN)
  • jsInfoSeries

    • 简介
    • JavaScript基础知识
    • 基础知识2
    • 基础知识3
    • 基础知识4
  • 技巧

    • 5个js解构有趣用途
    • 如何使用set提高代码性能
    • cordova构建项目时的问题
    • js中轻松遍历对象属性的几种方式
  • 怎么写出更好的css
  • BFC详解
  • box-shadow详解
  • CSS小技巧
  • Grid布局详解
HTML
  • IP十问
  • http笔试
  • http协议
  • 浏览器原理
  • 浏览器缓存其实就这么一回事儿
  • 浏览器兼容性问题
  • 移动端开发兼容性适配
  • 前端性能优化
  • 前端如何进行seo优化
  • webpack

    • webpack HMR
    • webpack优化基本方法
  • leetcode题解

    • 两数之和
    • 判断整数是否为回文串
    • 无重复字符的最长子串
  • Js链表
  • JavaScript排序
  • React

    • 虚拟DOM原理理解
    • React Hook
    • 组件复用指南
  • Vue

    • Vue举一反三
面试题
读书笔记
GitHub (opens new window)

Syun0216

多读书多种树
  • ES6

    • ES6 Decorator
    • ES6核心特性
    • Promise&Generator
  • js原理

    • 简单实现bind、apply和call
    • 如何遍历一个dom tree
    • 实现函数currying
    • 实现一个event
    • 详解js的继承
    • 详解requestAnimationFrame
    • Canvas api详解
    • DOM事件
    • EventLoop详解
    • JavaScript的内存管理
    • JavaScript的运行机制
    • Math对象
    • new操作符都做了什么
    • create基本实现原理
    • Set、Map、WeakSet和WeakMap
    • web worker原理
    • WebGL教程(MDN)
  • jsInfoSeries

    • 简介
    • JavaScript基础知识
    • 基础知识2
    • 基础知识3
    • 基础知识4
  • 技巧

    • 5个js解构有趣用途
    • 如何使用set提高代码性能
    • cordova构建项目时的问题
    • js中轻松遍历对象属性的几种方式
  • 怎么写出更好的css
  • BFC详解
  • box-shadow详解
  • CSS小技巧
  • Grid布局详解
HTML
  • IP十问
  • http笔试
  • http协议
  • 浏览器原理
  • 浏览器缓存其实就这么一回事儿
  • 浏览器兼容性问题
  • 移动端开发兼容性适配
  • 前端性能优化
  • 前端如何进行seo优化
  • webpack

    • webpack HMR
    • webpack优化基本方法
  • leetcode题解

    • 两数之和
    • 判断整数是否为回文串
    • 无重复字符的最长子串
  • Js链表
  • JavaScript排序
  • React

    • 虚拟DOM原理理解
    • React Hook
    • 组件复用指南
  • Vue

    • Vue举一反三
面试题
读书笔记
GitHub (opens new window)
  • 浏览器原理
  • 浏览器缓存其实就这么一回事儿
  • 浏览器兼容性问题
  • 移动端开发兼容性适配
  • 前端性能优化
  • 前端如何进行seo优化
  • lerna学习笔记
  • 用nodejs搭建api网关
  • etcd学习
  • webpack

    • webpack HMR
    • webpack优化基本方法
  • CI/CD

    • 如何从0到1一步步成体系地搭建CI
      • 如何从0到1一步步成体系地搭建CI
    • 如何建立前端标准化研发流程
    • 如何打造全链路项目生命周期的统一交付平台
  • project
junwen
2021-04-10

如何从0到1一步步成体系地搭建CI

# 如何从0到1一步步成体系地搭建CI

摘自前端早早聊 Gitee私有云前端团队 Janlay

# 现状和困难 & 前端运维之路

# 字节跳动面试题

1.自我介绍
是的,我在看那个大厚书
cicd我现在兴趣很大非常想掌握
2为什么刚工作不久离职了
3.业务中负责什么
4.node偏运维方向的有没有了解过( docker
这都是晋升的点
k8s
5.业务中主要用node干了什么
6. react.生命周期有了解吗
的确这俩很接近。弹性伸缩,动态扩容,自动重
7.说下 react-router源码你看完后印象深刻的部 启,简单部署都有

# Devops 工具链


# 演进历史

# FTP + Nginx

  • 与敏捷开发节奏不合拍
  • 缺少自动化
  • 手动操作,误操作风险大
  • 流程繁琐

# 自动化序章 shell + Nginx

node -v
npm-v
npminstall-gcnpm--registry=https://registry.npmtaobaoorg
cnpm install
npm run build
#压缩
tar -czvf vue-cli-demo, tar ./dist
scp
/vue-cli-demo tar root@172.16.81. 151
ssh root@172.16.81.151tar zxvf M/vue-cLi-demo tar &d mv dist/*/home/nginx/htmL
1
2
3
4
5
6
7
8
9
10

缺点:

  • 半自动化
  • 缺少可视化交互
  • 交互操作不友好
  • 服务器访问权限泄漏

# 可视化执行 Jenkins + Nginx

优点:

  • 图形化操作,交互友好
  • 可以做权限分配
  • 可以集成 Git hook做钩子触发

缺点:

  • 代码运行环境需要高度集成
  • 需要版本归档管理
  • 快速分发部署

# 容器时代 Jenkins + Docker + Nexus + Nginx 容器

优点:

  • 服务容器化
  • 更加便捷的应用版本管理
  • Docker layer分层策略,节省服务包镜像拉取时间

缺点:

  • 多服务器批量部署

# 基于配置清单服务器批量操作 Jenkins + Docker + Nexus + Ansible + Nginx 容器

优点:

  • 基于服务器配置清单的操作
  • 可以批量操作服务器

缺点:

  • 客户/自用服务的负载均衡服务发现,希望自动配置
  • 服务发布不停机
  • 多套环境/多个业务之间希望做到隔离。互不干扰

# 容器集群编排 Jenkins + Kubernetes + Docker + Nginx 容器



# 为什么需要自动化?

解决上线部署困难的问题,让产品快速可以上线验证

  • 上线实现了自动化,然而需求上线时间丝毫没影响 手动测试时间占比多少?自动化测试占比多少?全量测试是不是必须?
  • 无法打通上线的 “最后一公里” 从业务需求⻆度思考,是否需要手动构造自动化平台?
  • 投入和产出不成正比 部署频率特低,CI/CD的意义有多大?

# 做平台而不是工具


# 最后

  • 自动化,只是手段。如果不能通过自动化去打破发布现状,提升效率。做自动化反而是一种成本的浪费
  • 从业务⻆度出发,选择自己合适的工具去做自动化
  • 做好数据度量,持续优化流程

# 书籍

-《Kubernetes进阶实战》

  • 《从 0 到 1 实现一套 CI/CD 流程》
  • 《Devops 实践指南》
在Github上编辑此页 (opens new window)
#前端早早聊#cicd
上次更新: 4/10/2021, 3:25:52 AM
webpack优化基本方法
如何建立前端标准化研发流程

← webpack优化基本方法 如何建立前端标准化研发流程→

最近更新
01
如何打造全链路项目生命周期的统一交付平台
04-10
02
如何建立前端标准化研发流程
04-10
03
随机数生成pi
04-09
更多文章>
Theme by Vdoing | Copyright © 2019-2021 Syun
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式