大搜车 怎样开发和部署前端代码?
发布在大搜车前端团队专栏2014年10月29日view:10947
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

这是一篇针对知乎问题的一个回答,整理到这里,方便大家讨论查阅。

原文地址:http://www.zhihu.com/question/20790576/answer/32612617?group_id=510748546086096896#comment-62501604

最后有招聘,有意者留意一下,谢谢~~

虽然我们不是大公司,但是我也来占个位,东西太多慢慢写。

1.开发环境的被动式资源服务。

我们的开发环境是一个叫做ads的服务,在github上找得到,没说开源,但是都是public的项目。 这个环境跑在每个人的机器和测试环境的机器和线上的机器上。 支撑了大搜车所有环境的静态服务。 其实它做的工作比较简单,无非是一个静态文件服务器+一些实时处理。 原理也比较简单,被动式处理,当你访问一个文件的时候,就会去寻找这个文件的需要经过的处理中间件,让文件以管道的形式通过这些中间件,最后返回一个处理过的文件内容。 例如jade和less,我们项目里没有编译和打包的概念,你就写就行了,然后任何环境里访问index.css其实都返回的是index.less的编译结果,打包的过程和配置,都不需要关心。包括jade,less,js压缩,requrejs打包合并都是用这样的方式开发,你写的是这样,你看到的是另一样,简单粗暴,每个人只需要关心自己需要关心的事情,而不是项目的配置和打包之类的事情。

这个环境也无需配置,直接github clone下来,node app.js跑一下就再也不用管了。

2.如何开发和测试?

测试环境。通过切换host,我们有一个测试的域名,叫做http://f2e.souche.com。默认这个域名是指向一台前端单独的测试服务器的,通过nginx,转发到一个ads的服务上。然后这个服务的背后是我们的前端资源文件,这个项目里还跑了一个定时脚本,一分钟pull一次从github更新代码。 所以http://f2e.souche.com直接访问,访问的就是测试环境,这个环境的代码永远是最新的,它会定时从github拉取最新的代码。 这个环境主要用来支撑测试和开发访问网站的测试环境时候访问到的前端资源的服务支撑。

本地开发。通过切换host,把http://f2e.souche.com切换到127.0.0.1,然后就把服务指向了本地的ads服务,本地的ads访问的是本地的资源项目,所以任何修改直接会生效。

3.动态路径和时间戳自动更新

在java程序中,我们实现了两个跟前端资源有关的机制。 动态路径。我们的java程序会根据环境的不同判断来引用不同环境的资源文件,例如测试和线上,自动引用不同路径的资源。

时间戳自动更新。我们前端维护了一个resource.properties,这个文件是一个时间戳的kv。每次发布一个文件,就让他对应的时间戳+1。然后java里会定时去远程读取这个文件,如果读取成功,就把这个kv解析到内存覆盖之前的时间戳map,然后每次渲染模板的时候,会把对应的时间戳通过方法注入到模板中,模板中所有的资源引用都会根据这个时间戳配置动态改变资源的时间戳。

4.线上CDN和发布

线上我们也有一台前端自己的服务器,专门用来跑ads支撑线上服务。 每个请求进来(http://assets.souche.com是指向cdn的),会先通过阿里的cdn服务,然后如果cdn上有缓存副本,就会直接返回,如果没有,则会去请求一台(http://f2e-assets.souche.com不经过cdn)这台是前端的线上服务,这台服务器上的ads跟开发和测试环境的ads一模一样,会动态处理,jade,less,js压缩合并,requirejs打包,图片自动优化。

发布,就简单了,就是简单的文件拷贝,我们有个专门的发布服务,也是nodejs写的,会记录每次发布的时间内容,然后copy文件过去,并且更新上面提到的resource.properties。这样就能自动更新时间戳了。

5.combo等个性化服务。

因为采用上述的架构,所以我们可以灵活定制我们的静态服务,因为我们中间有一层cdn,后面架设了一个动态服务,这个动态服务是无所不能的。

例如combo,这样的url:http://assets.souche.com/assets/js/$$lib/jquery-1.7.1.min.js,lib/require.js,lib/jquery.flexslider-min.js

实现起来很简单,后台收到请求的时候解析下路径,把文件动态压缩一下,然后合并返回给前端即可,没啥好说的,但是就是够方便。

6.被动式服务的性能。

因为ads是被动式服务,它的好处是傻瓜化,坏处是有时候可能会有性能问题,还好我们可以适当规避。 例如常用的服务:jade,less,js压缩合并,requirejs打包,图片自动优化

其中jade,less的实时编译是非常快的,基本感觉不出来,所以这两个可以忽略。 js合并压缩,requirejs打包,图片优化是比较慢的。 所以在本地开发和测试环境的时候,这几个服务是关闭掉的。也就是我们的js只有在线上才是压缩的,本地都是不压缩的,当然访问路径都是一样一样的。 requirejs也不打包,本地和测试都采用异步加载,到了线上才会使用打包出来的文件。

所有的所有,都没有中间文件,所以在我们的前端项目里,看不到css文件,看不到压缩后的js文件,看不到jade编译出来的html,看不到requirejs打包的文件,也看不到优化后的图片文件。因为所有的一切都是被动式。

而在线上,所有的性能问题都不是问题了,因为有cdn,所以服务不会一直被请求,请求一次之后就被cdn缓存,再慢的服务,也是没有问题的。

7.后言

大概先说这些,一直以来从来没跟别人讲过公司的前端工程环境,今天废话了一通。

最近正在搞一个比较特立独行的前后端分离,思路跟其他公司稍微不同,前后端分离最重要的不是技术实现,而是因为涉及到了整个公司的开发架构,需要为前端,开发,测试,都定制一套傻瓜化的开发环境和解决方案,重新制定开发流程,又涉及到产品运营等等,这些的推动才是最复杂的,中间要解决很多问题,不能说为了技术而技术,要为每个职责解决问题才能够推动整个项目。

另外,公司招聘前端开发,杭州大搜车,线上二手车O2O服务平台,技术什么的就不说了(java,ruby,nodejs,golang我们都玩),氛围也懒得夸了(烧烤喝酒party妹子应有尽有),有兴趣的直接联系我吧,邮箱:sunxinyu@souche.com

评论
发表评论
3年前

如何使用线上cdn可以详细的介绍下吗

3年前

https://github.com/souche-f2e 这里面是我们公司的一些前端项目,静态资源是private的。代码不是很漂亮,凑合看哦

3年前

ads地址?

3年前

求一下 ADS在github的地址,谢谢

3年前

mark

3年前

mark le

3年前

Nice~从头看过来,跟我们自己搭的开发工具异常相似啊~么么哒~

3年前

@野人不是野人 是的,但是需要学习和配置,这里ads是个傻瓜化的流程管理工具。目的就是:开发者不需要关心环境和打包等,只需要专注于使用效率工具开发功能。

3年前

这里ADS的工作, 可以用gulp, 或者grunt配置起来, 是吧?

WRITTEN BY
前端乱炖
专注前端技术和关爱前端人员情感问题20年 http://www.html-js.com
TA的新浪微博
PUBLISHED IN
大搜车前端团队专栏

大搜车(souche.com)前端团队的一些研究和总结性文章。欢迎订阅。

我的收藏