前端项⽬⼯程化流程--从开发到发布
前端项⽬⼯程化流程–从开发到发布
⼀般来说，⼀家成熟的公司，早就把项⽬打包部署、测试、预发及线上发布都实现了⾃动化或⼀键操作。因此，对⼤多数前端开发⼯程师来说，基本涉及不到这些⼯程化的事情。但作为⼀个所谓的前端开发⼯程师，必然需要对⼯程化，或者简单来说，我们项⽬的部署上线流程，有⼀个清晰的认知。以供我们在⾯对项⽬需要迁移、服务器升级、线上节点挂掉等频率虽低但影响很⼤的⼀些问题时，能迅速定位并协助后端、运维同学解决问题。
下⾯以⽬前的开发及部署发布流程，从开发的层⾯⼀点点介绍前端项⽬从开发到上线的流程：
⼀、开发阶段
关键词：Git、Vue、Node、
这部分是我们前端⼯程师接触的最多的部分，我们借助如Git这样的版本控制系统，基于⼀些如Vue这样的前端框架，通过多⼈多分⽀的开发，完成某个前端项⽬。
对于⼀般的前端项⽬，这⾥做两点区分，⼀个是纯静态项⽬，简⽽⾔之就是纯html+Css+js的项⽬；⼀个是Node项⽬，也就是除了纯静态⽂件，还有⼀层node层为我们做资源分发、接⼝转发等⼯作的项⽬。
我们在本地开发，多⼈分⽀合作，在本地浏览器或其他终端预览，这些都属于开发阶段的内容。
⼆、打包阶段
关键词：webpack
要知道，我们通过vue等前端框架开发的项⽬，⽐如在项⽬⾥看到的.vue⽂件等等，⽬前浏览器是⽆法识别的。要让我们的项⽬在浏览器中执⾏，必须要将项⽬打包成css+html+js的⽂件，也就是最原始的前端静态⽂件。vue这些前端框架只是为了⽅便我们的模块化开发及管理，最终运⾏是需要我们打包⽣成的产物。那么，如webpack这⼀类的打包⼯具，就是做这样的事情的。
在我们的开发阶段，其实也是通过打包⼯具，将我们的vue代码打包成了dist⽬录从⽽在浏览器中显⽰的，如果要部署到测试环境、线上环境，则就是将webpack打包后的项⽬部署到对应的环境中。
这⾥有两点区分，对于纯静态项⽬，是需要打包的，⽽对于node项⽬（⼀般会分node层和纯静态项⽬），则node是不需要打包的。三、测试环境
关键词：Jenkins、打包部署、容器环境、本地打包
  开发完的项⽬，接下来会进⼊测试阶段，也就是要将我们的项⽬，部署在测试环境。这个测试环境，
