00:00
好,各位,这小节呢,给大家讲解一下,一个react项目我们写完了,那最终把功能点都实现了,如何把我写的react应用真正的部署到服务器上去运行呢?我们需要做一步工作,就是打包我们所写的react项目。其实所谓打包的意思呀,就是把你所写的react里边的那些语法啊,那些指令啊,都变成最纯粹的GS代码,让浏览器去认识啊,那我们必须得经过一个环节,就是打包,打包的命令呢,在这儿呢,叫做build。我们平时开发的时候呀,每天执行的呢,都是这个start,哎,N PM start开启,开启你执行这个命令之后啊,它能为你开启一台内置的服务器,然后呢,去翻译你所写的东西给你放到页面,哎,那我们看一下咱之前不是一直这么做的吗?N PM start对吧,等会儿。
01:02
它就开始呢,开启一个页面,帮你临时开启一个div server,哎,端口号呢在3000,然后你稍等,它正在编译,编译你这些东西啊,现在这个过程其实就是webpa在帮你编译东西呢,啊,东西能用是吧,但是上线了可不是这么用,你没觉得这开发者工具的颜色它都不对吗?那是因为啊,你现在这种运行属于开发模式下运行,那么你想最终部署就要打包生成静态文件,那怎么打包呢?首先第一步要停掉你的开发者服务器,随后呢,你去执行这个命令,N PM around执行谁呢,叫做build,哎,输入build走。那这个过程的快慢呢,就取决于你电脑的配置,以及你这个应用复不复杂,你这个应用如果里边用了特别多的第三方库,很复杂,这个过程肯定是特别缓慢的啊OK,它执行完了,执行完之后啊,同学你注意看,生成了一个文件夹,叫做build。
02:08
你打开这个build去看,同学,这个里边的东西都是最纯粹的atml,还有JS啊,那我这里边儿没有写样式,所以说就没有样式这个文件夹让你看到了啊说老师那这东西怎么运行啊,我好像知道这不有个index.atml吗?啊,你看文件还压缩了是吧?老师我右键打开不就能看了吗?诶,可不是这意思。打包生成之后的文件可不是让你右键直接查看的,你早期的时候学习页面的布局啊,样式啊,你可以临时写一个右键就打开,但是现在可不行啊,现在这些东西呢,需要部署在一台服务器上去运行,那么你接下来就有两个选择,一咋的,你自己亲手用note JS,或者是用Java啊,或者用些其他语言,你搭一台服务器把它放上去去测试,那这种方式呢,肯定得编码很麻烦,而且很多时候我们前端程序员好像也不是那么的熟悉服务器的语法是吧,随便就能编写出来一个服务器,其实啊,同学,如果你用node里的这个人呢,叫做express,其实也不难啊,但是我们说另外一种办法就是借助一个库,这个库呢叫做server,注意不叫server,我知道server叫服务器,但是这个库叫server,这个库是干嘛的呢?
03:32
这个库啊,能让你以指定文件夹快速的开启一台服务器。就是把某一个文件夹作为服务器的根目录,直接帮你开启一台服务器啊,你就比如说同学,我给大家举一个例子啊,右键我新建一个文件啊,比如说叫做test,同学,这是一个普普通通的文件夹,对不对?哎,Open with Vs code,我在里边呢,右键新建一个主页面,就叫index.html,里边写点固定的结构,我写个H1叫hello,哎,好,写完了吧,你想看这个页面是不是可以右键打开去看呀?
04:14
完全可以,同学这就是属于什么呢?就是最简单的一种查看方式,但是很多的时候那些静态资源并不是说像你想的那样,右键一打开就直接能看,里边涉及到一些路径的引入啊等等一些啊,那怎么弄呢?我们可以这样做,同学,第二个办法就是你要全局安装,我刚才说那个库NP mi serve,空格杠G全局安装。我呢已经全局安装过了啊,在座的各位呢,肯定没安装过,那你可以安装一下来,我们把这删掉啊,然后安装完了怎么办呢?同学,你目前所处的文件夹是不是在test这个文件夹呀。如果你想以这个文件夹作为根目录,那当然这个点Vs code的吧,是Vs code的生成的一个配置文件啊,你也可以给它删掉啊,如果你想以当前这个test文件夹作为主目录去启动一台服务器,你就可以在这直接写serve,不用写别的了,就是serve回车,这个时候你看很快速的就开启了一台服务器,端口在几千5000,你点击同学这个你看文件是不是也可以看呀,但是这个文件呀,和你刚才看呢是有一定区别的,你现在就是属于实实在在部署到了一台服务器上,端口号在5000是吧?哎,给它关掉,那你想要停下来就CTRLC。
05:36
啊,那如果说里边我还有一个文件夹叫做A,哎,A里边也有一个index.atml但这里面写的是hello,然后逗号写的A是吧?老师,我想以这个A文件夹作为服务器的根目录启动一台服务器,那你就得这么写SERVE5空格A啊,或者是当前目录下的A都行,一般我们就写一个A啥意思?在T的这个文件夹里边的A文件夹想作为服务器的根目录,快速启动一台服务器走。
06:06
稍等你再打开它里边就是hello a,明白了吧?哎,所以说同学,服务器也不用我们非得自己去搭建,我就是写完的东西想部署一下运行,我还得自己写服务器,这么麻烦吗?是吧?回到我们刚才的代码里边,那同学在这儿,人家教你了,是不是得写serve-s build呀,其实这个杠S呢,我们也是完全可以省略的啊,来吧同学,我想把build的文件夹作为服务器的跟路径去启动一台服务器,那你需要做的就是serve空格,谁呢?Build回车,一台服务器瞬间开起来了,点击5000同学,这个时候你发现啊,东西肯定也是能用的,而且您注意了这个react图标是不是变正常了呀?那是因为你现在运行这个属于什么?不是生开发环境了,这回可是生产环境了,就是项目上线了去运行,哎,它就变成正常颜色了,咱之前说过同学。
07:06
那个什么来着,美团是不是拿react写的呀,那我们打开它啊,咱们去看一眼,诶关掉,你看这是不是也是正常的这个颜色呀,那你看我们这儿呢,是不是也是正常的颜色,哎,这就可以了啊,就跟大家说了一下,如何打包一个项目让他真正的上线去运行啊,其实就是借助了一个命令叫做build,而到了工作岗位上呢,其实项目要真正上线不能借助这个东西,一定是把你的build交给后端人员配置到服务器里边才可以啊,那这小节呢,我们停一下。
我来说两句