开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第2天,点击查看活动详情
前次实验内容:nginx部署前端页面
前次实验主要是包括location
的代理转发,并遗留了两个问题。
- 代理失败的问题
- 刷新页面之后出现了 404 的问题
这次我们就来一起解决一下吧
代理失败的问题
排查过程
- 首先排查一下网络的问题,网络是通的。
- 再去查看 nginx 的日志信息,发现请求是发送出去的,只不过结果都是404。
- 再看一下我nginx的配置信息呢?查验之后
location
中的配置应该是正确的,都没有问题 - 查看nginx安装的版本,发现版本有点老了。再去看一下官方文档中是怎么安装 nginx 的,发现我并没有按照官网的安装步骤来,而是直接install nginx了。只能卸载nginx重新安装试一下了。
附上nginx安装的链接:nginx.org/en/linux_pa…
安装完成之后输入ip地址,发现怎么访问不了呢?
输入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的目录结构
首先查看nginx.conf
的内容
ubuntu@VM-16-6-ubuntu:/etc/nginx$ grep -v "^\s*#" nginx.conf
他这里引入了conf.d
下面的文件内容,我们去查看一下那里面的内容
我们只要改变default.conf
的文件配置就可以拉,它是自动引入到nginx.conf
里面的
欧克,我们再来访问一下我们服务器的80
端口,发现代理成功,数据也正常请求回来了,yes~
请求的代理转发,总算搞定了!!!
刷新之后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。
解决方法
- 使用HashRouter,HashRouter通过hash地址跳转,而服务器不会处理hash地址,这样地址就会交由React处理,路由便可正常跳转。缺点是url地址上总会多出一个#,但不妨碍使用。
- 修改服务器映射规则,将所有的请求交给React处理,禁止服务器自动匹配页面。以nginx为例,可以将
nginx.conf
中的配置信息修改如下
# 检查配置信息是否正确 nginx -t # 重新载入配置信息 nginx -s reload
欧克,遗留的问题全部解决完毕!!!
nginx其他用法
反向代理
我们之前做的工作,就是使用反向代理来解决跨域行为
动静分离
nginx的并发能力公式:
worker_processs* worker_connections / 4|2 = nginx最终的并发能力
动态资源需要/4,静态资源需要/2
nginx通过动静分离,来提升nginx的并发能力,更快的给用户响应
动态资源:
静态资源:
比如我有一个静态资源的图片
<img src='/images/saoqi.jpg'>
负载均衡
nginx为我们提供了三种负载均衡的策略:
- 轮询:将客户端发起的请求,平均的分配给每一台服务器,默认策略
- 权重:会将客户端的请求,根据服务器的权重不同,分配不同的数量
- ip_hash:基于发起请求的客户端的ip地址不同,他始终会将请求发送到指定的服务器上。根据ip地址计算出一个结果,根据这个结果找到对应的服务器
总结
- 下次安装软件还是不要百度了,先去官网看最新的安装方法,百度出来的可能很多东西都过时或者不适用于自己的版本
- 跨域问题是浏览器的行为,只要域名,端口,协议其中任何一个不一样,就会产生跨域。但是通过代理服务器的方式,就解决了跨域问题。开发环境中,我们可以通过
proxy
正向代理的方法来解决跨域,生产环境下,我们可以通过nginx
反向代理来解决跨域问题。有关跨域的解决方案还得好好总结一下!!!