00:00
这节课继续去部署我们的项目,那在第一节课我们已经把服务器准备好了,呃,第二节课呢,就是想办法要把我们本地的这个代码给传到服务器上来,我这里我再开一个终端啊,下面是两个。那我这个终端呢,是呃,在这个本地对吧,那这个终端我让他连上服务器。看一下啊。啊,密码又错了。啊,这个密码就对了啊,清空一下。这个是你看注意黑色的这个就是服务器嘛,这边也显示的这个地址呢,你看艾特三九这个啊,啊头上这个标题也有,那这个就是我本机对吧,这个这个这个带颜色的我本机大家区分开啊,我先进入到。嗯,项目,那我们的项目是在,呃。这个。
01:01
桌面是吧,啊top桌面啊,好像是叫看看哪个吧。这个是吧,这个是我们项目啊啊。来进入到我们的项目里面,诶,因为我是在在录视频,所以我就手动进入一下,如果大家你们自己操作呢,你们直接是呃,打开桌面或者就找到你们的项目手动进入,就是说双击进入到你们这里面,然后。嗯,地址栏中输入CMD直接进到这里面啊就行了,就是不管大家不管你们用什么方式,一定来保证你们的终端或者CMD是在这个目录清楚了吧。啊,PWD一定要保证你的终端是在这个目录。好,那这个就是我们这个项目里面。查看一下你这个项目里面的内容,是我们这个项目对不对来。接着。
02:02
看这个文档,我们看看继续进行下一步啊,上传代码到服务器,就是现在我们要我们服务器也准备好了。啊,然后这是我们本地的代码,我们现在也在想办法把我们的代码给传到这个服务器上,对不对,其实也就是我们的这个这个电脑啊,把这个电脑的文件传给这个电脑,大家想想都有什么办法。啊,所以。办法是比较多的啊,那我们看看都有什么方法啊,可以使用这个,比如说FTP对吧,专门的这个上传工具,以及这个SFTP,或者使用这个SCP都可以get啊都可以,那我们就使用get。好吧。嗯。嗯,Get,先检查一下我们这个本地的版本干不干净啊,啊是干净的,然后看一下我们的这个日志,我们最新的日志是修复了两个问题,一个是修复了登录的,以及修复了一个参数的这些异常的一个问题啊。嗯,我们现在要做的什么呢?就是把代码给传到这个服务器上啊。
03:03
然后有很多种方式,我们选择使用get,我们知道我们之前在使用get push的时候,把我们本地的代码是推送到了远程的一个仓库,对不对啊,那远程的仓库呢,就可以作为一个桥梁,那我们服务器上就可以,服务器上就可以从这个远程仓库去拉取这个代码。清楚了吧,嗯,简单的画一个图,稍微给大家演示一下,这个比较快啊。啊,本机,然后诶。好,那比如这个就是我们的这个本机啊本机啊,那这个就是仓库吧,我就说仓库就是我们的get仓库嘛。这个比就是我们那个服务器对不对啊,那这个就很好理解,你看我们本机的代码,诶push到仓库,然后服务器从这里面去拉取就可以了,对吧?啊。哎,我们之前使用的是这个push嘛,然后服务器那从仓库去拉起代码是不是。就是这个。铺就可以了。啊,那就是这么一个流程,借助于这个远程的这个仓库,作为中间的一个桥梁,来把我们的代码来从本机给。
04:05
搞到服务器上啊。啊,当然你也可以直接使用FTP等等等等,那个就不是特别推荐啊好。G。想要去克隆项目啊,先回到我们的这个服务器啊。嗯,服务器上呢,我们一般把这个项目放到哪里呢?我们现在就是根据你的服你安装的服务器来决定啊,我们安装的是谁安装是NG对不对。NX,那NG它默认的项目的目录是在Y下面的3W下面,所以我们CD进入到这个目录里面,你可以啊LS看一下它已经给你建了一个A目录对不对,但是我们不不不用管它,我们把我们的我们的项目克隆到这个目录里面就可以,哎,所以使用get c lo,所以克隆后面就是哎,我们的项目的地址叉叉叉什么什么点com是吧?啊,但这个地址我们不知道怎么办,你可以去你的远程仓库去看一下你的这个地址。清楚了吧,啊,当然也可以在这个点get里面去看。
05:04
都是可以的。好吧。嗯,那我这里去远程仓库看一下吧,来来,这题第一点看我的工作台。嗯,然后这边好像还是要登录一下,然后我就直接登录一下。然后仓库的话,我就。呃,看看我所有的仓库啊,找到我们这个项目,这个是我们的这个项目仓库。啊,这里有一个克隆下载地址,呃,在克隆下载,克隆和下载的时候这边。呃,让我们可以选择这个地址啊,你如果使用SSH,你就要把你服务器上的公钥啊,就是你服务器上的这个公钥。啊,这里服务器上的公钥添加到你get的仓库,明白了吧?啊,那这里我就不这么麻烦了,还得生成公钥,还得去配置,我就直接使用atps吧,At TPS呢,它有个不好的地方是就得输入你这个东西的啊,你这个get仓库的这个。
06:01
账号和密码。来吧,那我们就就先这么来吧。优色内用户名是啥,我想想密码。好像打错了,打错了三峡。啊,正确,这样代码就克隆下来了,你看速度非常快,根本就没多少时间,然后你看一下这里是不是多了这么一个目录。对吧?啊,我们先不管这个目录,我先再给大家说一下这个地址的问题啊,嗯,你如果是真正的去在运营一个项目,我推荐大家把这个就是服务器上。创建一对公钥和私钥,然后把这个公钥呢,加到这个设置里面啊,加到这个你的这个设置里面。诶,加到这个设置里面。就是这个设置里面。啊之后呢,你就使用这个SSH,就不会再要你的账号和密码认证了啊,就是相当于免密的了,而且还比较安全。那我们这个,嗯。
07:01
视频的话呢,就简单的快速的使用atps吧,Atps吧,它会要求我们输入这个平台的账号和密码啊。好,嗯,CD到shop。里面。嗯,这里面你来看一下啊,这整个代码。和我们本地都是一样的,对吧,那你肯定会说啊,你这边文件这么多,你这边少了一些,之前就给大家说过,有一些文件是不会随着你的版本进行提交的,比如说这个对吧,这个模块你要它干啥呢,那么大。我们完全可以根据这个,呃,package.jason去重新去下载这个文件,对吧,再比如有一些其他的一些本地的一些,呃,这个啊,像这个是编辑器之类的,就编辑器的缓存文件,这这肯定也不进版本库嘛,所以我们最终刻下的克隆下的代码就是比较纯洁的,比较就这样比较干净的。对不对,好,但是没有这玩意儿,咱运行运行不了啊,是不是得先安装这个依赖。那怎么安装这个依赖呢?就是在你的这个项目里面,哎,NTM因子道或者使用这个啊,亚因子道,哎,或者直接使用这个亚,那我们来直接使用亚啊。
08:09
那直接使用这个亚呢,给我们报了这么一个玩意儿一个错误啊,嗯,之前我在装那个样的时候,我就感觉不对劲,因为那时候装完之后,我查看了一下这个亚的版本。0.32太低了啊,它这个明显就说版本过低,所以我们这个样就作废了啊,作废了要把它卸掉,那怎么卸载呢?来看一看啊。在笔记里给给大家写了,我们先把这个给卸掉啊。嗯,然后再把。这个样给卸掉。啊。之后你再去看这个案的话啊,就是没有没有这个东西了,对不对,好,那这时候我们使用什么来安装呢?啊,使用这个NPM来全局安装这个样啊,因为这个apt它这个库里面这个样版本太低了,那我们使用这个NPM去全局安装这个样。
09:02
好吧。它这个安装之后,你看它是这个1.22,这个时候我们再使用这个样convert版本就是对的啊,那这个时候来用这个样in install开始安装我们的赖,或者直接执行这个样啊,我们先看看,如果速度过慢,比较卡的话,我们再对这个样进行换原,如果说不卡的话,能直接完整的拉下来就呃,就不用管了。应该是没有什么大问题,因为我们这个服务器买的是100兆的带宽。速度还是可以的。一定要注意这个样的版本啊,之前我们使用那个APP去安装的那个不好使啊,所以我们就是。嗯,通过这个命令,两个命令把它给卸掉,卸掉之后重新使用这个NPM全局去装啊,之前使用的这个NPPT的这个去安装的话。版本太低了。看一看,先看一看,这会时间先看看笔记,我们下一步该干啥了吧?呃,在安装完成之后,呃,我们再进行打包,把它打包成静态文件啊,之前我们都是这个,呃,使用这个雅NDV就是。
10:02
啊,在这个本地开发的时候啊,属于这个属于使用的一个开发环境,对吧,但是我们真正要部署到这个线上的时候,为了追求更好的性能。我们会把它给打包成静态文件,就是用这个亚Bill的命令,对吧,那关于这些命令呢,呃,都是在那个package杰森里面都可以看到。等了一会儿已经下载完成啊,看一下。没有失误啊,直接一次就成功了,接下来该执行我们的这个打包了来运行。Build把它打包成静态文件,嗯,静态文件其实就是我们早期,呃,刚学,比如说这个tma时候写的就是什么什么点,对吧。就这种念。然后打包成静态文件以后,我们把这个服务器。就是说指向这个静态文件,就是说让这个服务器提供这个静态文件的访问服务就可以了啊,这个项目其实就算部署完成了啊,我们等待打包完成。那在等待时间呢,我再先多讲几句,就是我们使用的这个web服务器呢,是NG。
11:05
哎,所以呢,等会要去改这个服务器的东西,也都是去改的是NG的配置啊。大家如果没有学过没有关系,跟着操作,能把配置给配置好就可以。嗯,然后呃,所有的这个东西呢,其实呃,就是给大家写的比较详细啊。啊,这个就是使用这个NGX解析我们的这个项目。我们去修改这个NGX配置,把打包后的静态资源,就是用这个NX来提供这个web服务,呃,然后使用NGX呢,推荐大家使用这个虚拟主机啊,当然为了简单的演示,我这里就不配虚拟主机了,然后大家看的也比较懵啊,正式项目的话呢,你配置这个虚拟主机,你就可以让你这台电脑就是这台服务器去呃,部署很多的项目。清楚了吧,那我们这里就简单的演示,就就不去使用虚拟主机。啊。
12:00
那既然要编辑这个配置文件,那这里我们使用的是vim编辑工具啊,当然我会给大家说怎么用。好,看一看已经build完了啊,已经这个构建完了,构建完成之后,我们来LS查看一下,你会发现多了一个这个Dis目录,是不是这个就是构建后的一个目录啊,我们LL查看嘛,LL的话就是去竖起来比较好看,多了一个D对不对,你CD到Dis里面,在LL看一下,这个就是我们构建后的。这个项目好像是有点有点多啊,那LS看这么去看。呃,这个我来瞅瞅这是什么东西啊,它东西是然多呀,但是不用管它,我们主要找谁,你看到他没有index点1TL,这是我们的入口文件,其他的像这个什么,呃,这个分片后的什么,这个CS啊,CS等等不用管它,包括这些,嗯,我们主要的就是要它。啊,也就是我们的这个NG服务器,你要把它的入口文件指向到这个,只要指向到这个index里边看H2就可以。
13:07
好,来CD到上一层啊。还是回到我们的项目的目录。接着。呃,就开始去编辑NGX配置文件啊,NG的配置文件呢,是在ETC下面CD到etcn g X在这里面,我们来进来看看啊,L有这么些啊。呃,这里不作为这个主要讲解,我们就直接说怎么配怎么用好吧,如果有兴趣去学的话,可以学一下这个Linux,然后我们也有这个Linux和NX的课程都有啊。他的这个站点呢,是在。在这个目录里面啊,我们来CD到这个system available啊,这里面你会发现有一个defat,这是我们的服务器的这个配置啊,默认的一个配置,我们就直接改这个就可以了啊,不做虚拟主机的一个配置了。来vm default,嗯,因为我是在这个目录,所以我直接编辑它就可以了,如果你是在其他目录,你也可以按照笔记提供的这个去,按照这个绝对路径去编辑这个文件也是可以的,清楚吧。
14:09
进来这个编辑就是进来这个之后。我先把这些蓝色的这个备注这个没用的都删掉啊,要不然太影响大家去观看好吧。来那个删除的话就是,呃,你可以使用这个DD小写的DD,哎,然后。就把他们给删掉就可以了。那我就快点删。来这个这个就留着吧。QP的我们不要删掉。然后下面的都可以不要了啊,我尽可能让这个文件少一点,让大家看起来比较清晰一些啊,然后这样我们来解读的话就比较好看,比如说首先这是一个默认的服务器啊,然后默认的服务器就意味着我们直接访问IP也可以走到这里面,然后监听是八零端口对吧,然后它这个项目的目录是这里,这个我们改掉不要。
15:21
改成我们我们自己的项目的入口啊。好,我们项目的入口是在3W下面的,嗯。不太确定啊,不太确定,有点忘了,那我再开一个,这个一定要配对,就是一个字母都不能错。啊,Root就是我们项目的入口,入口目录。没事,我再连接一个啊,再连接一个。那CD到Y下面3W。嗯,应该是校服岗位的命啊,好。然后CD到D,注意啊,你要进入到这个CD到这个D里面,然后PWD查看目录,这个就是我们的项目的入口目录就配这个东西清楚了吗?就是这里我们要。
16:07
把这个都删了,分号最后的分号也得留着,清楚吧,一定要配到这里。啊,那刚才给大家说了,哎,刚才你们可能听我说,那不是要配到这个Dis的这个。这个这个index.html嘛,我告诉大家不用啊,这个root呢,你就配到这个你的目录,就是说index.htl所在的目录就可以了,那就是我们PWD查看的这个清楚没有啊,那你接着往下看。就是说我们配到这个目录之后,它去检查,如果你的这个目录里面有index index.me2啊index.htm或者说index.n键等等这些它会自动解析的清楚了吧,我们这里面是不是有这个东西,对不对,是不是有。清楚了吗?这块一定要记住,一定配到这个目录啊,配到这个目录就可以了,但是一个字符都不能错,我建议大家手动进入到这个目录以后使用这个PWD,它就会显示当前所在目录,复制就可以了,好。
17:04
这里配置好之后来其他的。Server。我们先不配。就是name呢,就是配置这个域名,就我们这个访问我们这个服的一个域名,我们先不配域名,我先让项目跑起来。好吧。来。注意啊。我们一进来一进来是呃这样的一个命令模式,因为我们使用vim嘛,使用这个按这个小写的I键进入编辑模式,你看底下就变成了隐色的,对不对啊,刚才我们去改这些东西,就要在编辑模式下去改,改完之后呢,你按这个ESC退出这个编辑模式,现在又是在命令模式,命令模式下我们输入这个冒号WQ保存最出。啊,这是为爱慕啊。保存之后使用NDX-T检查一下配置是不是正确,有这个success就正确了。啊,接着NGX-s re的重启,NGX你改了NGX配置,你要重启啊。
18:04
重启完成,好,我们来看一下,我们访问一下我们的这个项目,那复制一下我们这个公网的这个IP在哪呢?在这。返回一下啊,复制一下我们的这个实例的这个IP。哎,公有的IP来打开浏览P一个新的地址,直接访问这个IP,可以看一下我们的项目是不是有了。我来再刷新一下。看一下我们的项目是不是有了,你就看你就看这个东西对不对,是不是我们的项目。而且你看这个react这个图标是不是蓝了。啊,这是生产环境下的react项目的部署。嗯,哎,你们可能该。该笑了,你得瑟啥,你看这你这项目都出不来,你出不来,你看看出啥问题了没有,来看这里是报错了,你的API请求不到对不对,404。API请求不到,为什么是404。
19:00
为什么404,那说明数据没有请求到呗,啊能不能再刷新,他要去拿用户数据,你用户数据请求这个地址,你能拿到用户数据吗?拿不到啊。啊。那大家可能就想了,哎,来我们检查代码。找到。配置代理这里对不对,那你大家可能会说了哦,你代理你配置了你本机的就访问不到怎么怎么样,对吧,对吧?啊,你把它改成这个就行了,我告诉你改成这个也不行,你看人家这里这么明显的一句话,在生产环境下代理是无法生效的。清楚了吧?在生产环境下,代理是无法生效的。理解一下这句话。啊,首先生产环境,我们称为什么生产环境,就是我们刚才build啊,打包之后生成静态文件,然后我们又使用NG服务器去把这个啊,这个NG的服务器指向到我们编译后的build的build后的这个静态文件啊,让这个NGX服务器来提供我们的这个项目的服务。这就是生产环境下的部署,对吧?代码,这里很明显的也告诉你了,生产环境下代理无法生效。
20:03
跟他根本没关系,既然你代理都没有生效了,那么就很明显了,那他请求这个数据,请求这个用户信息,甚至请求所有的API数据,都会直接从这个接口里面开始去请求,对不对,都会直接开始去请求,那怎么办?但是我们我们的数据实际上在哪,我们的数据根本就不在这个IP上面,我们的API是在这个地址上啊,在这个地址上面啊。来大家捋一捋,我先多说几句,你们来捋一捋,呃,我就是要请求这个地址啊,去拿数据,来就是说我就是要请求这个地址,是拿数据,但是我请求这个地址的时候,你得帮我转发到这里去拿数据,对吧,这是代理没问题。啊,但是我们这个代理失效了。我们这个代理失效了。我们还能怎么办?啊,反正我们要的目的就是请求他啊,本来就是说我们看起来是要请求他,实际上请求他啊,请求他转发到他,请求他转发到他,我们现在想一想,是谁在给我们提供web服务,是NG在给我们提供web服务。
21:08
对吧。那么可不可以做到我们请求他的时候,N帮我们去请求这个。服务好,来给大家画个图理解一下啊。呃,浏览器啊浏览器。写上名字啊浏览器啊,啊,这个我就不说这个服务器了啊,我就直接写NG,因为现在我们的这个是NG在提服务器,清楚了吧?啊,就包括我们这个,你看这个转圈这四个蓝点,就我们的页面是不是我们浏览器请求这个。NXNX返回的。明白了吧?啊啊,你不要这个在这儿就说啊,说你这访问的这是IP,访问的是服务器。如果你还在有疑问这个的话,那你真的还要补补基础了,我们这个浏览器里面,我们访问这个地址,它后面是不是会自动是跟上那个八零端口,对吧?也就是我们实际上在访问服务器的八零服务,八零服务是谁提供的,就是N提供的。
22:10
明白了吧,所以能给到给到我们这个页面啊。这是页面的问题,我们拿到了,但是我们的浏览器还想要请求这个地址啊,这个地址。请求这个地址,但实际上这个这个地址并没有这个API数据,而是在其他地址。对吧,那这就好办了。我浏览器请求你NG啊,比如说我就这里简单的举个例子吧啊,我要请求这个AAPI。里面的user啊,但是N。就是说我们这个数据呢,实际上是在其他服务器,比如说是在。嗯,再来一台,再来一台服务器啊,那我们那个API项目肯定得部署一台服务器嘛,这是另外一台服务器啊。嗯,API server server啊,这是API服务器好。嗯,那你。
23:00
请求这个地址对吧,那我们现在这台服务器肯定没有对吧,N键你可以不帮我做个转发来转发给他。好,然后他把数据给这个NGNX再给他是不是也可以。对不对。就这么一个流程,明白啥意思了吧,说白了就是我们这个项目自己带的这个代理失效了。那么我们为什么不能使用这个NG的代理呢?好,大家明白怎么意思就可以了啊来,我们接着看看NG怎么配置,那这里呢,我们在NG下面加加一上这么行配置就可以了,就是。呃,大家看的话也能看懂,就是匹配这个AAPI开头,然后把它代理到某个地址啊,然后这个这行其实写配都可以啊呃,接着呢,要进行一个重写,把这个API来给重写掉,后缀给重写掉。啊,删除这个配置的这个前缀。嗯,这个好像。等会我们看看吧。
24:00
好,我们直接先复制一下啊,来去修改这个NGX的配置vim。ET c g system available default,继续改这个配置啊,然后我们在下面好按I进入插入模式,你看注意你的光标在哪,在这就把回车,我们在这个下面把这个东西给粘上。嗯,然后这个是我们代理的地址是吧,然后把光标你上下左右挪到这个代理的这个地址这里。嗯,也就是呃,匹配到,如果我们请求的是带API的,就给我们转发到这个地址嘛,嗯,那这个肯定不是这个地址啊,肯定是我们。这个正式API的这个地址肯定是他对不对啊。那前面是不是多了这个avs,删了一个。多了一个删一个,诶这个是我们后端访问的接口。嗯。接下来。
25:02
这个不要,这个不要,这个不要啊。啊,你注意看,我们这里也没有重写对不对,那为什么不要呢。呃,因为。我们的API。就是后端的这个API,它就需要这个前缀,嗯,就是我们后端的API呢,它有有有这个前缀的。所以不用删啊,不用删,那这个就是井号注释点,那这个其实也可以不要啊。因为服务端就是说他去访问的话,它是呃,一般不存在这个跨页问题。好,把这个注释掉。啊,我们就留一个简单的,就是进行一个转发就可以了啊。嗯,好,来按这个一。SC,然后冒号把就是WQ保存退出,然后NGX-T。检查一下配置,配置没问题,NG-S露的平滑重启。
26:01
重启之后再来回过头来刷新我们的项目。还是不行,那说明我们的配置出问题了啊,嗯,按照文档这个来说呢,这个文档是没问题的,那问题出在哪呢?我们来对比一下我们的配置看看啊,出哪问题了,来继续编辑啊,我直接按上快速进入这个编辑啊,然后嗯,这边是不是多了一个斜杠。那这个我们把这个箱子给删掉啊,他最后要指向到这个域名就可以了,嗯,那顺便下面这两个也删掉吧,没啥用。啊,保存退出接着NX杠。当T检查一下配置没问题。杠,S relo。NS已经重启了,回过头来再来刷新。诶是不是就可以了,看这个U就不是404找不着了,而是401401就说明没有登录,没有登录给我们重电号登录正常了是不是。
27:02
来输入我们的这个。账号密码进去看一下啊。SUPERIN123123提交。登录成功。好,那这个因为我使用的是线上的API,所以这个用户就比较多啊,包括这个商品数啊,以及这个订单数啊,都比较多一些啊,当然这个功能呢。就是我们讲课只录到了这两个功能啊,大家如果去部署的话呢,是把你们的功能都写完之后,再去尝试进行部署啊,来看这个用户管理。啊,内容还是比较多的,都是大家学习的时候测试的一些数据啊,因为我们这个API是开放的嘛啊。啊,那这个部署就部署完成了,那这小节我们先到这里。
我来说两句