00:00
前面呢,我们通过暴露我们的服务网关,屏蔽了相当于我们后台集群的其他位服务。而我们也测试通过了,我们使用前端项目指点网关,然后呢,接下来所有的请求网关都会带给其他微服务,也都测试通过,那接下来呢,我们就把这个前端应用我们也来上云。而前端应用呢,我们使用流水线来进行上云啊,这个流水线啊,其实我们以前都已经写过一个复杂的后台应用的流水线了,所以呢,照着这个流水线稍微改一下,我们前端的流水线就出来了,前端流水线呢,我这在这儿已经写了,给大家看一下我们的流水线的过程。前端的流水线,因为前端应用呢,一般要用到nude g,所以我们选择库菲尔整合的node GS的这个金克代理,这一块呢,就固定写法,然后呢,我们的第一步当然是拉取前端代码,我们把前端呢,我们这个din项目的代码呢,让这一拉,这是din项目的地址,然我目前呢是放在私库,所以拉的时候呢,还有账号密码,其实跟我们以前的配置都一样,我是直接把以前的复制过来的,因为我们账号密码呢以前配过。
01:07
然后呢,接下来是项目编译,我们前端项目呢,先使用n PM install,相当于安装这个项目的依赖,那相当于我们来模拟整个流水线,我们线上呢,金克S先第一步把这一堆代码拉过来,第二步呢,帮你运行这个命令,运行这个命令呢,相当前端的这些依赖就有了,然后呢,我们再可以让他n PM run build。我们的这个项目呢,只要一运行这个构建,就会产生一个这个东西给大家看一下。这是我们前端项目的特点,N PM run build。我们Java,我们Java项目呢,一构建会产生炸包,而前端项目呢,又不是炸包,但是它会产生HTML这些文件,稍等一下。看他在这构建。等于这。稍等一阵呢,我们前端项目构建完了,构建完以后呢,我们会发现这呢,会多一个DT这个文件。
02:04
文件夹,这个文件夹里边呢,都是一些HTMMR和静态资源,比如一些GS,所以前端啊,只要一构建完,我们把这个文件夹下边的内容放给任何一个HTP服务器,比如NX,因为它是页面嘛,所以呢,我们把它交给N就行了,所以我们前端的流水线呢,是这样子的。第一步我们先把代码拉起来,第二步安装依赖,安装完依赖以后呢,我们让它构建NPM装build,构建完以后呢,会产生这个DST文件夹,然后呢,第三步我让它呢构建前端的这个镜像,而前端镜像的构建呢还是一样,大家会看到我使用doer build-T构建前端的最新镜像,而我使用呢是前端项目里边自带的这个docker fair,而这个docker fair呢也可以看一下。非常简单,因为我们说前端只需要把dist下边的页面所有的这个内容交给N就行,所以呢,我们这个镜像的基础镜像是N,然后呢,把DST这个目录,如果它是目录呢,它会自动把这个目录下的所有内容复制到我们user share n HTML下边。
03:13
所以呢,这样的话呢,我们这个下边就会有我们前端的这些页面,这样NG呢,并且N暴露的是八零端口,这样NG1启动,我们相当于把这个页面呢就加载起来了,所以前端的这个刀客费尔非常简单,我们利用这个刀客费尔呢,打包一个前端的这个镜像,打包完以后呢,镜像当然也要推送到我们阿里云的镜像仓库,推送完以后呢,再来进行部署,而这一块的整个部署啊,我们以前写过,所以直接都是复制过来看一下。跟我们以前的东西呢一模一样,只不过我们要部署的项目名各自呢是各自的项目名,什么?呃,医院挂号的命啦,包括我们要部署到his名称空间,只不过呢,部署的时候用的镜像,每一个人呢,用自己的镜像从阿里云进行下载。然后呢,我们部署的时候,只不过这一块变一下啊,前端的容器端口不是八零,八零是八零,所以这块呢,他可能写错了,写一个八零,然后呢,剩下我们的service也一样,前端容器的端口呢是八零,那service呢,假设我也让他暴露。
04:16
八零。那这样的话呢,我们前端一部署好,也会给他产生这个负载均衡网络啊,然后我们这一块改好以后呢,来给让GET1提交get and。填上,然后呢,Get status给大家看一下现在的get这些文件,好都已经修改了,然后我来推送上去给部署。我们前端的所有的这个东西呢,我已经推送过去了啊,来看一下这个deploy文件,Deploy文件好,我们这个先commit再复是啊忘了commit-M,我们这个呢,相当于修改部分内容。我们把这次的这个,呃,修改呢,我们先提交了,提交了以后呢,我再来推送一下。
05:06
把我们的所有的这个改变我们都推送上去啊。那么都推送上去以后呢,接下来我现在给大家看一下我的这个控制台前端的这段代码。流水线文件刀ER费文件,我们其实都是写好的啊,然后呢,那我们接下来要让前端整个流水线部署就非常简单了,但在部署之前呢,要做一件事。就是每一个前端应用得修改它生产环境,比如我们这生产环境,生产环境呢,联想哪个服务器地址。那我们自然联想我们的整个网关,所以呢,在这儿呢,只需要改一下我们生产环境网关的地址就行了。OK,这块修改了以后呢,同样的。给他,给他。杠M。然后呢,我们这个生产。环境的,咱们这个网关地址我们配好了,配好了以后呢,接下来我们来推送上去。
06:09
好,生产环境的这个配置呢,我也推送上去了,来确定一下我们的这个代码里边。生产环境网关地址好没问题,然后呢,只要我们有了前端的这个代码仓库,这个代码仓库呢,我们已经写好了金克斯费doer费,那这种情况下我们流水线就更好做了,来到David维奥S工程。His davids,这是我们后台管理系统的流水线,再来创建一个前端的流水线,前端呢我来写这个,比如就叫医院挂号的dmin项目的流水线,而这个流水线呢,我接下来还可以这么做,直接呢在这选择一个代码仓库,这个代码仓库呢,我们自然是getate getate呢,我们选择使用马云的这个凭证,我们自己呢让他去来下载。前端代码的。东西啊。我在这儿一粘。一粘以后呢,我写一个对号,然后呢,让他自己下载,自己下载来以后呢,接下来在这一块呢,还有这个设置,这个设置呢,有一个叫。
07:08
脚本路径金克就是呢,你如果在你的这个项目里边有一个金克fair,我的库整合的金克,可以按照你的金克fair来创建流水线,所以呢,我们看我们的这个金斯费名叫金克斯费,一定呢跟你项目里边的这个文件名一样就行。啊,也就是说我的这个项目啊,你代码拉取来会有这么一个文件,把这些空格呢,也是删了,有一这么一个文件,这个文件呢,接下来就就是我们的这个精子费文件,然后呢,我点击创建。那接下来大家看效果。我们的前端项目,我相当准备了一个流水线,但是这个流水线呢,等一下吧,等一下它才能出来啊。我们重新进来,来到这儿。来到我们的戴维奥S工程,在这儿,那前端项目的流水线,等一下让他出来。
08:03
这个怎么我们这个一直没出来,没出来是不是我们创建错了,我们再来创建一次啊。我们的前端项目叫医院挂号的命。这个流水线呢,我们来创建一次,然后呢,我们来选择一个代码仓库,让他自己呢,去把我们这个代码拉下来,并且拉master分支就行。来到我们的。代码仓库,我们要使用马云的账号密码来拉对号,点击下一步。让他呢,自己在这好,这没问题啊,这是我们的金费好,然后呢,保留分支,要不要保留这负一呢,就是永远都要保留。我们使用呢金fair。然后呢,啊,剩下这一块呢,都不用动,然后这儿还有一个这个。推荐呢,大家把这个地址啊,提前复制来,这叫web hook地址,我们一会儿来说webook这个事情。我这个地址呢,随便先保存在一个位置。
09:02
这一块呢,我来点击创建吧。前端项目的这个有了啊,有了这个前端项目的流水线啊,这个流水线呢,大家得等一下。就是呢,它会自动的拉取代码,诶一拉以后呢,我们会发现它这个队列中这个流水线到底长啥样,他自己呢,会分析你的金费。得到我们的整个流水线,所以我们只要有一个项目有这个精备就行,来稍等一下,因为第一次呢使用node GS来进行构建,要下载NOEGS啊这些构建镜像,所以比较慢一点,咱就等一这。等了一阵以后呢,我们这一块流水线开始初始化了,第一次构建根据大家的网速,可能要等十分钟左右不等。好,我们来看一下,第一步拉取代码成功,第二步呢,项目编译我们n PM install好开始运行。当项目编译成功以后,是不是就进入了打包镜像的流程,稍等一下。
10:03
前端项目呢,还是稍微比较快一点。等于这。那等于这以后呢,我们看到这个项目呢,编译是成功的。编译成功以后呢,我最后还运行了LS命令,我们这个DST文件也有,接下来是构建镜像。只不过这个构建镜像呢,说不能访问到我们的这个里边啊,原因呢,是我们在这一块,我们来看一下我们的金克斯菲尔的写法。金斯费尔写法呢说。我们接下来呢,要构建镜像的话,会用到呃,医院挂号,我的命下面这个东西,而实际上呢,我们以前LS给大家会看过这个项目呀,它呢直接相当于没有这个最大的跟文件夹,跟文件夹里边的内容才是我们的有这个刀客费啦deploy,所以呢,每一个呀,我们在这来改一下。
11:05
前端项目就是以前的金费文件来改成我们能用的就是这个。就不用看了。LS列举当前目录就行了,然后呢,我们当前目录下的do file,因为我们这个代码一拉拉的,相当于是这个目录下边的这些东西,所以呢,我们直接doer fair就在当前目录下,然后呢,并且点杠就以当前目录下,就把当前目录下的内容传进去,让他来进行打包就行了。然后呢,这块有了以后呢,接下来还有一个这是构建镜像,构建镜像呢,完了以后,接下来就是推送镜像,推送镜像呢,这正常将来就是部署部署一样,部署呢只看deploy这个目录就行了,不用加我们上边的整个文件夹层级。好,这一块结束了以后呢。我把我们的流水线的修改拿过来。
12:04
And。嗯,Get commit。杠M。修改了这个金斯fair。然后我们来重新布上去。好,这个呢,布置上去以后呢,我们相当于这个金就改了,改了以后我们让它重新运行一下流水线。那这个流水线的重新运行呢,它就会自动的再拉取代码,按照我们新的这个金来进行构建,就来稍等一下就行了。我们已经点了运行来看它有没有启动第二次任务啊,已经启动了啊。启动呢,我们这个,而且呢,它能感知到我们两次提交呢,是有变化的,所以它会用我们最新的健稍等一下。啊,现在呢,流水线开始初始化。
13:02
来看它的整个步骤。拉取代码这一块呢,瞬间就完了,接下来是项目编译。原因呢,还是我们前面的这些步骤NPM什么style啊之类的。等一下就行。另外呢,补充一下,我们在项目编译期间,这个过程呢,比较慢downloading,而且有可能还是会执行失败,就下载这个no size之类的。这个呢?我们有解决方案。大家看一下。就是这个note这个安装经常去gethab,有时下载不到,大家呢就使用我们这个叫NP mi。相当于呢,我们先。让他呢,去我们淘宝的镜像安装window。Not,所以呢,加来金in fair里边我们在NPM。之前。
14:01
然后呢,可以让他去淘宝呢,安装一下这个,我们把这个命令呢,写到他前边。It an。Come。来说一下我们优化了,这个优化我们相当于no。SS下载。重新PUSH1下下一次。下次我们这个流水线呢,就快了啊,你先看这一次。或者呢,我就直接把这次中断了,不等了。然后呢,我们来直接运行我们新的流水线,确定一下我们新的流水线的in fair点开,然后呢,是有这个note s好。嗯,那我们接下来呢,运行新的流水线,在我们的谷这里边。流水线呢,我们直接在这。这是我们的这个活动,直接让它运行。从master分支呢,给我们拉新的代码。开始新的流水线。来,稍等。
15:02
流水线呢?在初始化过程中拉代码,项目编译。看一下现在的这个项目。先给我们下弄个啥子。这个从淘宝下呢,应该是非踌的。行了,我们不看了,就等一等吧。那等了几分钟呢?我们项目编译完了,接下来走到构建镜像这一步。此时呢,构建镜像就应该是对的,我们就等它构建吧。稍等了一阵以后呢,我们来看一下。构建镜像呢是成功的,叫医院挂号,Dmin已经有了,但是在推送镜像的时候呢。给我们报了这个四百一场,说我们这个container is not。就是说这我们这个麦有问题。这,这哪跟memory有关系啊,我们来看一下我们的这个金斯。Fair。我们的这个前端的这个金fair流水线。
16:03
我们这都用的是node GS镜像啊,这子突然冒出来一个me镜像,好,我们把这个呢改掉,改掉以后呢,重新修改一下给它。给他扛。都叫优化。图。好,那我们接下来呢,再把流水线重新运行。回到我们这个流水线。活动这来直接让它运行。自己呢,去来扫master分支。按照master分支我们的金fair给我们来构建流水线。就来等一下。流水线呢,开始初始化。第一步,拉取代码。第二步呢,项目编译。等于这呢,我们这个项目也编译成功了,镜像呢也构建了,而且呢也推送成功了。
17:04
将来呢,它正好运行到部署到DV环境。因为我们写自己写了docker fair,所以他会按照我们自己写的啊,这个docker fair部署啊cooper fair啊,并且呢,部署完了会发送邮件,我看一下我们的网易能不能收到和部署邮件看。外,这个我们的医院挂号的命已经构建成功了,它是第四次构建。同时呢,我们来看我们的这块工作台里边,我们上移通项目里边。那我们的部署里边就会有医院的这个命,诶他呢就部署成功了,这个部署成功,我们来访问一下呗,所以呢,为了这个访问方便,我也可以先先来做一件事啊。就是只是为了方便我来把它呢编辑外网访问。这个呢是32248,所以我们访问集群任何一个人的32248。
18:00
这就是我们的前端项目,哎,我们预约挂号呢,这个后台已经进来了。后来进来呢,我们的所有数据都应该是,诶,从我们的这个网关里面查出来的真正数据。医院列表,我们给芒果DB里面一导数据以后呢,也就有了,包括协和医院,还有一些排班信息,我们在这呢也能看到查询。哎,协和医院的排班。比如说我们来选一个,对这些排班信息那就都有了,那我们知道这个din的后台管理系统就部署好了。
我来说两句