第一次做完React项目后你可能需要了解的。

部署项目

使用Restful的React项目编码完成后,需要打包和后端代码进行接轨。

  1. package.json设置代理proxy,将ip:端口号与后端代码服务器匹配。
  2. react项目npm run build以打包项目。
  3. 将生成的build文件夹部署到Nginx服务器上进行反向代理。
  4. 后端代码部署到tomcat上。
  5. 如果这台主机是云服务器的话,莫忘了配置域名,同时要在ECS实例控制台中开放端口。

听我细细道来

设置代理(现在假设你通过本地ide启动项目)

  因为我们开发React项目的时候,是在本地Node上启动运行的,使用的是localhost,当部署到服务器上的时候,我们不能用localhost,所以这也是我们在请求接口的位置写的是相对路径/……
  设置完代理之后,Nginx会自动将本来的localhost替换成服务器ip,但是这个ip是隐藏的,不信你可以去chrome控制台里network中查看请求链接,显示的是“localhost”,但实际上浏览器已经利用proxy的代理向后端服务器访问了。

代理:比如说我们想浏览YouTube,我们设置了一个代理服务器,当配置好之后,
我们在主机上请求访问YouTub=>VPS墙外服务器受理访问=>将墙外服务器返回的信息返回到本地主机上
这里VPS其实就相当于一个访问墙外网络的媒介。

Nginx在这里是干嘛呢

两个主要功能:

  1. 反向代理(隐藏服务器端情况下,设置代理)

正向代理隐藏真实客户端,反向代理隐藏真实服务端

  1. 负载均衡(如果有多台服务器,可以防止)

后面不是一台服务器,不可能一个功能给每个服务器分配不同地址,需要代理服务器对请求进行调配.
代理服务器作用一个是统一请求方式,另一个是防止一个服务器满负荷,另一个服务器没请求的情况

为什么负载均衡?后面要开多个服务器?

  这个服务器不是物理主机,而是像tomcat这种.在一个固定的主机上,每个进程的线程数是有上限的,如果内存和带宽都没问题的话,主要瓶颈就在于线程数。

分享项目

上传到GitHub

  如果你像我一样使用的Webstrom,并且已经配置好了github和创建存储库,你可以在菜单栏中找到VCS->Git->Push,将项目上传。
  如果你观察的仔细的话,你会发现node_modules文件夹并没有上传到github中,这是因为这个文件夹下的内容实在是太大了,但是如果想运行又必须依赖这些库,所以package.json的作用就体现出来了。
  你打开package.json文件,发现dependencies属性下都是你依赖的库,

安装依赖库

  当别人下载你的项目后,通过Node下npm install就能根据这个属性一键将所需要的所有库下载到本地,然后就能正常运行了。


如果有不正确的地方,还请大家指正,感谢阅读,感谢留赞

发布了122 篇原创文章 · 获赞 25 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/HuoYiHengYuan/article/details/104466523