前端项目工程化流程--从开发到发布

前端项目工程化流程–从开发到发布

       一般来说，一家成熟的公司，早就把项目打包部署、测试、预发及线上发布都实现了自动化或一键操作。因此，对大多数前端开发工程师来说，基本涉及不到这些工程化的事情。但作为一个所谓的前端开发工程师，必然需要对工程化，或者简单来说，我们项目的部署上线流程，有一个清晰的认知。以供我们在面对项目需要迁移、服务器升级、线上节点挂掉等频率虽低但影响很大的一些问题时，能迅速定位并协助后端、运维同学解决问题。

       下面以目前的开发及部署发布流程，从开发的层面一点点介绍前端项目从开发到上线的流程：

一、开发阶段

关键词：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部分是需要在测试环境启动，而纯静态部分是需要打包的。

四、线上环境

关键词：nginx、机房、节点、本地化部署、jenkins、CDN服务、
       线上环境打包部署和测试环境无甚区别，测试环境一般是在公司内部局域网下访问，公司的运维去配置域名映射，如果是外网访问的话，通常我们需要配置等等；而线上环境则是开放式的互联网访问，它所对应的域名是需要向服务商购买，并且网站也是需要备案的。这些先揭过不提，我们的重点是，一般公司内，项目的线上部署又牵扯到哪些概念呢？

nginx?
        nginx是一个http服务器，他可以将静态文件通过http协议展现给客户端，同时他也可以用来做反向代理和负载均衡，简单理解就是当一个人请求我们的静态项目资源时，我们通过nginx的配置，将他所需的东西发给他，就像前面所述的纯静态项目，打包之后的产物，在有访客访问是，我们是通过nginx服务将对应的index.html路径转发出去，访客才得以访问到我们服务器上的资源。此外，nginx还有在某一台服务器不够用时，合理的选择其他对应的节点等功能。

机房？
        对测试环境来说，可能我们好几个应用部署在一个服务器上的不同容器中，但是对于线上环境，我们通常是一个项目对应一台服务器的（可以理解为一台电脑），那么机房就是存放了多台电脑的这么一个地方。之所以要一个项目对应一台服务器，一个是环境稳定，比如依赖的node版本等等，一个是资源配比（这个在项目刚申请的时候就需要向运维提的服务器配置工单，根据不同项目的大小、配置不同的硬盘等等，节省资源）。其中，可能有一些机器专门负责打包等等操作，不运行项目，我们通常称之为打包机，为了打包更快速，可能还有分机房打包这样的方案，这些先揭过不提，只要理解为让打包更快的一种处理机制即可。

节点？
       为了保持线上环境的稳定，我们打包后的产物通常不仅仅部署在一个节点。比如公司有四个线上节点，我们打包后的项目，需要每个节点都部署，通过专门的DNS域名转发，访问不通的节点，如果有节点挂掉（理解为机房挂掉），还可以转发到别的节点访问，从而保持线上环境的稳定。

本地化部署？
       这里的意思其实是，我们的项目要部署在合作方当地的服务器中，比如一些医院项目、医保项目，政府要求必须将服务部署在当地，以免数据泄露。其实就是把我们原本部署在自己服务器上的这一套，部署到别人指定的地方去。

CDN服务？
       它的全称是:Content Delivery Network或Content Ddistribute Network，即内容分发网络。顾名思义他是做内容分发的。通常，公司会购买腾讯或阿里的CDN服务，帮我们的一些重点网站做内容的分发，为什么呢？

       前面说到我们的机房，那一般公司通常不会在各个城市都分配了机房的，如果一个新疆的用户要访问我们的资源，他的请求跨过那么多光缆到达我们的机房时，时间已经过去很久了。而CDN服务，就是将我们的资源，通过分发机制分发到全国各个节点，用户访问的时候，直接就会访问到最近的资源了。