nginx代理前端或请求时会有后端返回导致有些页面加载不出来

Web

1.负载均衡

当一个应用单位时间内访问量激增，服务器的带宽及性能受到影响，
影响大到自身承受能力时，服务器就会宕机奔溃，为了防止这种现象发生，
以及实现更好的用户体验，我们可以通过配置Nginx负载均衡的方式来分担服务器压力

负载均衡器

1.1 负载均衡的几种常用方式

• 轮询（默认）

// nginx.config
upstream backserver {
  server 192.168.0.1;
  server 192.168.0.2;
}

• 权重weight

指定不同ip的权重，权重与访问比成正相关，权重越高，访问越大，适用于不同性能的机器

// nginx.config
upstream backserver {
  server 192.168.0.1 weight=2;
  server 192.168.0.2 weight=8;
}

• 响应时间来分配

公平竞争，谁相应快，谁处理，不过这种方式需要依赖到第三方插件nginx-upstream-fair，需要先安装

// nginx.config
upstream backserver {
  server 192.168.0.1;
  server 192.168.0.2;
  fair;
}

server {
  listen 80;
  server_name localhost;
  location / {
    proxy_pass  http://backserver;
  }
}

1.2 健康检查

Nginx 自带 ngx_http_upstream_module（健康检测模块）本质上服务器心跳的检查，
通过定期轮询向集群里的服务器发送健康检查请求,来检查集群中是否有服务器处于异常状态

nginx

基本例子如下👇

upstream backserver{
  server 192.168.0.1  max_fails=1 fail_timeout=40s;
  server 192.168.0.2  max_fails=1 fail_timeout=40s;
}

server {
  listen 80;
  server_name localhost;
  location / {
    proxy_pass http://backend;
  }
}

涉及两个配置：

fail_timeout10smax_fails1

2.反向代理

反向代理指的是，当一个客户端发送的请求,想要访问服务器上的内容，
但将被该请求先发送到一个代理服务器proxy,这个代理服务器（Nginx）将把请求代理到和自己属于同一个局域网下的内部服务器上,
而用户通过客户端真正想获得的内容就存储在这些内部服务器上，此时Nginx代理服务器承担的角色就是一个中间人，起到分配和沟通的作用

2.1  为什么需要反向代理？

反向代理的优势主要有以下两点:

• 防火墙作用

Nginxnginx

• 负载均衡

nginx均匀地负载均衡

2.2 如何使用反向代理

nodejs

// nginx.config
server  {
  listen 80;
  server_name localhost;
  location / {
    proxy_pass http://127.0.0.1:8000;（upstream）
  }
}

NginxlocationURIproxy_passupstream

3.Https 配置

Nginx 常用来配置Https认证，主要有两个步骤：签署第三方可信任的SSL证书 和 配置 HTTPS

3.1 签署第三方可信任的 SSL

3.2 Nginx配置https

要开启 HTTPS 服务，在配置文件信息块(server)，必须使用监听命令 listen 的 ssl 参数和定义服务器证书文件和私钥文件，如下所示：

server {
  #ssl参数
  listen              443 ssl; //监听443端口，因为443端口是https的默认端口。80为http的默认端口
  server_name         example.com;
  #证书文件
  ssl_certificate     example.com.crt;
  #私钥文件
  ssl_certificate_key example.com.key;
}

ssl_certificatessl_certificate_key

4.常用的配置

除了上述的这些，前端还可以用Nginx做些什么，多着呢～下面依依给你讲

4.1 IP白名单

可以配置nginx的白名单，规定有哪些ip可以访问你的服务器，防爬虫必备

• 简单配置

server {
  location / {
    deny  192.168.0.1; // 禁止该ip访问
    deny  all; // 禁止所有
  }
}

• 白名单配置

建立白名单

vim /etc/nginx/white_ip.conf
 ...
192.168.0.1 1;
 ...

修改nginx配置(nginx.conf)

geo $remote_addr $ip_whitelist{
  default 0;
  include ip.conf;
}
// geo 指令主要是可以根据指定变量的值映射出一个新变量。如果不指定变量，默认为`$remote_addr`

为匹配项做白名单设置

server {
  location / {
    if ( $ip_whitelist = 0 ){
      return 403; //不在白名单返回 403
    }
    index index.html;
    root /tmp;
  }
}

4.2 适配PC与移动环境

当用户从移动端打开PC端baidu.com的场景时，将自动跳转指移动端m.baidu.com，
本质上是Nginx可以通过内置变量$http_user_agent，获取到请求客户端的userAgent，
从而知道当前用户当前终端是移动端还是PC，进而重定向到H5站还是PC站

server {
  location / {
    //移动、pc设备agent获取
    if ($http_user_agent ~* '(Android|webOS|iPhone)') {
      set $mobile_request '1';
    }
    if ($mobile_request = '1') {
      rewrite ^.+ http://m.baidu.com;
    }
  }
}

4.3 配置gzip

开启Nginx gzip，压缩后,静态资源的大小会大大的减少,从而可以节约大量的带宽,提高传输效率,带来更好的响应和体验

server{
  gzip on; //启动
  gzip_buffers 32 4K;
  gzip_comp_level 6; //压缩级别，1-10，数字越大压缩的越好
  gzip_min_length 100; //不压缩临界值，大于100的才压缩，一般不用改
  gzip_types application/javascript text/css text/xml;
  gzip_disable "MSIE [1-6]\."; // IE6对Gzip不友好，对Gzip
  gzip_vary on;
}

4.4 Nginx配置跨域请求

当出现403跨域错误的时候，还有 No 'Access-Control-Allow-Origin' 
header is present on the requested resource报错等，
需要给Nginx服务器配置响应的header参数：

location / {
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
  add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

  if ($request_method = 'OPTIONS') {
    return 204;
  }
}

5.如何使用Nginx

通过在本地使用Nginx，从启动、更改、重启等环节来介绍Nginx的基本使用

• 如何启动sudo nginx
• 修改nginx.conf 配置 (具体看你配置位置)vim /usr/local/etc/nginx/nginx.conf
• 检查语法是否正常 sudo nginx -t
• 重启nginx sudo nginx -s reload
• 创建软链接(便于管理多应用nginx)

当我们需要管理多个网站的nginx，nginx文件放在一起是最好的管理方式，
一般都存在/nginx/conf.d/，我们需要把配置文件丢到 /etc/nginx/conf.d/ 文件夹下，怎样才能使这个配置文件既在程序文件夹下，
又在 /etc/nginx/conf.d/文件夹下呢？

/home/app/app.nginx.conf/etc/nginx/conf.d/

ln -s /home/app/app.example.com.nginx.conf /etc/nginx/conf.d/app.nginx.conf

/etc/nginx/conf.d/nginxngxin