微信号:imooc-com

介绍:慕课网是一个超酷的互联网、IT技术免费学习平台,创新的网络一站式学习、实践体验;服务及时贴心,内容专业、有趣易学。专注服务互联网工程师快速成为技术高手!

用生活与你谈谈前后端联调以及Nginx

2018-10-04 21:33 慕课网

a



记得之前有写过一篇前后端数据交互的文章,总感觉写得有些许笼统,这里的话一起来稍微往细一点的方向写,咱姑且叫做前后端联调吧。


说联调之前呢,我们首先得明白一个东西。


百度应该是我们经常用到的一个网站了吧?我们经常打开百度,有没有去f12一下它呢?其实啊,你去f12一下,你会发现你多了一个投简历的机会,呵呵。好吧,我为什么要说百度呢?因为好像记得它有一道虽简单但要答得好也不容易的一道题,这道题是什么呢?


我们平时打开一个网页,从我们打开到到最终显示出页面好像很快,几十个毫秒?那这之中发生了什么?又经过了哪些步骤呢?

        

我姑且把它说成是快递员的拿信去投递,并且把对方的回信拿回给你的过程吧。

        

首先我们得明白互联网起初只是从电报,电话进化出来的一个通信网络,既然是网络,就会有一个一个的节点,这些节点其实就是我们的计算机,要如何区分这些计算机,就得有它每一个的网络身份证,我们也可以叫做IP,或者说IP地址,有了这些节点,再通过某种约定俗成好的协议,我们粗略叫它做密码本吧,双方就通过这种密码本来交流,(打个比方:英语,为什么是a-z总计26个字母组成的单词,语句?对于不懂英文的人来说,英语就是密码本),既起到了交流也一定程度起到请求过滤的作用。

        

第一步:快递员得先看要把信投递到哪里——DNS解析(快递员可能是个老外,不懂中文)

        

扯了这么多,发生的第一步,就是IP与IP之间的联通,而实际上,我们在访问网页的时候会输入IP去访问吗?会14.215.177.39这样去打开一个网页吗?应该不会吧?我们访问它的语法糖,额,不对,访问它的别名(或者说一层保护衣,域名),既然都是用域名去访问,那就需要解析了,起码得知道这个域名是对应了那个IP对吧?那这个域名是不是就是IP了呢?不是,一个域名实际上可以看成是一个IP(一台计算机)里的某个虚拟主机。其实浏览器一般有个DNS缓存,里面存放一定数量的DNS服务地址,比如说1000条,不够?没事,你的电脑也会有,如果都没有,才会去正式的解析域名。

        

第二步:快递员知道信要投递到哪了,但是你家辣么远,他不可能也没必要去跨越千山万水只为为你投递这一封信。找错人或者被冒领了咋办?他们的总上司——邮局得给你先分区,比如你的邮编是515525。

        

这就涉及到划区域了,实际上网络也是这样的,全球被分成N多个区域,这个区域你先别觉得有点奇怪不好理解,你打过cs吧?打cs不用上网吧?有了某个东西也可以让你和你的小伙伴们快乐无限,它就是局域网,就是我刚刚说的区域,这个局域网呢,它对外,实际上有个公用的IP段,就跟说0663开头的为什么就是揭阳的电话号码是一样的,互联网起源于电话,电报,它对内呢?又可以继续细分,分发。这样一级一级的下来,就跟快递员知道你是哪个省,哪个市,哪个区,乡镇村街道门牌号一样,而不是说哦你就在地球,然后让快递员去投递信封,他这样得累死,你估计得等死。

       

 第三步:接下来,邮递员出发了,带着你的信,穿越一层层的路由(或者说局域网,至于局域网怎么形成呢?我们说了互联网是从电话电报的形式发展而来,或者说它实际上是通讯的一种形式,想想华为为啥花这么多钱的做信号基站),到达目的地。

       

 第四步:信送到了,但信的内容得对方看得懂才行,也就是对方需要一份同样规定的密码本,这样才能根据密码本把信的内容翻译对吧。而这就是http/https协议,或者更广泛的说是TCP/IP协议——浏览器一般会选择一个大于1024的本机端口向目标IP地址的80端口发起TCP连接请求。经过标准的TCP握手流程(一般是三次握手:告知服务端客户端发送准备——告诉客户端服务端接收准备——告诉服务端客户端发送确认),建立TCP连接。这样信读懂了,但信的内容是什么呢?简单的说,索要网页,索要这个我们输入的域名下的根页面(Index.html).

        

