MyException - 我的异常网
当前位置:我的异常网» 软件架构设计 » 替前端而战-搭建统一开发环境

替前端而战-搭建统一开发环境

www.MyException.Cn  网友分享于:2013-11-02  浏览:0次
为前端而战-搭建统一开发环境

  除了nodejs之外,后端技术(php/java等)及环境搭建一直都是大多数web前端开发人员的弱项,而且每当公司里进来一个新的前端开发人员,第一件事情要做的就是搭建开发环境,需要在新的电脑上安装IDE、nodejs、npm以及团队里面需要用到的技术所需要的依赖,一般需要花费一两天时间;另外,如果团队里的后端技术不是nodejs,以php为例,做需求时难免要跑php来验证自己的功能,又或者有涉及php代码改动的话,就要想办法联调;而这样的话就需要在自己本地搭建一个php环境给自己用,而我刚才说了,这是前端开发人员的弱项,更何况有时候有些需求是后端要做系统变更的,那也得在自己的电脑上重新配置;为了不这么麻烦,我们用到了虚拟机、vargrant或者docker,专业的人做专业的事情,环境变更了,就由后端开发人员重新build个镜像给到前端覆盖旧版使用。

  但是有没有更加快速方便的办法,因为我不仅想减少新员工的成本、还想在我更换一台电脑的时候,也能快速进入开发(如果不能远程桌面的话);于是我搭了一个统一开发环境,让所有web前端开发人员(甚至是后端开发人员也可以用)共同使用一套开发环境,但各自的代码可以互相隔离,于是我使用了一台云主机(当然是要用公司的,这样才安全哈〜),如果你(们)的团队也适用这样的场景,也许可以参考一下

  OK,题外话就不再扯了,这里介绍一个统一开发环境的设计思路,我们看图说话,先看设计图:

  

  接下来对着设计图从上往下一步步来讲:

  1、每个前端开发者(开发者A、B、C等)手上就是一台电脑,在开发以及调试的时候都需要在浏览器输入自己的地址来跑起自己的项目以及验证;

  2、在跑起来之前,先在浏览器设置好一个cookie作为识别码,例如我使用的是developer=coffee.huang,因为在浏览器在打开页面时实际上所有的网络请求(包括当前页面)都会带上本域的cookie到服务端,而服务端就是我上面说到的云主机,作为一个搭建统一开发环境的平台;

  3、所有的请求去到了云主机,于是其实我已经在云主机上搭建好了所有服务器环境,包括:php\nginx\mysql\git以及nodejs和npm(因为这样的话,我其实可以直接在云主机上进行前端代码的打包了)等;

  4、所有到云主机的请求首先抵到nginx,这时候nginx已经配置好了转发器,根据cookie:developer=coffee.huang来转发,把需要运行的php代码转发为coffee.huang的开发目录;

  于是,根据以上的设计,如果有新员工来,只需要给在云主机上给新员工创建一个登录的帐号以及开发目录,然后新员工在云主机自己的目录里,通过git命令把代码拉下来,就可以进入开发了,当然也需要在自己的本地的电脑上装一下sublime等IDE软件、可以加个sftp插件,每次改代码就可以自动上传到云主机对应自己的目录中进行开发(重点说明:其实也可以不用sftp,我后来也在云主机上安装好了samba将云主机上的开发者目录共享给开发者,开发者就可以在自己电脑上新建一个目录映射到云主机,例如windows可以在“我的电脑”界面,直接使用“创建网络位置的功能”,就可以做到直接编缉云主机上的代码了);

  另外,这样还有一个好处就是无论线上的php环境做了任何变更,只要把变更配置同步回这一台云主机,那么所有人都相当于是自动使用了同一个跟线上环境一致的环境、节省大家的配置成本;而最重要的是,根据cookie来转发,可以隔离各自的php的代码,互不干扰,因为虽然前端开发人员大多数时候不需要改动php代码,但有大家同时进行不同的需求的时候,需要拉取来自不同git分支的php代码。

  最后总结一下:

  1、统一开发环境是为了让前端开发人员可以轻装上阵,只专注前端开发;

  2、因为共用环境、所以只需要一次变更便可以让所有人都用到了最新的环境配置;

  3、代码隔离,开发人员使用各自的代码共享同一套开发环境,并行开发而互不影响(事实上我在实际中把前端的自动化工具也装到了云主机上,所以无论前端代码、后端代码还有代码提交等所有工作都可以直接在同一台云主机上进行而互不影响)

  最最后,值得注意的是:

  首先你(们)团队需要有一台云主机(或者如果是一台物理机就更好了);另外,统一开发环境要够稳定或者做环境的备份及替换,就是说不能云主机一旦挂了,就所有开发都立刻傻眼了,都得等着环境修复好才能继续工作。

  最最最后,一句题外话:

  个人觉得,web前端工程师想成长得更好,到了一定阶段后,就该把“web前端”去掉,往后端还有其他方面去横向发展,能为自己和团队创造得更多(这只是我作为6年的web前端开发人员的经验之谈而已哈〜)。

  

文章评论

老程序员的下场
老程序员的下场
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
如何成为一名黑客
如何成为一名黑客
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
程序员都该阅读的书
程序员都该阅读的书
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
为什么程序员都是夜猫子
为什么程序员都是夜猫子
程序员应该关注的一些事儿
程序员应该关注的一些事儿
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
 程序员的样子
程序员的样子
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
总结2014中国互联网十大段子
总结2014中国互联网十大段子
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
一个程序员的时间管理
一个程序员的时间管理
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
程序员和编码员之间的区别
程序员和编码员之间的区别
编程语言是女人
编程语言是女人
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
那些争议最大的编程观点
那些争议最大的编程观点
Java程序员必看电影
Java程序员必看电影
旅行,写作,编程
旅行,写作,编程
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
我的丈夫是个程序员
我的丈夫是个程序员
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
10个调试和排错的小建议
10个调试和排错的小建议
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
中美印日四国程序员比较
中美印日四国程序员比较
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
程序员的鄙视链
程序员的鄙视链
我是如何打败拖延症的
我是如何打败拖延症的
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
漫画:程序员的工作
漫画:程序员的工作
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有