可以理解为⼀台（或多台）公共的服务器，我们的运维⼩伙伴将特定的域名访问，映射到这⼀台服务器上，测试同学们访问特定的域名，就可以看到我们的项⽬了。这⾥会涉及到⼏个点：
jenkins打包部署？
jenkins是⽤于做持续集成的，公司基于jenkins有⼀个测试环境打包部署的平台，是为了简化打包部署流程所设，各项⽬可以进⾏⼀些配置，⽐如执⾏⼀些打包命令脚本，将我们的项⽬打包并部署在某某环境中。前⾯有提到打包阶段，jenkins上⾯的配置就可以让我们配置git分⽀，帮我们在指定的容器中将代码的git仓库拉下来，安装依赖，打包部署等，从⽽我们才能通过测试域名访问特定代码（域名映射通常是运维来做的。）
容器环境？
前⾯提到了容器环境，简单来说，我们可以将⼀台测试服务器理解为⼀个容器，当我们需要部署多个测试环境（⽤于产品验收、⽤于演⽰、部署不同分⽀等需求）时，我们就需要将项⽬代码部署在多个服务器。但实际上，资源有限，我们没有这么多服务器，但我们为了环境隔离，可以在⼀台服务器上，像类似虚拟机的⽅式，创建多个环境，这就称之为容器。通过运维的映射，我们可以访问test1,test2来访问不同的容器上部署的不同的项⽬代码。
本地打包？
虽然jenkins可以帮我们完成很多测试环境部署的命令，但有时候我们需要本地化打包？为什么？最简单的来说，测试环境部署执⾏npm install命令会⽐本地慢得多，加上资源占⽤等问题，对⼤体量的项⽬来说，在测试环境打包会耽误很多时间，所以有⼀些项⽬，会选择本地打包完，将本地打包后的产物也同步到git上，然后在jenkins中，修改部署命令，直接拉取打包产物并部署，可以节约时间。（对于⼀些公司来说，可能这是最开始的测试环境部署⽅式）
node不⽤打包？
对于node项⽬，是不需要打包的，因为node不是静态资源，他是直接启动在服务器上的，就像我们本地启动⼀个node项⽬时，是需要启动node服务，为静态资源提供服务，在测试环境亦然，node项⽬的node部分是需要在测试环境启动，⽽纯静态部分是需要打包的。webpack打包流程 面试
四、线上环境
关键词：nginx、机房、节点、本地化部署、jenkins、CDN服务、
线上环境打包部署和测试环境⽆甚区别，测试环境⼀般是在公司内部局域⽹下访问，公司的运维去配置域名映射，如果是外⽹访问的话，通常我们需要配置vpn等等；⽽线上环境则是开放式的互联⽹访问，它所对应的域名是需要向服务商购买，并且⽹站也是需要备案的。这些先揭过不提，我们的重点是，⼀般公司内，项⽬的线上部署⼜牵扯到哪些概念呢？
nginx?
nginx是⼀个http服务器，他可以将静态⽂件通过http协议展现给客户端，同时他也可以⽤来做反向代理和负载均衡，简单理解就是当⼀个⼈请求我们的静态项⽬资源时，我们通过nginx的配置，将他所需的东西发给他，就像前⾯所述的纯静态项⽬，打包之后的产物，在有访客访问是，我们是通过nginx服务将对应的index.html路径转发出去，访客才得以访问到我们服务器上的资源。此外，nginx还有在某⼀台服务器不够⽤时，合理的选择其他对应的节点等功能。
机房？
对测试环境来说，可能我们好⼏个应⽤部署在⼀个服务器上的不同容器中，但是对于线上环境，我们通常是⼀个项⽬对应⼀台服务器的（可以理解为⼀台电脑），那么机房就是存放了多台电脑的这么⼀个地⽅。之所以要⼀个项⽬对应⼀台服务器，⼀个是环境稳定，⽐如依赖的node版本等等，⼀个是资源配⽐（这个在项⽬刚申请的时候就需要向运维提的服务器配置⼯单，根据不同项⽬的⼤⼩、配置不同的硬盘等等，节省资源）。其中，可能有⼀些机器专门负责打包等等操作，不运⾏项⽬，我们通常称之为打包机，为了打包更快速，可能还有分机房打包这样的⽅案，这些先揭过不提，只要理解为让打包更快的⼀种处理机制即可。
节点？
为了保持线上环境的稳定，我们打包后的产物通常不仅仅部署在⼀个节点。⽐如公司有四个线上节点，我们打包后的项⽬，需要每个节点都部署，通过专门的DNS域名转发，访问不通的节点，如果有节点挂掉（理解为机房挂掉），还可以转发到别的节点访问，从⽽保持线上环境的稳定。
本地化部署？
这⾥的意思其实是，我们的项⽬要部署在合作⽅当地的服务器中，⽐如⼀些医院项⽬、医保项⽬，政府要求必须将服务部署在当地，以免数据泄露。其实就是把我们原本部署在⾃⼰服务器上的这⼀套，部署到别⼈指定的地⽅去。
CDN服务？
它的全称是:Content Delivery Network或Content Ddistribute Network，即内容分发⽹络。顾名思义他是做内容分发的。通常，公司会购买腾讯或阿⾥的CDN服务，帮我们的⼀些重点⽹站做内容的分发，为什么呢？
前⾯说到我们的机房，那⼀般公司通常不会在各个城市都分配了机房的，如果⼀个新疆的⽤户要访问我们的资源，他的请求跨过那么多光缆到达我们的机房时，时间已经过去很久了。⽽CDN服务，就是将我们的资源，通过分发机制分发到全国各个节点，⽤户访问的时候，直接就会访问到最近的资源了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。