部署项目
使用Restful的React项目编码完成后,需要打包和后端代码进行接轨。
- 在
package.json
设置代理proxy,将ip:端口号
与后端代码服务器匹配。 - react项目
npm run build
以打包项目。 - 将生成的build文件夹部署到Nginx服务器上进行反向代理。
- 后端代码部署到tomcat上。
- 如果这台主机是云服务器的话,莫忘了配置域名,同时要在ECS实例控制台中开放端口。
听我细细道来
设置代理(现在假设你通过本地ide启动项目)
因为我们开发React项目的时候,是在本地Node上启动运行的,使用的是localhost,当部署到服务器上的时候,我们不能用localhost,所以这也是我们在请求接口的位置写的是相对路径/……
。
设置完代理之后,Nginx会自动将本来的localhost替换成服务器ip,但是这个ip是隐藏的,不信你可以去chrome控制台里network中查看请求链接,显示的是“localhost”,但实际上浏览器已经利用proxy的代理向后端服务器访问了。
代理:比如说我们想浏览YouTube,我们设置了一个代理服务器,当配置好之后,
我们在主机上请求访问YouTub=>VPS墙外服务器受理访问=>将墙外服务器返回的信息返回到本地主机上
这里VPS其实就相当于一个访问墙外网络的媒介。
Nginx在这里是干嘛呢
两个主要功能:
- 反向代理(隐藏服务器端情况下,设置代理)
正向代理隐藏真实客户端,反向代理隐藏真实服务端
- 负载均衡(如果有多台服务器,可以防止)
后面不是一台服务器,不可能一个功能给每个服务器分配不同地址,需要代理服务器对请求进行调配.
代理服务器作用一个是统一请求方式,另一个是防止一个服务器满负荷,另一个服务器没请求的情况
为什么负载均衡?后面要开多个服务器?
这个服务器不是物理主机,而是像tomcat这种.在一个固定的主机上,每个进程的线程数是有上限的,如果内存和带宽都没问题的话,主要瓶颈就在于线程数。
分享项目
上传到GitHub
如果你像我一样使用的Webstrom,并且已经配置好了github和创建存储库,你可以在菜单栏中找到VCS->Git->Push
,将项目上传。
如果你观察的仔细的话,你会发现node_modules
文件夹并没有上传到github中,这是因为这个文件夹下的内容实在是太大了,但是如果想运行又必须依赖这些库,所以package.json
的作用就体现出来了。
你打开package.json
文件,发现dependencies
属性下都是你依赖的库,
安装依赖库