前端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  pgp

nginx/Windows-1.26.2  pgp

安装成功后文件夹列表内容如下：

   启动方法：
  (1)、直接双击该目录下的"nginx.exe"，即可启动nginx服务器；
  (2)、命令行进入该文件夹，执行start nginx命令，也会直接启动nginx服务器。
  输入localhost回车后出现如下页面，体现成功启动：

三、应用

  在启动前，更换conf里的nginx.conf【本身按照本身公司的后端地点进行设置】，然后前端本地启动项目，将原始端口8080改为nginx.conf里后端地点对应的端口，即可访问到该后端数据，相称于proxy的设置。
原始的proxy内容：

1.   devServer: {
2.     proxy: {
3.       '/api/': {
4.         // target: 'http://10.168.31.xx:8090',//后端001
5.         target: 'http://10.168.31.xx:8090',//后端002
6.         headers: {
7.           Host: 'xx.xx.cn',
8.           Origin: 'http://xx.xx.cn/'
9.         }
10.       },
11.       '/erpimg/': {
12.         target: 'http://10.168.31.xx:xx',
13.         pathRewrite: {
14.           '^/erpimg/': ''
15.         },
16.         headers: {
17.           Host: 'xx.xx.cn',
18.           Origin: 'http://xx.xx.cn/'
19.         }
20.       },
21.       '/watermelon/job/': {
22.         target: 'http://10.168.31.xx:xx'
23.       },
24.       '/watermelon/': {
25.         target: 'http://10.168.31.xx:xx'
26.       },
27.       '/ws/': {
28.         target: 'http://10.168.xx.xx',
29.         headers: {
30.           Host: 'xx.xx.cn',
31.           Origin: 'http://xx.xx.cn/'
32.         },
33.         ws: true
34.       }
35.     },
36.     disableHostCheck: true //  新增该配置项
37.   },

复制代码

四、命令

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介绍

在项目利用中，利用最多的三个核心功能是静态服务器、反向代理、负载均衡。
文件主要模块如下：

1. main                                # 全局配置
2. events {                            # 工作模式配置
3. }
4. http {                              # http设置
5.     ....
6.     server {                        # 服务器主机配置（虚拟主机、反向代理等）
7.         ....
8.         location {                  # 路由配置（虚拟目录等）
9.             ....
10.         }
11.         location path {
12.             ....
13.         }
14.         location otherpath {
15.             ....
16.         }
17.     }
18.     server {
19.         listen 28885;
20.         server_name _;
21.         location / {
22.             proxy_pass http://localhost:8080;
23.             proxy_set_header Upgrade $http_upgrade;
24.             proxy_set_header Connection $connection_upgrade;
25.             proxy_set_header Host $http_host;
26.             proxy_buffering off;
27.             proxy_read_timeout 10m;
28.             add_header Access-Control-Allow-Origin: *; # 允许所有域进行跨域请求
29.         }
30.         location /api/ {
31.             proxy_set_header REMOTE-HOST $host;
32.             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
33.             proxy_set_header Host xx.xx.cn;
34.             proxy_set_header X-real-ip $remote_addr;
35.             proxy_pass http://10.168.31.xx;
36.             proxy_read_timeout 10m;
37.             client_max_body_size 100m;
38.         }
39.         location /erpimg/ {
40.             proxy_set_header REMOTE-HOST $host;
41.             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
42.             proxy_set_header X-real-ip $remote_addr;
43.             proxy_pass http://192.168.31.xx:4869/;
44.             # proxy_pass https://zz.zz.cn;
45.             proxy_read_timeout 10m;
46.         }
47.         location /ws {
48.             proxy_pass http://10.168.31.xx;
49.             proxy_set_header Host xx.xx.cn;
50.             # proxy_pass https://zz.zz.cn;
51.             proxy_set_header Origin https://xx.xx.cn;
52.             proxy_http_version 1.1;
53.             proxy_set_header Upgrade $http_upgrade;
54.             proxy_set_header Connection "upgrade";
55.         }
56.     }
57.     upstream name {                  # 负载均衡配置
58.     ip_hash;                        
59.     server 192.168.1.100:8000;
60.     server 192.168.1.100:8001 down;      
61.     server 192.168.1.100:8002 max_fails=3;
62.     server 192.168.1.100:8003 fail_timeout=20s;
63.     server 192.168.1.100:8004 max_fails=3 fail_timeout=20s;
64.     }
65. }

复制代码

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企服之家，中国第一个企服评测及商务社交产业平台。