第五步:回信。作为被访问方,后台服务器先判断访问它的域名(你的ip)是否合法,是否在它的白名单内什么的,OK了会按照你的请求发送响应的数据包给你。

        

第六步:你查阅回信。也就是浏览器加载。这个时候涉及到浏览器对超文本文档(html或者说document树文档结构)的解析,静态资源的加载,css样式层的渲染重排重绘,js行为层脚本的运行等等。当然了,虽然这样写,但浏览器并不是就是按照这样的顺序来做事,同步的效率其实是很慢的,很多时候都是异步,在你不知不觉之中资源已经加载完毕。

        

其他,可能这之中还包括一些加密解密的过程,就我说的密码本稍微把规则弄复杂点,不让人轻易看懂,这样即使邮递员在送信的过程中被小偷把信偷出来,并用手机把你的信给拍完照后再放回去,这样你不知不觉中其实信息已经泄露,但是你的密码本很复杂的话,人家也看不懂,你也就安全了,对吧?



     

好了,有了上面的知识。那我们前后端在各自单元测试完毕后,需要做一件事,组装,合龙(一座大桥在建设的时候实际上是两端开工而非一端开工,最后就需要做一部让桥成为整体的最重要的步骤合龙),也就是前后端联调,这时候呢,后台干什么事?提供接口,写接口文档,可能你不大懂接口是干嘛的,不怕,接口其实很简单,我们在访问服务器的时候,实际上是访问服务器上的资源或者计算处理服务,但服务器本质上也是一台电脑,它有内存硬盘CPU,我们资源一般放那?硬盘啊,文件夹啊,是的,服务器也是放文件夹,不过这个文件夹稍微比较特殊,它就是数据库,而接口呢,就是说,比如你某个表格要渲染出来,那对应的数据在哪?由后台人员去数据库拿,他们拿出来的,我们得去他们的手里接过来才能拿到浏览器来渲染,对吧?从哪里接呢?就是从接口来接。而接口文档就仅仅是前后台约定好的接手的方式,没啥,而前端呢,把页面写好后,根据接口文档的规则,字段调取接口数据,真正意义上实现动态数据交互。

        

前后端联调过程中,有一系列需要解决的问题,你先仔细想想,都有什么?其中一个很重要的迫切要解决的问题就是在调试的过程中,服务数据接口的代码是放在后台的那位开发人员的电脑上,而你作为一名前端,页面样式特效的代码是放在你自己的电脑上,如何进行关联呢?我前端电脑上的页面代码怎么很神奇的跟另一台电脑上的后端代码结合起来成为一个完整的个体?跨域访问?不不不,没那么复杂。你传统的前后端不分离的时候特别好理解对吧?所有代码,资源都放同一台电脑(说服务器你可能不了解),代码与代码之间的执行是连贯的,这中间也不用产生任何通讯的(互联网的本质就是打电话)。但是呢,很多时候,我们数据库是非常重要的,重中之重(还记得删库跑路的那个梗吗呵呵,你实际上如果这样做你死定了),所以数据库一般都会专门用一台电脑来存放,再把前端的代码放另外一台电脑上,再把后台的代码部署到另一台电脑上,还得在数据库中间加一层结界,是的就是结界,或者说防火墙,一旦中病毒了或者受到攻击,不至于全军覆没,至少重点保护的数据库不至于被迅速干掉(老板一生的心血啊好吧开个玩笑)。

        

好了既然有这样的刚需,我们科技人员要做的不是去畏缩不前,而是去克服,经过多少年的积累,最终也诞生了很多相关的解决方案,我们这里呢,说说其中的一种吧——nginx代理服务器。

        

说反向代理之前我们得先知道反向代理是什么,另外得顺便说下负载均衡又是什么?因为这两个是相辅相成的。

        

