nginx部署前后端分离项目(二)

简介: nginx部署前后端分离项目(二)

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第2天,点击查看活动详情


前次实验内容:nginx部署前端页面


前次实验主要是包括location的代理转发,并遗留了两个问题。

  1. 代理失败的问题
  2. 刷新页面之后出现了 404 的问题


这次我们就来一起解决一下吧


代理失败的问题



排查过程


  1. 首先排查一下网络的问题,网络是通的。
  2. 再去查看 nginx 的日志信息,发现请求是发送出去的,只不过结果都是404。


image.png


  1. 再看一下我nginx的配置信息呢?查验之后location中的配置应该是正确的,都没有问题
  2. 查看nginx安装的版本,发现版本有点老了。再去看一下官方文档中是怎么安装 nginx 的,发现我并没有按照官网的安装步骤来,而是直接install nginx了。只能卸载nginx重新安装试一下了。


附上nginx安装的链接:nginx.org/en/linux_pa…

安装完成之后输入ip地址,发现怎么访问不了呢?

image.png


输入nginx -v出现了版本号,应该是安装成功了的。服务器的端口也是开放的,不应该撒。 哦!原来是我nginx没有启动。输入nginx来启动 nginx 应用。nginx是全局命令,直接nginx -s reload也行


sudo /usr/sbin/nginx -t # 检查配置是否正确
sudo /usr/sbin/nginx  # 启动服务
sudo /usr/sbin/nginx -s reload # 重新载入配置


欧克,我们正常的welcome to nginx的页面就出现了

然后我们看一下nginx的目录结构


image.png


首先查看nginx.conf的内容


ubuntu@VM-16-6-ubuntu:/etc/nginx$ grep -v "^\s*#" nginx.conf


他这里引入了conf.d下面的文件内容,我们去查看一下那里面的内容


image.png


我们只要改变default.conf的文件配置就可以拉,它是自动引入到nginx.conf里面的

image.png

欧克,我们再来访问一下我们服务器的80端口,发现代理成功,数据也正常请求回来了,yes~

image.png

请求的代理转发,总算搞定了!!!


刷新之后404问题



现在,我们还有一个问题是刷新之后会出现404的问题。只能通过首页来访问项目,不能直接刷新或者直接访问路径来访问

在传统的web项目当中,每一个页面对应着一个路径,当用户访问/index.html时,服务器会自动返回根目录下面的index.html。当用户访问/about时,服务器会返回根目录下面的about.html。换句话说就是url和文件的映射关系是由服务器来完成的。


但react是spa,只有一个页面,react项目所有的页面都是通过React进行构建和渲染的。当浏览器的地址发生了变化,是不需要服务器介入的,react会自动挂载对应的组件。


当我们将React项目部署到服务器时,如果直接访问根目录,请求会直接发送给index.html。这个页面我们是有的,所以此时不会有任何问题。用户访问页面后,点击页面后的连接切换到不同的组件也没有问题,因为页面并没有真的发生跳转,而是通过react router在内存中完成了模拟跳转。但是,当我们刷新某个路由或直接通过浏览器地址栏访问某个路由时,比如:http://localhost:3000/about,此时请求会发送给服务器,服务器会寻找名为about的资源(此时并没有经过React)。显然找不到这个资源,于是返回404。


解决方法

  1. 使用HashRouter,HashRouter通过hash地址跳转,而服务器不会处理hash地址,这样地址就会交由React处理,路由便可正常跳转。缺点是url地址上总会多出一个#,但不妨碍使用。
  2. 修改服务器映射规则,将所有的请求交给React处理,禁止服务器自动匹配页面。以nginx为例,可以将nginx.conf中的配置信息修改如下


image.png


# 检查配置信息是否正确
nginx -t
# 重新载入配置信息
nginx -s reload

欧克,遗留的问题全部解决完毕!!!


nginx其他用法



反向代理


我们之前做的工作,就是使用反向代理来解决跨域行为


动静分离


nginx的并发能力公式:

worker_processs* worker_connections / 4|2 = nginx最终的并发能力

动态资源需要/4,静态资源需要/2

nginx通过动静分离,来提升nginx的并发能力,更快的给用户响应

动态资源:

image.png


静态资源:


image.png

比如我有一个静态资源的图片


<img src='/images/saoqi.jpg'>

image.png


负载均衡


nginx为我们提供了三种负载均衡的策略:

  • 轮询:将客户端发起的请求,平均的分配给每一台服务器,默认策略
  • 权重:会将客户端的请求,根据服务器的权重不同,分配不同的数量
  • ip_hash:基于发起请求的客户端的ip地址不同,他始终会将请求发送到指定的服务器上。根据ip地址计算出一个结果,根据这个结果找到对应的服务器


总结



  1. 下次安装软件还是不要百度了,先去官网看最新的安装方法,百度出来的可能很多东西都过时或者不适用于自己的版本
  2. 跨域问题是浏览器的行为,只要域名,端口,协议其中任何一个不一样,就会产生跨域。但是通过代理服务器的方式,就解决了跨域问题。开发环境中,我们可以通过proxy正向代理的方法来解决跨域,生产环境下,我们可以通过nginx反向代理来解决跨域问题。有关跨域的解决方案还得好好总结一下!!!


目录
打赏
0
0
1
0
3
分享
相关文章
部署Django应用:使用Gunicorn和Nginx构建高效的生产环境
部署Django应用:使用Gunicorn和Nginx构建高效的生产环境
277 0
nginx部署vue项目
本文介绍了将Vue项目部署到Nginx的步骤,包括构建Vue项目、上传dist文件夹到服务器、安装Nginx、配置Nginx代理静态文件以及重启Nginx,确保了Vue应用可以通过域名或IP地址访问。
235 1
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
1301 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
k8s基础使用--使用k8s部署nginx服务
本文介绍了Kubernetes中核心概念Deployment、Pod与Service的基本原理及应用。Pod作为最小调度单元,用于管理容器及其共享资源;Deployment则负责控制Pod副本数量,确保其符合预期状态;Service通过标签选择器实现Pod服务的负载均衡与暴露。此外,还提供了具体操作步骤,如通过`kubectl`命令创建Deployment和Service,以及如何验证其功能。实验环境包括一台master节点和两台worker节点,均已部署k8s-1.27。
312 1
vue尚品汇商城项目-day07【53.nginx反向代理配置】
vue尚品汇商城项目-day07【53.nginx反向代理配置】
44 4
docker应用部署---nginx部署的配置
这篇文章介绍了如何使用Docker部署Nginx服务器,包括搜索和拉取Nginx镜像、创建容器并设置端口映射和目录映射,以及如何创建一个测试页面并使用外部机器访问Nginx服务器。
快速部署 Nginx 社区版
Nginx是一个高性能的HTTP和反向代理服务器。Nginx在计算巢上提供了社区版服务,您无需自行配置云主机,即可在计算巢上快速部署Nginx服务、实现运维监控,从而方便地基于Nginx搭建您自己的应用。本文介绍使用如何通过计算巢快速部署Nginx社区版。
快速部署 Nginx 社区版
nginx怎么部署php项目,如何php项目部署到nginx
php项目部署到nginx的方法:首先安装“Nginx”和“php-fpm”;然后将项目复制到“nginx/html”文件下;接着修改配置文件;最后重新载入Nginx并启动“php-fpm”即可。
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等