一、使用Nginx的服务器访问过程
概念:Nginx是一个负责请求分发的服务,通常部署在一个单独的服务器上,称作Nginx服务器。
浏览器输入地址,进行域名解析,解析出Nginx服务所在的服务器IP地址。
Nginx根据运维工程师配置好的规则,进行请求的转发,将请求分配到不同的服务器(对应不同的IP地址)上,从而减轻服务器处理压力。
【附】
一个服务器上可以起多个服务,多个服务IP相同,端口号不同,每个服务对应一个端口号。
二、部署&上线原理
【假设编译打包&部署,由一个服务完成】
(如果由两个服务完成,则编译打包服务负责npm run build,部署服务负责html的剪切、备份等步骤。除此之外,线上服务器必须具有的线上服务,仅用于去磁盘中部署最新版html的位置读取html文件,并返还给浏览器,完成渲染)
在线上服务器,启一个单独的服务,用于克隆源代码,并执行编译&打包命令(通常为npm run build) ,并备份历史html文件,以便用于回滚。
克隆:通过部署按钮触发ajax异步请求,编译打包服务接收请求,执行git clone命令,克隆源代码。
编译&打包:执行npm run build,生成最终的html文件和静态资源。
静态资源通常被放到自定义的static文件夹下,并整个上传到cdn上,上传完成后,删除static文件夹(可由node代码完成删除操作)。上传逻辑通常由node代码完成。上传cdn的node代码,可手动执行,也可自动化执行(可通过node api监听到npm run build执行状态,在成功编译后,执行cdn上传逻辑)。
【注】node api通常可以访问到终端执行命令的状态。
单页面生成1个html(index.html),多页面生成多个html,假设生成的html默认存放的目录为A,备份html的目录为B,线上服务访问的html目录为C。
生成新的html后,剪切C目录下现有的所有html文件到目录B,并把A文件下新生成的html移动到目录C下。(将html移动到目录C的过程,即是部署服务完成写磁盘的过程,也即部署过程。从而使得线上服务可以在磁盘中读取到最新的html代码)
重启线上服务,至此,上线过程完成。
三、node在前后端完全分离的过程中所起的作用
1.【不使用node中间层】
前端代码更新,需要依赖后端服务部署上线,前端没有自主上线的能力。因此,通常上线过程,需要等待后端当下需求开发完毕,将后端新代码与我们前端的新代码一并上线。
这里注意,线上服务器部署(备份、剪切、写磁盘)过程,不只包括前端新版的的html文件,还包括后端的所有逻辑代码。
2.【使用node中间层】
在node层开启上线所需的2或3个服务(编译打包服务、部署服务、线上服务)。
前端代码更新,编译生成新版html,可使用node的部署服务,将新版html写入磁盘,使得node线上服务可以访问最新版前端代码,无需后端帮忙完成上线过程。从而实现前后端的独立上线。
【注】
这时候,线上服务至少有两个,node层一个,java层一个。
java层还可以进行功能拆分,将不同的功能部署在不同的线上服务上,即可以在java层起多个线上服务,从而实现功能的独立上线,更加轻量、灵活。
另:
可以在node层进行浏览器请求类型的判断,需要读取数据库的请求转发给后端,能够在node层处理的请求,不再向后转发,从而提升请求处理的性能。
四、node自动部署上线过程
点击编译按钮
——>
源代码克隆:编译打包服务接收到异步请求,去指定的仓库位置(发送请求时告诉node的)克隆前端源代码。克隆过程,即是node服务向远程服务请求文件、并进行文件的读取与写入自己磁盘的过程。这里是服务与服务之间的一次通信。
——>
编译&打包:node完成源代码克隆后,进行源码的编译&打包(由node代码完成。项目中通常用的npm run build,实质就是执行了node build.js语句。这里直接在node代码逻辑中,加入build.js的内容即可),并监听编译完成事件。
——>
静态资源的上传:编译完成,将静态资源上传cdn,并在上传后删除编译生成的静态资源文件夹(通常为static)
——>
开始部署:编译打包服务完成静态资源上传cdn过程后,向部署服务发送请求,告知它进行新代码的部署。部署服务接收到请求后,进行剪切、备份、写磁盘操作,完成部署。
——>
线上服务重启:部署服务完成部署任务后,向线上服务发送请求,告知它重启。线上服务重启,上线完成。
【附】
【添加Nginx和node层之后的,用户请求流程(以react单页面为例)】
用户输入url,点回车
——>
浏览器进行域名解析,得到域名对应的Nginx服务器IP和Nginx服务端口号
——>
浏览器向Nginx服务,发送http请求。Nginx根据运维配置的规则,选定一台线上服务器,进行请求的分发
——>
node层接收Nginx发来的请求,返回index.html,不继续向后端转发当前请求。
——>
index.html引用index.js,index.js中引入react-router进行路由匹配规则的设定。根据规则,返回对应的组件,并渲染。
【注】
index.html引入js,通常是通过webpack配置HtmlWebpackPlugin插件,实现js的自动引入。
单页面应用,output配置输出几个js,唯一的index.html就会自动引入几个js。
多页面应用,可使用HtmlWebpackPlugin插件,多次调用进行配置,每次调用、都根据指定模板生成独立的html文件(文件名可使用filename自定义),同时,可以通过chunks字段、自由指定生成的各个html文件,分别引入哪些js文件。
——>
浏览器进行页面的渲染,对于react项目,即是进行组件的渲染。在组件挂载流程的各个生命周期中,如果有异步请求,发送给我们的node服务。
——>
node服务接收请求,进行逻辑判断,确认当前请求自己是否可以处理,如果可以,则返回响应,如果不可以,则将请求转发给后端。
——>
后端接收请求后进行处理,并返回响应给node服务,node服务再返回给浏览器。
——>
页面挂载完成。