昨天同事lastday，把前端测试包扔线上去了

☆ 《人性的弱点》开篇说，遇到问题我们要学会赞美，少一些批评，多一些友善。

☆  本文将以生动形象的语言，主要围绕以下几点进行展开：

   △  目前各公司都是如何部署前端代码包的

   △  本文所主要讲述的前端部署改进过程

   △  最后附带一张详细的部署架构图，有需要的可以直接采用

目录

一、前端代码包的各种部署形式 

前端包的描述

1、跟随JSP走

2、前后端开发分离

3、前后端部署分离 

二、部署流程升级

说明：

1、为服务器配置环境变量

2、通过node获取环境变量

3、在落地页定义publicPath

4、输出架构图

---

一、前端代码包的各种部署形式 

前端包的描述

        前端的文件内容无非就是落地页（本文的落地页特指HTML文档），静态资源（本文的静态资源特指javascript css image 等资源）。而前端语言的特性并非像其他语言，需要依赖编译的过程，而是浏览器直接解释或者叫直编译过程。

        根据这个特性，前端包并不需要一个类似于java虚拟机那样的基层支持，提供一个tomcat ，或者一个docker，再或者配置一个nginx，将前端包扔进去，只要保证路径正确，就可以进行访问了。

        我们来看一下前端包目前的一些部署形式：

1、跟随JSP走

        其实现在很多大学还在学JSP的内容，他和java耦合在一起，我还记得JSP顶部总是会有几行jsp配合java的代码

<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%> 
<% 
String path = request.getContextPath(); 
String basePath = "//"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
pageContext.setAttribute("basePath",basePath); 
%> 

        反正现在已经记不太清楚了，当初也都没记太清楚，只记得创建jsp页面就有那么几行。然后就开始在jsp里开展我们的前端工作，也就是这样，再通过引入jquery，让我有了一口饭吃，所以我还是一直怀念着jquery。

        那么当开发完成后呢，前端根本不用管部署过程。服务端的同学会进行编译打包，很可能我们做的静态资源最终也都在那个tomcat服务器里。

        优点：这样做很明显，前端同学可以做，服务端同学也可以做，里面的 el 表达式也非常成熟，而且最明显的优点就是当用户访问网页的时候，很多内容不会走异步请求，直接就和落地页一起渲染出来了。那个时候几乎很少有白屏的概念。

        缺点：前端同学做JSP开发，还是需要有一些java基础的，比如 equals 会不会引发空指针，你是否可以用 == ，比如你习惯的length 可能 变成 size() 等。

                 学习 el 表达式也需要一个上手阶段，虽然前端同学用vue的模板很6，但还是有一些区别的。一旦服务端同学的java代码还抱着错就提交了，连页面都启动不起来，前端同学还得熟悉myeclipse的各种使用。哈哈，其实我以前特别喜欢这个开发工具。

2、前后端开发分离

        慢慢的耦合在一起的缺点大于有点了，大家开始想着前后端分离。但也仅仅是开发上的分离。服务端提供可跨域的接口，服务端启动自己的程序，前端开始启动自己的服务，或者根本就是本地直接打开落地页，本地引入静态资源开始开发。

        从上一步到这一步，大家使用jquery还是挺多的。既然开发分离了，就少不了发送异步数据请求。jquery对原生的HTTP请求做了封装，因为jquery的流行与统治，$.ajax 被大家使用了多年。以至于现在很多人说我发了一个 fetch 请求，我发了一个 axios ，决口不提我发了一个 ajax 请求。因为他认为 ajax 是jquery里面的东西。这里不硬刚啊，我发一个百度百科的截图吧。

        

         至于你发的是什么，这里咱们不讨论啊，爱发的啥发的啥吧，response 200了就开心呗。

        但开发虽然分离，部署仍然是老一套。前端开发完成了，打个包，发给服务端。老哥，帮我部署一下。过会儿服务端说，启动好了，看一眼。哎呀，不好意思，报错了，再帮我部署一下。服务端同学说好的。然后 部署好啦  。。。。。。 此处循环一万次。开发和部署过程大概就是这样子的

        

3、前后端部署分离 

        终于，服务端同学在那往返一万次的过程中觉得好像有点不对劲儿。给你弄个服务器自己部署着玩去吧，我还有事，就先下班了。

        但是一直到这一步，前端开始逐渐抛弃了jquery，vue react 被人们所熟知，不会点 v-if 不会点组件化，你连简历都块不会写了。

        而通过node webpack 的加持，前端再也不用搞服务端那一套tomcat 了，vscode hbuild 的盛行，前端同学也不用再研究myeclipse咋用了，简单，轻量，快速，调个接口，做个页面，啦啦啦，npm run dev  npm run build 开始打包，测完了，npm run prod 上线。

        一般公司往往提供两套域名或者请求地址，一套用于测试，一套用户线上环境。所以，前端同学可以通过 dev build prod 的启动文件区分，去查找不同的配置变量，以达到区分环境的区别。

         从上图可以看出，前端打包变得随意了，执行一下npm run build ，准备测试，测试通过后，npm run prod ，上线。

        但是正如标题那样，有人激动的不行，npm run build ，上线了。因为是人为，就会有问题。

二、部署流程升级

说明：

        本小节希望通过前端同学打包只执行一个命令npm run build即可，因为前端同学大部分时候区分测试与线上环境主要是在区分ajax请求的前缀，如 test.aa.com/api   www.aa.com/api 。

        之前拼 ajax 链接肯定都是 build  通过配置文件最终拼出 test.aa.com/api + '/user/list' ，那么对应的线上  ajax  请求链接呢就是 www.aa.com/api + '/user/list' 这样。

        那么之前都是通过build prod区分配置文件来区分，现在希望通过本方案可以只读取一个javascript 变量就可以达到拼出完整链接的目的。 如  publicPath + '/user/list' 这样。

        而 publicPath 呢，将通过配置服务器环境变量的形式来区分。所以这里就用到了node的环境变量的知识。node 可以通过progress.env.NODE_ENV 来获取环境变量。所以，我们还需要去对应测试服务器和线上服务器先添加机器的环境变量，这样node 才可以获取到。

1、为服务器配置环境变量

        这里就不详细截图了，windows --》 我的电脑 -- 》 高级配置 --》 环境变量，如果是服务器一般都是linux系统。

        对应添加NODE_ENV   prod  或者是  test 

2、通过node获取环境变量

        node获取环境变量的代码就是 process.env.NODE_ENV

        所以我们可以只启动一个node服务做为落地页的支撑项目，通过获取环境变量，为落地页的publicPath赋值

         这段代码的意思就是根据监测到不同的环境变量，为落地页的publicPath变量赋值。

3、在落地页定义publicPath

        因为现在大部分vue react技术栈的结构都是一个根div，然后才引入自己的静态资源，所以通过这种node koa 的服务端模板渲染架构，可以提前定义这个publicPath 的JS 变量，那么底部静态资源也就可以使用上这个 publicPath 了

4、输出架构图

        如果说你的工作努力过程与得到最终胜利结果差什么，可能差的有很多很多，但这之中必不可少的将是一次汇报；

        如果说汇报的过程和得到胜利的结果差的是什么，可能中间又会有很多，但这之中必不可少的是一个PPT；

        做为一个开发，如果你想让你的PPT不那么辣鸡，可能中间又会有很多东西，但这之中必不可少的应该是那种架构图