前端Nginx的安装与应用
目录一、前端跨域方式
1.1、CORS(跨域资源共享)
1.2、JSONP(已过时)
1.3、WebSocket
1.4、PostMessage
1.5、Nginx
二、安装
三、应用
四、命令
4.1、根本操作命令
4.2、nginx.conf介绍
4.2.1、location模块
4.2.2、反向代理设置
4.2.3、负载均衡模块
4.2.4、通过反向代理来实现负载均衡
一、前端跨域方式
1.1、CORS(跨域资源共享)
后端服务器可以通过设置特定的HTTP响应头来允许或限制跨域请求。
[*]Access-Control-Allow-Origin：指定允许访问资源的源。
[*]Access-Control-Allow-Methods：指定允许的HTTP方法。
[*]Access-Control-Allow-Headers：指定允许的HTTP请求头。
[*]Access-Control-Allow-Credentials：指定是否允许发送Cookie
1.2、JSONP(已过时)
依靠于<script>标签可以跨域加载资源的特性。由于安全缘故原由，现代浏览器不再保举利用JSONP
1.3、WebSocket
WebSocket协议不遵照同源策略，因此可以用于跨域通讯。但它主要用于实时通讯场景。
1.4、PostMessage
HTML5引入的window.postMessage方法可以安全地实现跨源通讯。它允许来自差别源的页面间发送消息。
1.5、Nginx
设置 Nginx 作为反向代理： 在你的 Nginx 设置文件中，设置一个 server 块来处置惩罚前端应用的请求，并利用 proxy_pass 指令将请求转发到后端服务器。
添加 CORS 相关的响应头： 在 server 块中，利用 add_header 指令添加 CORS 相关的响应头，以允许跨域请求。
二、安装
Nginx：一个HTTP服务器。不仅能将服务器上的静态文件(HTML、图片)通过HTTP协议显现给客户端，还可以通过反向代理来实现负载均衡。
官网：https://nginx.org/en/download.html
可以下载Stable version(稳固版)，此中左边是Linux版,右边是Windows版。
nginx-1.26.2 pgpnginx/Windows-1.26.2 pgp 安装成功后文件夹列表内容如下：
https://i-blog.csdnimg.cn/direct/24aa03582e8d47af8286411af6f0c307.png
启动方法：
(1)、直接双击该目录下的"nginx.exe"，即可启动nginx服务器；
(2)、命令行进入该文件夹，执行start nginx命令，也会直接启动nginx服务器。
输入localhost回车后出现如下页面，体现成功启动：
https://i-blog.csdnimg.cn/direct/c4779e8f023a4c4aa922747fe98ffe90.png
三、应用
在启动前，更换conf里的nginx.conf【本身按照本身公司的后端地点进行设置】，然后前端本地启动项目，将原始端口8080改为nginx.conf里后端地点对应的端口，即可访问到该后端数据，相称于proxy的设置。
原始的proxy内容：
devServer: {
proxy: {
'/api/': {
// target: 'http://10.168.31.xx:8090',//后端001
target: 'http://10.168.31.xx:8090',//后端002
headers: {
Host: 'xx.xx.cn',
Origin: 'http://xx.xx.cn/'
}
},
'/erpimg/': {
target: 'http://10.168.31.xx:xx',
pathRewrite: {
'^/erpimg/': ''
},
headers: {
Host: 'xx.xx.cn',
Origin: 'http://xx.xx.cn/'
}
},
'/watermelon/job/': {
target: 'http://10.168.31.xx:xx'
},
'/watermelon/': {
target: 'http://10.168.31.xx:xx'
},
'/ws/': {
target: 'http://10.168.xx.xx',
headers: {
Host: 'xx.xx.cn',
Origin: 'http://xx.xx.cn/'
},
ws: true
}
},
disableHostCheck: true //新增该配置项
}, 四、命令
4.1、根本操作命令
启动服务：start nginx【Windows版】 nginx【Linux版】
退出服务：nginx -s quit
强制关闭服务：nginx -s stop
重载服务：nginx -s reload（重载服务设置文件，类似于重启，服务不会中断）
验证设置文件：nginx -t
利用设置文件：nginx -c "设置文件路径"
利用资助：nginx -h
4.2、nginx.conf介绍
在项目利用中，利用最多的三个核心功能是静态服务器、反向代理、负载均衡。
文件主要模块如下：
main # 全局配置
events { # 工作模式配置
}
http { # http设置
....
server { # 服务器主机配置（虚拟主机、反向代理等）
....
location { # 路由配置（虚拟目录等）
....
}
location path {
....
}
location otherpath {
....
}
}
server {
listen 28885;
server_name _;
location / {
proxy_pass http://localhost:8080;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
proxy_set_header Host $http_host;
proxy_buffering off;
proxy_read_timeout 10m;
add_header Access-Control-Allow-Origin: *; # 允许所有域进行跨域请求
}
location /api/ {
proxy_set_header REMOTE-HOST $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host xx.xx.cn;
proxy_set_header X-real-ip $remote_addr;
proxy_pass http://10.168.31.xx;
proxy_read_timeout 10m;
client_max_body_size 100m;
}
location /erpimg/ {
proxy_set_header REMOTE-HOST $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-real-ip $remote_addr;
proxy_pass http://192.168.31.xx:4869/;
# proxy_pass https://zz.zz.cn;
proxy_read_timeout 10m;
}
location /ws {
proxy_pass http://10.168.31.xx;
proxy_set_header Host xx.xx.cn;
# proxy_pass https://zz.zz.cn;
proxy_set_header Origin https://xx.xx.cn;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
upstream name { # 负载均衡配置
ip_hash;
server 192.168.1.100:8000;
server 192.168.1.100:8001 down;
server 192.168.1.100:8002 max_fails=3;
server 192.168.1.100:8003 fail_timeout=20s;
server 192.168.1.100:8004 max_fails=3 fail_timeout=20s;
}
} 4.2.1、location模块
location模块主要用于设置路由访问信息。
4.2.2、反向代理设置
通过反向代理代理服务器访问模式，通过proxy_set设置让客户端访问透明化。
4.2.3、负载均衡模块
主要负责负载均衡的设置，通过默认的轮询调度方式来分发请求到后端服务器。
ip_hash：指定请求调度算法，默认是weight权重轮询调度，可以指定
server host:port：分发服务器的列表设置
down：体现该主机停息服务
max_fails：体现失败最大次数，超过失败最大次数停息服务
fail_timeout：体现假如请求受理失败，停息指定的时间之后重新发起请求。
4.2.4、通过反向代理来实现负载均衡
当网站访问量非常大，网站越来越慢，一台服务器已经不够用了。于是将相同的应用部署在多台服务器上，将大量用户的请求分配给多台呆板处置惩罚。
好处：此中一台服务器万一挂了，只要还有其他服务器正常运行，就不会影响用户利用。Nginx可以通过反向代理来实现负载均衡。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]