Soumettre la recherche
Mettre en ligne
Frontend devops-v1.0
•
Télécharger en tant que PPTX, PDF
•
0 j'aime
•
266 vues
Yan Wang
Suivre
Cloudinsight 前端 DevOps 实践分享
Lire moins
Lire la suite
Logiciels
Signaler
Partager
Signaler
Partager
1 sur 36
Télécharger maintenant
Recommandé
SRE 讀書會 - 導讀:第一章
SRE 讀書會 - 導讀:第一章
Chen Cheng-Wei
SRE 讀書會 - 導讀:第 31 章
SRE 讀書會 - 導讀:第 31 章
Chen Cheng-Wei
DevOps的神鬼奇航
DevOps的神鬼奇航
Edward Kuo
大型製造業實踐DevOps 團隊之路
大型製造業實踐DevOps 團隊之路
Edward Kuo
Dev ops 簡介
Dev ops 簡介
hugo lu
从CI到CD[麻袋理财王天青]v1
从CI到CD[麻袋理财王天青]v1
天青 王
DevOps核心理念和實踐
DevOps核心理念和實踐
Martin Liu
[ Study4TW Visual Studio Everywhere ] Vsts + microsoft teams 建構企業的Devops
[ Study4TW Visual Studio Everywhere ] Vsts + microsoft teams 建構企業的Devops
Edward Kuo
Recommandé
SRE 讀書會 - 導讀:第一章
SRE 讀書會 - 導讀:第一章
Chen Cheng-Wei
SRE 讀書會 - 導讀:第 31 章
SRE 讀書會 - 導讀:第 31 章
Chen Cheng-Wei
DevOps的神鬼奇航
DevOps的神鬼奇航
Edward Kuo
大型製造業實踐DevOps 團隊之路
大型製造業實踐DevOps 團隊之路
Edward Kuo
Dev ops 簡介
Dev ops 簡介
hugo lu
从CI到CD[麻袋理财王天青]v1
从CI到CD[麻袋理财王天青]v1
天青 王
DevOps核心理念和實踐
DevOps核心理念和實踐
Martin Liu
[ Study4TW Visual Studio Everywhere ] Vsts + microsoft teams 建構企業的Devops
[ Study4TW Visual Studio Everywhere ] Vsts + microsoft teams 建構企業的Devops
Edward Kuo
[2018 DevOps Days]大型企業如何推行DevOps
[2018 DevOps Days]大型企業如何推行DevOps
Edward Kuo
SharePoint 项目实施团队的成功之道
SharePoint 项目实施团队的成功之道
Yi Zhang
[MonkeyFest 2018 ] App 開發與 DevOps 上的實踐
[MonkeyFest 2018 ] App 開發與 DevOps 上的實踐
Edward Kuo
互联网持续交付整形记
互联网持续交付整形记
Ryan YU
Rancher 快速打造叢集的解決方案
Rancher 快速打造叢集的解決方案
Miles Chou
摩登開發團隊的DevOps之道 (@DevOpsTaiwan)
摩登開發團隊的DevOps之道 (@DevOpsTaiwan)
Chen Cheng-Wei
[Chinese version] DevOps Now And Future
[Chinese version] DevOps Now And Future
Denny Zhang
[2021 .NET Conf]善用 Azure Monitor 服務打造 DevOps 監控一環
[2021 .NET Conf]善用 Azure Monitor 服務打造 DevOps 監控一環
Edward Kuo
[Agile Tour Hsinchu 2019] Our practice in the DevOps Process for Manufacture ...
[Agile Tour Hsinchu 2019] Our practice in the DevOps Process for Manufacture ...
Edward Kuo
GDG Taichung: Cloud Study Jam ML API
GDG Taichung: Cloud Study Jam ML API
Duran Hsieh
我們與Azure DevOps的距離
我們與Azure DevOps的距離
Edward Kuo
過來人經驗 - 在企業中推行 DevOps 前該具備的認知與工具箱
過來人經驗 - 在企業中推行 DevOps 前該具備的認知與工具箱
TIM WANG
QCon shanghai2013-davidko-如何利用 kanban让 scrum 更完美
QCon shanghai2013-davidko-如何利用 kanban让 scrum 更完美
Jen-Chieh Ko
[2021 DevDays]Microsoft Teams 整合 Azure DevOps之實務應用
[2021 DevDays]Microsoft Teams 整合 Azure DevOps之實務應用
Edward Kuo
GitHub Action Introduction
GitHub Action Introduction
Duran Hsieh
從研發團隊管理及產品發展的角度看 DevOps
從研發團隊管理及產品發展的角度看 DevOps
TIM WANG
DevOps Days Taipei 2018
DevOps Days Taipei 2018
Cobra Chen
Effective DevOps (Agile Tour HsinChu 2017)
Effective DevOps (Agile Tour HsinChu 2017)
Chen Cheng-Wei
微軟 Hololens 混合現實平台開發
微軟 Hololens 混合現實平台開發
Edward Kuo
[2020 .NET Conf] 企業Azure DevOps Service 實際應用架構與秘辛
[2020 .NET Conf] 企業Azure DevOps Service 實際應用架構與秘辛
Edward Kuo
Reportes de-evaluacion-2014-2015
Reportes de-evaluacion-2014-2015
Jose Angel Silva Castillo
В облаке AWS
В облаке AWS
Артём Курапов
Contenu connexe
Tendances
[2018 DevOps Days]大型企業如何推行DevOps
[2018 DevOps Days]大型企業如何推行DevOps
Edward Kuo
SharePoint 项目实施团队的成功之道
SharePoint 项目实施团队的成功之道
Yi Zhang
[MonkeyFest 2018 ] App 開發與 DevOps 上的實踐
[MonkeyFest 2018 ] App 開發與 DevOps 上的實踐
Edward Kuo
互联网持续交付整形记
互联网持续交付整形记
Ryan YU
Rancher 快速打造叢集的解決方案
Rancher 快速打造叢集的解決方案
Miles Chou
摩登開發團隊的DevOps之道 (@DevOpsTaiwan)
摩登開發團隊的DevOps之道 (@DevOpsTaiwan)
Chen Cheng-Wei
[Chinese version] DevOps Now And Future
[Chinese version] DevOps Now And Future
Denny Zhang
[2021 .NET Conf]善用 Azure Monitor 服務打造 DevOps 監控一環
[2021 .NET Conf]善用 Azure Monitor 服務打造 DevOps 監控一環
Edward Kuo
[Agile Tour Hsinchu 2019] Our practice in the DevOps Process for Manufacture ...
[Agile Tour Hsinchu 2019] Our practice in the DevOps Process for Manufacture ...
Edward Kuo
GDG Taichung: Cloud Study Jam ML API
GDG Taichung: Cloud Study Jam ML API
Duran Hsieh
我們與Azure DevOps的距離
我們與Azure DevOps的距離
Edward Kuo
過來人經驗 - 在企業中推行 DevOps 前該具備的認知與工具箱
過來人經驗 - 在企業中推行 DevOps 前該具備的認知與工具箱
TIM WANG
QCon shanghai2013-davidko-如何利用 kanban让 scrum 更完美
QCon shanghai2013-davidko-如何利用 kanban让 scrum 更完美
Jen-Chieh Ko
[2021 DevDays]Microsoft Teams 整合 Azure DevOps之實務應用
[2021 DevDays]Microsoft Teams 整合 Azure DevOps之實務應用
Edward Kuo
GitHub Action Introduction
GitHub Action Introduction
Duran Hsieh
從研發團隊管理及產品發展的角度看 DevOps
從研發團隊管理及產品發展的角度看 DevOps
TIM WANG
DevOps Days Taipei 2018
DevOps Days Taipei 2018
Cobra Chen
Effective DevOps (Agile Tour HsinChu 2017)
Effective DevOps (Agile Tour HsinChu 2017)
Chen Cheng-Wei
微軟 Hololens 混合現實平台開發
微軟 Hololens 混合現實平台開發
Edward Kuo
[2020 .NET Conf] 企業Azure DevOps Service 實際應用架構與秘辛
[2020 .NET Conf] 企業Azure DevOps Service 實際應用架構與秘辛
Edward Kuo
Tendances
(20)
[2018 DevOps Days]大型企業如何推行DevOps
[2018 DevOps Days]大型企業如何推行DevOps
SharePoint 项目实施团队的成功之道
SharePoint 项目实施团队的成功之道
[MonkeyFest 2018 ] App 開發與 DevOps 上的實踐
[MonkeyFest 2018 ] App 開發與 DevOps 上的實踐
互联网持续交付整形记
互联网持续交付整形记
Rancher 快速打造叢集的解決方案
Rancher 快速打造叢集的解決方案
摩登開發團隊的DevOps之道 (@DevOpsTaiwan)
摩登開發團隊的DevOps之道 (@DevOpsTaiwan)
[Chinese version] DevOps Now And Future
[Chinese version] DevOps Now And Future
[2021 .NET Conf]善用 Azure Monitor 服務打造 DevOps 監控一環
[2021 .NET Conf]善用 Azure Monitor 服務打造 DevOps 監控一環
[Agile Tour Hsinchu 2019] Our practice in the DevOps Process for Manufacture ...
[Agile Tour Hsinchu 2019] Our practice in the DevOps Process for Manufacture ...
GDG Taichung: Cloud Study Jam ML API
GDG Taichung: Cloud Study Jam ML API
我們與Azure DevOps的距離
我們與Azure DevOps的距離
過來人經驗 - 在企業中推行 DevOps 前該具備的認知與工具箱
過來人經驗 - 在企業中推行 DevOps 前該具備的認知與工具箱
QCon shanghai2013-davidko-如何利用 kanban让 scrum 更完美
QCon shanghai2013-davidko-如何利用 kanban让 scrum 更完美
[2021 DevDays]Microsoft Teams 整合 Azure DevOps之實務應用
[2021 DevDays]Microsoft Teams 整合 Azure DevOps之實務應用
GitHub Action Introduction
GitHub Action Introduction
從研發團隊管理及產品發展的角度看 DevOps
從研發團隊管理及產品發展的角度看 DevOps
DevOps Days Taipei 2018
DevOps Days Taipei 2018
Effective DevOps (Agile Tour HsinChu 2017)
Effective DevOps (Agile Tour HsinChu 2017)
微軟 Hololens 混合現實平台開發
微軟 Hololens 混合現實平台開發
[2020 .NET Conf] 企業Azure DevOps Service 實際應用架構與秘辛
[2020 .NET Conf] 企業Azure DevOps Service 實際應用架構與秘辛
En vedette
Reportes de-evaluacion-2014-2015
Reportes de-evaluacion-2014-2015
Jose Angel Silva Castillo
В облаке AWS
В облаке AWS
Артём Курапов
Android intro
Android intro
Артём Курапов
Monitoreo
Monitoreo
Veronica Lopez Yanez
SaletteUSAtv MobileTech Classes 2012
SaletteUSAtv MobileTech Classes 2012
SaletteUSA-GlobaCom, Inc. (SaletteUSAtv)
Music video director project
Music video director project
TRUDY
ΛΙΒΑΔΕΙΑ
ΛΙΒΑΔΕΙΑ
Levadia Library
Angulos
Angulos
Jose Angel Silva Castillo
Materisoalmatematika
Materisoalmatematika
benipurnama
How did you use new media technologies in construction & research
How did you use new media technologies in construction & research
Christina Worby
Frontend Devops at Cloudinsight
Frontend Devops at Cloudinsight
Yan Wang
Medición Digital 101
Medición Digital 101
Rodrigo Tanco
Web Design and Web Marketing
Web Design and Web Marketing
MintTwist
318a
318a
guest61dc4ad
Συλλογικός Κατάλογος Ακαδημαϊκών Βιβλιοθηκών - Από την πρόκληση της υλοποίηση...
Συλλογικός Κατάλογος Ακαδημαϊκών Βιβλιοθηκών - Από την πρόκληση της υλοποίηση...
Levadia Library
Virtualization based on Node.js andQEMU
Virtualization based on Node.js andQEMU
Yan Wang
H1n1
H1n1
guest0392e01
Basic Rights and Reporting Policy
Basic Rights and Reporting Policy
Jonathan's Place
Php storm intro
Php storm intro
Артём Курапов
Obergine web design and digital marketing credentials
Obergine web design and digital marketing credentials
Obergine
En vedette
(20)
Reportes de-evaluacion-2014-2015
Reportes de-evaluacion-2014-2015
В облаке AWS
В облаке AWS
Android intro
Android intro
Monitoreo
Monitoreo
SaletteUSAtv MobileTech Classes 2012
SaletteUSAtv MobileTech Classes 2012
Music video director project
Music video director project
ΛΙΒΑΔΕΙΑ
ΛΙΒΑΔΕΙΑ
Angulos
Angulos
Materisoalmatematika
Materisoalmatematika
How did you use new media technologies in construction & research
How did you use new media technologies in construction & research
Frontend Devops at Cloudinsight
Frontend Devops at Cloudinsight
Medición Digital 101
Medición Digital 101
Web Design and Web Marketing
Web Design and Web Marketing
318a
318a
Συλλογικός Κατάλογος Ακαδημαϊκών Βιβλιοθηκών - Από την πρόκληση της υλοποίηση...
Συλλογικός Κατάλογος Ακαδημαϊκών Βιβλιοθηκών - Από την πρόκληση της υλοποίηση...
Virtualization based on Node.js andQEMU
Virtualization based on Node.js andQEMU
H1n1
H1n1
Basic Rights and Reporting Policy
Basic Rights and Reporting Policy
Php storm intro
Php storm intro
Obergine web design and digital marketing credentials
Obergine web design and digital marketing credentials
Similaire à Frontend devops-v1.0
Effective DevOps:一場文化與技術的轉型運動 (陳正瑋)
Effective DevOps:一場文化與技術的轉型運動 (陳正瑋)
AgileTour@TW
浅谈架构升级
浅谈架构升级
Hardway Hou
From Coders to Builders of the Intelligent World
From Coders to Builders of the Intelligent World
Huawei Technologies
Nb的敏捷
Nb的敏捷
oulan
Nb的敏捷
Nb的敏捷
Lanhui Ou
Open source的devops工具箱 公開版@coscup2016
Open source的devops工具箱 公開版@coscup2016
Kirk Chen
Docker with Cloud Service
Docker with Cloud Service
Caesar Chi
Docker with Cloud Service GCPUG
Docker with Cloud Service GCPUG
Caesar Chi
DevOps The Buzzword - everything about devops
DevOps The Buzzword - everything about devops
DivyanshGupta922023
Linux运维趋势 第14期 高性能电子商务网站
Linux运维趋势 第14期 高性能电子商务网站
51CTO
twMVC#24 | 開發團隊的敏捷之路(未完成)
twMVC#24 | 開發團隊的敏捷之路(未完成)
twMVC
Cloud and-devops
Cloud and-devops
scott liao
Hiiir 百人團隊導入敏捷實踐經驗
Hiiir 百人團隊導入敏捷實踐經驗
ChiaHsien Lee
Progressive Enhancement
Progressive Enhancement
lifesinger
敏捷思维 架构设计中的方法学
敏捷思维 架构设计中的方法学
Piguo Pi
ACCELERATE:精益軟體與DevOps背後的科學-重點整理、個人見解與實務經驗
ACCELERATE:精益軟體與DevOps背後的科學-重點整理、個人見解與實務經驗
ryan4task
Scrum gathering 2012 shanghai 产品管理及用户体验 分会场:敏捷的hard模式 产品经理视角(窦涵之)
Scrum gathering 2012 shanghai 产品管理及用户体验 分会场:敏捷的hard模式 产品经理视角(窦涵之)
LetAgileFly
Scrum敏捷开发模型
Scrum敏捷开发模型
Tony Deng
DevOps at DUDU
DevOps at DUDU
晓东 杜
Djt22 justinliu djt.qq.com
Djt22 justinliu djt.qq.com
drewz lin
Similaire à Frontend devops-v1.0
(20)
Effective DevOps:一場文化與技術的轉型運動 (陳正瑋)
Effective DevOps:一場文化與技術的轉型運動 (陳正瑋)
浅谈架构升级
浅谈架构升级
From Coders to Builders of the Intelligent World
From Coders to Builders of the Intelligent World
Nb的敏捷
Nb的敏捷
Nb的敏捷
Nb的敏捷
Open source的devops工具箱 公開版@coscup2016
Open source的devops工具箱 公開版@coscup2016
Docker with Cloud Service
Docker with Cloud Service
Docker with Cloud Service GCPUG
Docker with Cloud Service GCPUG
DevOps The Buzzword - everything about devops
DevOps The Buzzword - everything about devops
Linux运维趋势 第14期 高性能电子商务网站
Linux运维趋势 第14期 高性能电子商务网站
twMVC#24 | 開發團隊的敏捷之路(未完成)
twMVC#24 | 開發團隊的敏捷之路(未完成)
Cloud and-devops
Cloud and-devops
Hiiir 百人團隊導入敏捷實踐經驗
Hiiir 百人團隊導入敏捷實踐經驗
Progressive Enhancement
Progressive Enhancement
敏捷思维 架构设计中的方法学
敏捷思维 架构设计中的方法学
ACCELERATE:精益軟體與DevOps背後的科學-重點整理、個人見解與實務經驗
ACCELERATE:精益軟體與DevOps背後的科學-重點整理、個人見解與實務經驗
Scrum gathering 2012 shanghai 产品管理及用户体验 分会场:敏捷的hard模式 产品经理视角(窦涵之)
Scrum gathering 2012 shanghai 产品管理及用户体验 分会场:敏捷的hard模式 产品经理视角(窦涵之)
Scrum敏捷开发模型
Scrum敏捷开发模型
DevOps at DUDU
DevOps at DUDU
Djt22 justinliu djt.qq.com
Djt22 justinliu djt.qq.com
Frontend devops-v1.0
1.
小创公司如何提升 前端开发效率 Cloudinsight 前端 DevOps
分享 2016年5月35日
2.
关于我 • 王龑 • OneAPM •
前端工程师 • @wyvernnot
3.
分享内容 • 如何形成 DevOps
文化 • 开发中的一些技巧 • 持续集成和持续部署 • 监控和数据驱动
4.
如何形成 DevOps 文化
5.
什么是 DevOps • 促进软件的开发,
按时交付 • 关注过程、自动化的工具 • 强调开发、运维和测试的紧密合作 也就是 • 不加班 • 不重复 • 多职能
6.
DevOps is Agile
done right 图片来源:http://www.tricentis.com/solutions/devops/ 个人和互动高于流程和工具 工作软件高于理解文档 客户协作高于合同协商 变化响应高于计划遵循
7.
引入和形成自己的开发模式 我们团队的一些敏捷实践: • 严格控制例会时间 • 演示自己的成果 •
公开的代码审查 • 发布完后的反思会 • 自己一定要用自己的产品
8.
“吃自己的狗食” 及早发现问题,探索新的用例
9.
拥抱变更而不是频繁的改需求 • 对创业公司来说, 快速变更就是生命 •
封闭的冲刺迭代 • 重视和客户的交流,缩短反馈环
10.
开发中的一些技巧 最佳实践 更好的选择
11.
使用 ES6 书写易于维护的代码 •
写明天的代码 • 抛弃古董浏览器 • 使用垫片技术兼容现代浏览器(Math.log10 ) • 使用 JavaScript 语言转换器 • 使用 ESLint 做代码规范检查 • 先解决有还是没有的问题 • 在解决合理还是不合理的问题
12.
使用 ES6 书写易于维护的代码(cont) •
升级你的 Node.js 版本 • 选择 Node.js LTS 版本, • Node.js V6.0 对 ES2015 的支持度已经达到了 95 % • 前端项目和后端项目的界限正在模糊。 • 三大特征 • 封装、继承、多态 • 五大原则 • 单一职责 • 开放封闭 • 里氏替换 • 依赖倒置 • 接口隔离
13.
前端组件化难题 展示 切换不同 的模式 编辑器 Heatmap Pie Value Table Timeries TopN Treemap Button ButtonGroup Header Modal Panel DropDown 业务组件 公共组件 架构
14.
action dispatcher store
view action 热力图展示模块 热力图编辑器图表编辑器 Flux 架构 Redux Store 修改条件 修改指标
15.
使用 Webpack 打包 https://github.com/ruanyf/webpack-demos
16.
基于 Webpack 实现按需加载 //
以目录作为上下文 const chartTypeContext = require.context('../chartTypes'); // 工厂方法 const chartFactory = type => { chartTypeContext(`./${type}`); }; // 获取对象 return React.createElement(factory(type), { queries, qm // 注入属性 }); 图表编辑器 type: String 图 编辑器 数据查询工具类 热力图编辑器 时序图编辑器 热力图 时序图
17.
持续集成和持续部署 “懒”出效率
18.
使用 GIT 管理源代码 •
打不死的小强, 删不掉的代码 • 用好分支管理 • 开源的心态 • @cloudinsight
19.
优化环境
20.
保持开发环境和线上环境等价 • 使用 package.json
显示地声明依赖 • Windows / Mac / Ubuntu • 在 package.json 里使用不同的版本策略 • 稳定版 jQuery • 最新版 React • 固定板 react-xxxx-module
21.
测试技术的演进 • 第一阶段 • 测试人员需要自己安装各种模块,独立把项目跑起来 •
缺点 • 对测试人员的技术要求 • 测试的并不是线上的版本
22.
第二阶段 – 创建
Docker 镜像 4.反向代理 3.服务查询 2.服务注册 1.触发构建
23.
缺点 • 对于纯前端项目来说太复杂 • 速度非常慢 •
Docker Hub • NPM 由于国内网络的限制 不建议纯前端项目使用 Docker
24.
第三阶段 – 交付到
CDN • 方便而且便宜 • 持续的交付 • 随时部署
25.
使用 Hash 规避
CDN 的缓存问题 • 源文件 • app.js • MD5 • app-1w4j5ut9.js • Commit • app-fe34ftr0.js • Webpack • app-i2fedisu.js • Tag • app-v5.2.1-hoxfix-1.js`
26.
基于 Jenkins 使流程自动化 •
安装/更新 环境依赖 • 代码静态检查(规范、重复) • 安全漏洞检查 • 单元测试 • 编译打包 • 收集构建结果 • 生成报表 • 线上部署 • PhantomJS 截图 • 浏览器的自动化测试 • 邮件通知
27.
保障 DevOps 的安全 •
服务器启用 HTTPS • 开发环境尽量使用 SSH 证书, 并开启密码保护 • 做好监控和安全防护
28.
29.
监控和数据驱动 Monitor Everything
30.
DevOps 的过程中会产生大量的数据 • 单元测试结果 •
代码规范结果 • 需要更新的模块 • 每次打包耗费的时间 • 打包所用的 Webpack 版本 • 生成的文件的大小 ... …
31.
DevOps 的过程中会产生大量的数据 (cont) •
线上机器负载 • 每日活跃用户 • 活跃探针数 • 商城订单 • 每种功能的使用趋势 … …
32.
• 可用性 • 加载时间 •
错误率 • 运营商数据 • DNS时间 … …
33.
Monitor Everything
34.
去逛逛 DevOps 的
SaaS 商店 基础设施 监控 项目管理 统计
35.
谢谢 wangyan@oneapm.com
36.
运维帮: 一张图解读中国公有云现状 http://chuansong.me/n/358318951536
Télécharger maintenant