00:00
同学们呢,我们接下来带着大家来配置一下动静分离,那在这儿呢,我们把这个呃,我们的服务器打开。在这儿呢,我已经给大家准备好了一个站点啊,现在在这个,呃,四号机上NG04,呃,我们看一下啊,这个站点里边呢,我给大家呃跑了一个Tom cat,呃,这个Tom cat的跟站点里,也就是主战点里边呢,我们有一些这个资源在里边了,这inex TL,这就是这个,嗯,我们的这个静态的这个资源页啊。然后呢,在这里边呢,还有JS,还有image,还有CSS这三个目录,呃,现在所有的资源全都在我们的tomcat这台这个动态的服务器上,我们先访问一下给大家来看看啊,这是呃。192.168.44.104。这是四号机。哦,Tom cat是跑在8080端口的啊。
01:02
来看。呃,这就是这个站点啊,一个最原始版,一个最小版的这个问答系统啊,我们上硅谷的问答系统,这是做的一个,呃,这个这比较简单的啊,在这个页面里呢,我们看一下它这个源码,源码也很简单。呃,在index这个页面里呢,引用了这个CSS啊,JS一系列的这些,呃,外部的资源,还有一些图片大家可以看到啊。图片在哪儿印的呢?这比如说在隐秘之下引入的这个图片,然后这个CSS呢,看看啊。啊,在这儿引的这个bos drop啊,在CSS的目录下,这个写的也是比较规矩,也比较简单啊,这比较方便给大家做这个例子,然后还有JS啊,在JS下这query和bos drop的这个JS的呃,依赖这就是它简单的结构,然后这个小的这个项目呢,也给大家呃准备好了,你如果手里没有项目,想要做例子的话,也可以下载一下,就是这个首页,然后这个JS隐秘纸和CSS这个三个目录,我们现在把它部署到我们top cat上了,那接下来我们希望是把额外的这三个静态资源呢,把它挪到我们的NG上,那我先进行第一步就是做反向代理,让这个我们当前这个页面呢,能够通过N这个反向代理过来,不再访问8080端口了啊,访问八零端口就可以。
02:26
那我们还是在这个呃,101上去做这个反向代理吧。那么修改一下配置,101的这个配置。In的配置文件。由于我们之前已经学过了啊,我在这就简单的给大家快速的配置了,在这儿呢,Process里边我直接在这写就可以,幺九二点幺六八点,呃,44.104,端口是。注意这个,呃,你的这个字符集啊,8080,切换大小写的时候,还有全角半角都得注意一下,直接process到104的8080,那么保存之后reload一下试试。
03:12
呃,在访问101,我们看看是啥结果走。诶,没问题过来了,对吧?啊,一切都过来了,呃,在101上呢,其实是没有这些静态资源的,大家看啊,嗯,在图片新标签里打开,但是它显示的是在101里,说明它反应代理成功了,是后端的104给我们提供的资源啊,全部都代理过去了,那么接下来呢,呃,先给大家演示第一种比较简单的配置方法,也是固定的配置方法,这是比较适用于你的,这个资源不是特别多,或者目录不是特别多的情况下就可以这么配,那怎么配呢?就是在我们的这个。呃,幺零。101的这台主机上。我们给他呃,虚拟出来几个目录啊,然后把这个静态资源都给它传到161上,我们先干第一步啊,先做第一件事就是把这个。
04:08
嗯,这个104N04这个台服务器上的这些静态资源呢,给它给删掉,这样我们就能看出来啊。接下来这个静态资源的访问,它是在哪访问的了,大家看啊,我把这三个。目录给它删掉,这是104在tomcat里的,我把它删掉,那本质上啊,我们想动静分离的话,这台机上也不需要存这个这些静态资源了,那我们再来访问一下,大家看看。这是通过反向代理访问的。这里有缓存啊,我们打开F12。因为我们刚才不是已经删掉了吗?他应该已经访问不到这些图片CSS什么的了,诶看这会就正常了,你在这disable CA的时候,在这再多说一嘴,你这你需要把这控制台打开的时候,再调试模式下这disable catch它才管事,不然的话它不管事啊,大家看啊,现在图片也不能显示了,然后这个CSS也不正常了,然后这个JS也没有了啊,什么都没有了,原来这呢还能有一下拉菜单什么的是吧,现在啥都没有了,那接下来我们带着来来配置一下这个,呃,这个这个反应代理服务器上的静态资源,那第一步呢,肯定是要把这个静态这些资源给它传到我们的反向代理服务器上啊,这最简单的配置方式。
05:21
找到我们这个存储,呃,这个图片这个。这这个位置啊,或者是存储我们这个呃,文件的这个根目录,现在呢,是在这个HTML这个目录下,对吧,那你想象一下,如果把这些目录传上去之后,它能访问吗。它其实是访问不到的,你知道吧,因为现在我们的这个,你看NG的配置文件。我们默认的这个location下呢,直接给它给process pass掉了,没有这个配置这个root目录,所以我们直接去配置它是无效的,我们直接往这root目录下去传,这是不行的,所有访问这个跟路径下的这个资源都会被process pass到另外的这个地址上。
06:04
那接下来我们要怎么办呢?我们就要去配多个location了啊,在这也需要捎带着给大家简单讲一下这个location的配置,后边还会再给大家详细的讲location location的这个规啊,这个location我们要在这再多搞几个出来。啊,首先呢,我们先来搞一个。呃,复制一份出来,在这儿把这些呢注释掉的,咱们先把它给删了啊,这样呢,看起来更清晰一些。我们在这写一个CSS。啊,然后在这呢,就不要让他在propa了,我希望它是访问我本机的这个路径下的一些资源,在这呢,我们就可以给它配置到我们的root HTML下。在这个root的HTML下呢,我们不需要再加额外的这个目录了,这个同学们一定要注意,我们在访问的时候,它会指向这个跟路径,然后顺便加上它的访问的这个uri的地址,然后再去同时去拼接一下,一会儿我会详细给大家讲解这个,呃,Location的这个配置和这个root目录之间的这个联系,以及怎么去让他把路径给它给带进去,带入进去,那配置到这儿的话,其实我们就是配置了一个CSS目录,对不对,那CSS一旦是配置好了之后。
07:26
那么接下来呢,把这个嗯,CSS这个目录啊,给它给传上去啊,在这大家看一下CSS对应到HTML下来看传上去了对吧?HTML下的CSS,然后接下来由于我们已经改了配置,想要让它生效啊,那我们得给他嗯,重新load一下哈。来reload一下,接下来呢,我们访再访问一下这个站点来刷新,诶大家看注意现在CSS已经有了。看见了吧,呃,图片还没有,因为图片我们还没传,然后那老K也没有配对不对。
08:02
啊,这就是我们去呃做的一个最简单的动静分离,这个是由我们的这个,嗯。这个这个这个N几个,呃,来给我们这个返回的这个,嗯。这是由我们的这个NG来给我们返回的这个静态的这个资源,然后这个首页呢,是由我们的这个Tom cat给我们返回的资源啊,然后这是第一个这个呃,配置,那我们接下来再配好另外的几个啊,其实最简单的方式就是把额外的几个给它给复制出来,来看CSS嘛,对吧?啊,然后再来一个有几个目录啊,我们看一下啊。啊,JS和image值啊JS。还有。Me?然后还有CSS,然后我们保存,然后在。Reload。然后我们再刷新再看一下。
09:02
哦,因为我们这个图还没有传是吧,把这个图传上去。把这JS传上去。诶,大家看这个logo图片能显示了,然后这个JS它也好使了,这就是最简单的动静分离的配置哈。
我来说两句