奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > 大前端知识 > 大神说 >

WEB前端技术架构,涵盖5层共20种技术

时间:2017-10-27 00:08来源:简书 作者:admin
首先说明下我们目前基本上所有项目(几个特殊的除外)都是用Nodejs作为一个比较轻薄的中间层来启动。这是一个基本情况,这样有利于理解我接下来说的东西。 各个不同的层级都做了




首先说明下我们目前基本上所有项目(几个特殊的除外)都是用Nodejs作为一个比较轻薄的中间层来启动。这是一个基本情况,这样有利于理解我接下来说的东西。

各个不同的层级都做了什么,做决定时怎么想的:
 

访问层,分为2个部分(静态和服务端),静态资源的CDN,因为我们是部署在阿里云上面的,所以直接使用的是阿里云的CDN服务,不得不吐槽下,阿里云的CDN服务不是很稳定,不如他们自家淘宝用的CDN给力啊。服务端用Nginx在外层提供HTTPS服务,反向代理我们自己启动的Nodejs服务,同时使用了阿里提供的多机器的负载均衡服务,来保证了项目的稳定性。
 

代码层,浏览器端代码,基于Vuejs编写,同时使用我们自己开发的Radon-UI组件库,拼接页面元素,开发效率急速提升。服务端Express核心框架,结合Thenjs解决异步问题,Request代理API服务,Render页面给浏览器。根据页面的业务要求,会有两种情况,一种Render头尾部,然后JS异步获取数据,渲染页面,第二种Render整个首屏页面,部分弹出层或者DOM使用js来管理。几个特殊的系统和页面,Nodejs担任的任务就变多了,比如我们给运营开发的活动页面生成系统,使用mongoDB来存储运营填写的文案和上传到阿里云OSS图片地址之类。还有我们得到APP订阅文章的红包分享项目,里面为了存储用户信息,使用Redis来存储Session信息。
 

工具层,这里我们有一个Yeoman的generator,可以直接生成新项目的各种配置和基础代码文件,使用webpack来开发和打包构建,添加Md5戳到我们的静态资源上,增量部署到CDN上。同时用到Gulp的原因是有很多老项目还在使用,没有完全的切换过来,但现在也正在一步一步切换。使用Sass和Babel,提供了css的模块化和提高了css的可维护性。Babel让我们有了开发环境下直接使用ES6的可行性。NPM作为项目的包管理,同时我们搭建私有的NPM源,来保证更新包时候的速度和稳定性(还记得 Azer Koçulu 删除了自己的所有 npm 库的事件么)。
 

部署层,这里主要是运维的场地,对于我们前端而言,主要是静态资源的部署和Nodejs代码的上线。我们使用自己内容搭建的部署系统搞定这个事情,添加上权限管理和回滚机制,静态资源使用增量部署,保存无缝切换,先行部署静态。服务端采用替换部署机制,就是说,在负载均衡上,踢掉一台,部署一台,再上线到负载上,重复到所有机器完成为止。保证服务稳定,不间断。
 

监控层,这里就有很多包含很多东西了,有第三方的,我们自己开发的,还是开源的。关于服务端报警我们采用了Sentry来监控错误,一旦发生错误,我们就用Sentry发送邮件给相关人。可以立刻知道错误的地方和原因。同时,在性能方面,我们使用第三方的One APM来监控性能指标,这样就能知道哪些页面加载比较慢,需要优化,优化的点在哪里。对于Nodejs有一个问题,就是进程监听方面,这里我们选用了PM2来做进程监听,保存线上的进程一单出错奔溃,就能自动拉起服务,不会因此僵死在那里。加上使用Log4js来输出日志到知道文件,接着使用阿里云的日志服务,监听日志文件,输出到日志服务系统,就可以直接在外网环境中看到日志的详情以及上下文情况,非常有用。最后我们自己搭建了一个Foundation前端系统,专门留给前端自己使用的,主要目的是提供一些自身部门需要的服务,包括收集操作日志和文件上传功能等,后续可能还会提供更多功能。
 

以上的架构是根据团队的人员配比,技术水平,以及业务需求来搭建的,并不一定要追求所谓的高大上,所谓的完美,很多时候要综合考虑。


 

作者:乖小鬼  (责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
史密斯 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-24 11:11 最后登录:2018-09-02 11:09

关注奔三路