反向代理:先说代理服务器的正向代理,我们一台真实的服务器在接受访问的时候呢,可能不是直接被访问,而是跟代理服务器通讯,把结果先给代理服务器,再由代理服务器传达给客户端,呈现的是一个服务端到客户端这种一对一的关系,这时候客户端它知道给它提供服务的是哪一台服务器。而反向代理则不同,是由客户端主导,而它的后面可能跟着一整个服务器集群,就跟我们拨打10086一样,电话的那一头小姐姐小哥哥是谁漂不漂亮我们其实并不关心,帮我们把业务办了就给10分好评,但是其实我们怎么样呢?是以我们客户本身作为主导,由反向代理这个总机(10086),通讯传达到真实的服务器上(客服小姐姐)。

        

nginx负载均衡:呐上面说到了,反向代理其实后面有一大票的小姐姐小哥哥(一整个的服务器集群)为我们提供服务,那我们或者说小姐姐小哥哥的老板中国移动怎么知道哪位小姐姐小哥哥做的事情太多,不堪重负,有的呢,又清闲自在,没几个人的电话被转接到他们那,这样不公平啊,得均衡啊,不然我不干了对吧?同样是九年义务为何你如此优秀?额不对,同样是拿那么多工资为何我累死累活?中国移动肯定也不希望这样,资源需要合理搭配嘛!负载均衡正是这样而来,它解决的是因为单个服务器的CPU(计算力),内存硬盘(存储)能力有限,需要多个服务器共同来分摊,并实现合理的任务分摊,服务器处理每个请求,对它来说就是一种负载,而代理服务器合理分配这些请求与负载给多个服务器,中国移动把电话合理分配给这么多个客服小姐姐和小哥哥,这是一种均衡。当然了,这样说有点扯,但不管,你理解了就好。而nginx呢,它其实没啥,就是一个类似于apache一样的东西,一个服务器罢了,只是一种实现我们想要的目的的一种方式,可能以后有oginx,pginx,qginx(OPQ嘛好吧当乱说了哈),但本质是一样的。

        

好了,我们再说说nginx的相关配置吧。


 再看看我们访问的地址:

注:命令行查看本地ip地址dos指令:ipconfig

            

这样我们就实现了通过访问本地服务器实现访问远程服务器的需求。(就一开始说的,后台代码在后端那位开发人员的电脑(服务器)上,而前端代码呢,在我们自己的电脑上,怎么合龙呢?)平时我们本地服务器对于我们前端来说是最熟悉的了吧?各种调试都在那调,等联调的时候,后台的服务我们怎么访问呢?我去访问他的服务器那我本地的代码又没用了对吧?


所以就通过nginx做一次反向代理,我们还是访问我们的本地服务器,我们前端的资源拿到了,然后呢,通过访问本地服务器的时候向,代理服务器nginx会向代理的服务端发送请求,并获取资源,这样后台的服务我们就通过nginx拿,前端的资源就通过本地服务器,是不是很帅?不同合并就可以调试了对吧?前后端就实现了真正意义上的部署分离,nginx另一个好处就是还帮你解决了跨域的问题,你不用各种请求头什么的设置,或者jsonp插入script标签啥的,通过代理就是解决跨域的另外一种办法。

       

好了,前后端联调差不多这样,我呢,也是一枚进阶中的菜鸟,有何不足之处,请各位大佬多多指教,不胜感激。


推荐教程Nginx入门到实践





往期精彩回顾




程序员你为什么这么累
工作三年,谈谈我对JAVA的学习思路
凉凉了,Python工程师凭什么拿到这么高薪资?




慕课网小程序





 
慕课网 更多文章 程序员为什么都选择不还清「技术债」? 程序员最核心的竞争力是什么? 华为很好,但我不愿再回去 祭出程序员的大招:34金币时间管理法 我是怎么把一个项目带崩的
猜您喜欢 为什么说「数据分析能力​」决定了你的职场身价? 《武林外史》部分摘录 9个灵感来源会使你想出成功的想法 双11抢购狂欢,龙果带你打响最猛一战 6 Myths and The Facts about DevOps