一、Nginx 是什么
Nginx 是一款轻量级的 Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。
结构与扩展:一个主进程和多个工作进程。工作进程是单线程的,且不需要特殊授权即可运行;
支持热加载(因为上面的特性,nginx 不用重启,非常和谐更换工作进程)
master 是主线程负责分配任务给工作进程, worker 是工作进程,可以有多个。
二、Nginx 常用来做什么
- 反向代理
- 负载均衡
- 正向代理
- HTTP 服务器(包含动静分离)
1.反向代理
解释:是代理服务器的一种。服务器根据客户端的请求,从其关联的一组或多组后端服务器(如 Web 服务器)上获取资源,然后再将这些资源返回给客户端,客户端只会得知反向代理的 IP 地址,而不知道在代理服务器后面的服务器簇的存在。
常见解决的问题:因为前端文件所在的服务端口和后端文件所在服务端口不同,导致访问跨域现象。 负载均衡
🌰:第一种:
参数含义解释:
proxy_set_header Host $host; // 获取客户端真实 host
proxy_set_header X-Real-IP $remote_addr; // 设置$remote_addr 获得的客户端真实 ip ,X-Real-IP 值默认为 http 请求最后一跳的 ip(tcp 连接的客户端 ip)
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; // 获得客户端真实 ip
标准格式如下:
X-Forwarded-For: client1, proxy1, proxy2
X-Forwarded-For 头信息可以有多个,中间用逗号分隔,第一项为真实的客户端 ip,其余为曾经经过的代理或负载均衡的 ip 地址。
第二种(这种可以实现更多的功能):
2.负载均衡
解释是分摊到多个操作单元上进行执行,例如 Web 服务器、FTP 服务器、企业关键应用服务器和其它关键任务服务器等,从而共同完成工作任务。
负载均衡配置一般都需要同时配置反向代理,通过反向代理跳转到负载均衡
🌰:
3.正向代理
解释: 客户端向代理发送一个请求并指定目标(原始服务器),然后代理向原始服务器转交请求并将获得的内容返回给客户端。
用处:翻墙, 堡垒机
反向代理和正向代理的区别:
正向代理:只能由客户端发出,客户端知道目标服务器 ip,有代理服务器帮助获取资源
反向代理:向代理服务器获取指定资源,不关心资源从那里来, 代理服务器在其他服务器上面获取资源
4.HTTP 服务器(包含动静分离)
解释: 动静分离是让动态网站里的动态网页根据一定规则把不变的资源和经常变的资源区分开来,动静资源做好了拆分以后,我们就可以根据静态资源的特点将其做缓存操作,这就是网站静态化处理的核心思路。
基本平时打包部署的文件,属于静态资源
目的:静态资源直接访问使用,动态资源进行服务器处理,减少不必要的服务器消耗
🌰:
server {
listen 80;
# 所有静态请求都有nginx处理,存放目录为html
location ~ \.(gif|jpg|jpeg|png|bmp|swf|css|js)$ {
root e:\wwwroot;
}
# 所有动态请求都转发给tomcat处理
location ~ \.(jsp|do)$ {
proxy_pass http://test;
}
}
三、Nginx 配置 location 基础内容
顺序 no优先级:
(location =) > (location 完整路径) > (location ^~ 路径) > (location ,* 正则顺序) > (location 部分起始路径) > (/)
四种类型的匹配规则:
- 完全匹配(=)
- 无正则普通匹配(^
)(^ 表示“非”,表示“正则”)
【最常用】匹配符合以后,停止往下搜索正则,采用这一条。 - 正则表达式匹配(
或者)
~ 开头表示区分大小写的正则匹配;
~ 开头表示不区分大小写的正则匹配 - 普通匹配
注:普通路径匹配和正则路径匹配有很多细节,很容易出错,需要多尝试实践。
root 和 alias 的区别,以及路径中加斜杠的影响
# 访问:http://www.test.com/work-order/
server {
listen 80;
server_name www.test.com;
location ^~ /work-order/ {
root basePath/test/;
index index.html index.htm;
}
location ^~ /work-order/ {
alias basePath/test/;
index index.html index.html
}
# 实际中两个相同的匹配会报错
}
注:nginx在路径中所有 //以 / 处理
root方式: 'basePath/test/' + '/work-order/' +‘/index.html’ = basePath/test//work-order//index.html
alias方式: 'basePath/test/'+‘/index.html’ = basePath/test//index.html
Nginx 解决的一个常见的问题 vue history 模式刷新页面出现空白页面(404)
nginx 解决🌰:
location / {
root /dist;
index index.html index.htm;
error_page 404 /index.html; #和下面一行作用一样
error_page 404 try_files $uri $uri/ /index.html;
# $uri: 请求文件的路径; $uri/: 请求目录的路径
}
访问http://www.test.com/work-order-release/home 会发生404,匹配不到任何资源
404之后逻辑流程:
1.error_page 404 /work-order-release/index.html;
浏览器访问http://www.test.com/work-order-release/index.html
2.匹配到^~ /work-order-release
渲染html/work-order-release/index.html 文件(vue文件)
3.vue根据http://www.test.com/work-order-release/home 路由跳转到 /home 下,正确访问/home路径
关于 404 是否有/的情况
第一种 error_page 404 /开头,正常访问 localhost:8080:work-order ,404 访问 localhost:8080:work-order/home
root
location ^~ /work-order/ {
root basePath/test/;
index index.html index.htm;
error_page 404 /work-order/index.html; // 或下面的方法
error_page 404 try_files $uri $uri/ /index.html; // $uri: 请求文件的路径; $uri/: 请求目录的路径
}
status 200: basePath/test//work-order//index.html
status 404: basePath/test//work-order/index.html /开头代表从basePath后开始替换
location ^~ /work-order/ {
root basePath/test/;
index index.html index.htm;
error_page 404 /wen/index.html;
}
status 200: basePath/test//work-order//index.html
status 404: basePath//wen/index.html /开头代表从basePath后开始替换 注:此时访问的是localhost:8080:wen 匹配不到/work-order了
alias
location ^~ /work-order {
alias basePath/test/work/;
index index.html index.htm;
error_page 404 /work-order/index.html;
}
status 200: basePath/test//work//index.html
status 404: basePath/test//work/index.html /work-order/index.html; /开头代表从basePath后开始替换
location ^~ /work-order {
alias basePath/test/work/;
index index.html index.htm;
error_page 404 /wen/index.html;
}
status 200: basePath/test//work//index.html
status 404: basePath//wen/index.html /开头代表从basePath后开始替换 注:此时访问的是localhost:8080:wen 匹配不到/work-order了
第二中 error_page 404 没有 /开头,访问 localhost:8080:work-order,404 访问 localhost:8080:work-order/home
root
location ^~ /work-order/ {
root basePath/test/;
index index.html index.htm;
error_page 404 work-order/index.html;
}
status 200: basePath/test//work-order//index.html
status 404: basePath/test//work-order/work-order/work-order/work-order/index.html 没有/开头表示相对路径 因为一直404所以/work-order/work-work-order/wen
location ^~ /work-order/ {
root basePath/test/;
index index.html index.htm;
error_page 404 wen/index.html;
}
status 200: basePath/test//work-order//index.html
status 404: basePath/test///work-order/wen/wen/wen/index.html 没有/开头表示相对路径 ,因为一直404所以/wen/wen/wen
alias
location ^~ /work-order {
alias basePath/test/work/;
index index.html index.htm;
error_page 404 work-order/index.html
}
status 200: basePath/test//work//index.html
status 404: basePath/test//work/work-order/work-order/work-order/index.html; 没有/开头表示相对路径,因为一直404所以/work-order/work-work-order/wen
location ^~ /work-order {
alias basePath/test/work/;
index index.html index.htm;
error_page 404 wen/index.html;
}
status 200: basePath/test//work//index.html
status 404: basePath/test//work//wen/wen/wen/wen/index.html /开头代表从basePath后开始替换 因为一直404所以/wen/wen/wen
四、举几个实际🌰子
注:nginx 有很多内置参数
根据 PC 和移动端跳转相应的首页
location ^~ /static/ {
root E:/workspace/test/dist/;
index index.html index.htm;
}
location / {
#默认PC端访问内容
set $flag "pc";
#如果是手机移动端访问内容
if ( $http_user_agent ~* "Mobile") {
set $flag "m";
}
root E:/workspace/test/dist/$flag/;
index index.html index.htm;
}
解决 CORS(跨域请求处理)
server {
listen 80;
server_name localhost;
set $cors_origin "*";
set $cors_cred "true";
set $cors_header "authToken,Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Requested-With,Cookie";
set $cors_method "POST, GET, PUT, OPTIONS, DELETE, PATCH";
add_header Access-Control-Allow-Origin $cors_origin;
add_header Access-Control-Allow-Credentials $cors_cred;
add_header Access-Control-Allow-Headers $cors_header;
add_header Access-Control-Allow-Methods $cors_method;
# 前端代码
location / {
root /dist;
index index.html index.htm;
}
}