Nginx前端部署指导手册

在主配置文件http段中添加一行include /data/nginx/conf.d/*.conf; 以引用/data/nginx/conf.d/目录下所有以.conf结尾的文件

注：具体的目录路径以实际Nginx部署路径决定

Nginx做web服务器

只单纯的提供前端服务

在/data/nginx/conf.d/目录下新建配置文件web.conf，文件内容如下

server {
        listen       8081;
        server_name  xxx.xxx.com;

        location / {
            root /data/web/dist;    //前端静态资源所在路径
            index  index.html index.htm;
        }
    }

Nginx做文件服务器

在/data/nginx/conf.d/目录下新建配置文件webfile.conf，文件内容如下

server {
        listen       8081;
        server_name  xxx.xxx.com;

        location / {
            root /data/web/file;
            autoindex on;        //开启目录浏览功能
            charset 'utf-8';    //设置编码格式为utf-8，解决页面显示中文乱码问题
        }
    }

Nginx做web服务器并代理后端接口

在/data/nginx/conf.d/目录下新建配置文件web1.conf，文件内容如下

server {
        listen       8081;
        server_name  xxx.xxx.com;
        root /data/web/dist;
        index  index.html index.htm;

        location /api/ {
            proxy_pass    http://server.xxx.com;
        }
    }

Nginx location讲解

location表达式类型

~ 表示执行一个正则匹配，区分大小写

~* 表示执行一个正则匹配，不区分大小写

^~ 表示普通字符匹配。优先使用前缀匹配。如果匹配成功，则不再匹配其他location。

= 进行普通字符精确匹配。也就是完全匹配。

location匹配优先级

在nginx的location和配置中location的顺序没有太大关系。跟location表达式的类型有关。相同类型的表达式，字符串长的会优先匹配。
以下是按优先级排列说明：

第一优先级：等号类型（=）的优先级最高。一旦匹配成功，则不再查找其他匹配项。

第二优先级：^~类型表达式。一旦匹配成功，则不再查找其他匹配项。

第三优先级：正则表达式类型（~ ~*）的优先级次之。如果有多个location的正则能匹配的话，使用最先匹配的那个，即最上面的；

第四优先级：常规字符串匹配类型。按前缀匹配。

nginx proxy_pass代理

proxy_pass 的url后跟"/"和不跟"/"的区别

 # 第一种
 location  /abc {
     proxy_pass http://192.168.200.129:8081/;
 }

结论：会被代理到http://192.168.200.129:8081/index.html 这个url

 # 第二种(相对于第一种，最后少一个 /)
 location  /abc {
       proxy_pass http://192.168.200.129:8081;
   }

结论：会被代理到http://192.168.200.129:8081/abc/index.html 这个url验证

后端服务器地址为192.168.200.129:8081，后端服务器信息目录结构如下：
# tree dist/
dist/
├── abc
│ └── index.html
└── index.html

两页面内容如下
# cat dist/index.html 
hello word

# cat dist/abc/index.html 
test abc

前端服务器地址为192.168.200.128:8088

 第一种：
 192.168.200.128:8088 nginx配置如下    
 server {
     listen   8088;
     server_name  localhost;
     
     location /abc/ {
     proxy_pass http://192.168.200.129:8081/;
     }
 }

当我们访问http://192.168.200.128:8088/abc/index.html 时候，页面出现的是hello word

   第二种：
   192.168.200.128:8088 nginx配置如下
   
   server {
       listen   8088;
       server_name  localhost;
       
       location /abc/ {
       proxy_pass http://192.168.200.129:8081;
       }
   }

当我们访问http://192.168.200.128:8088/abc/index.html 时候，页面出现的是test abc

location 后面的路径加"/"和不加"/"的区别

思考：如果我们指定 location 拦截特定的路径时 location /test，test后面带/和不带/有什么区别呢

如果test后不带"/"

表示会拦截如/test /test01 /testxxxxx 这一类请求，只要是以test开头的请求都会被拦截

如果test后带"/"

表示只会拦截/test 或者/test/xxxx等相关请求

Nginx设置超时时间

1、在主配置文件http段中设置

有三个参数

client_header_timeout 12m;
指定等待client发送一个请求头的超时时间（例如：GET / HTTP/1.1），仅当在一次read中，没有收到请求头，才会算成超时。如果在超时时间内，client没发送任何东西，nginx返回HTTP状态码408(“Request timed out”)，默认值 60s


client_body_timeout 12m;
该指令设置请求体（request body）的读超时时间。仅当在一次readstep中，没有得到请求体，就会设为超时。超时后，nginx返回HTTP状态码408(“Request timed out”)，默认值 60s


keepalive_timeout 720;
指定了与client的keep-alive连接超时时间，服务器将会在这个时间后关闭连接。默认值 75s

示例如下

......
http {
    include   mime.types;
    default_type  application/octet-stream;
    
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #  '$status $body_bytes_sent "$http_referer" '
    #  '"$http_user_agent" "$http_x_forwarded_for"';
    
    #access_log  logs/access.log  main;
    
    sendfileon;
    #tcp_nopush on;
    
    #keepalive_timeout  0;
    client_header_timeout 5m;
    client_body_timeout 5m;
    keepalive_timeout  300;
    
    #gzip  on;
    include /data/nginx/conf.d/ *.conf; 
        server {
          listen   80;
          server_name  localhost;
......

2、在server段location下设置

有三个参数

proxy_connect_timeout 720s;
后端服务器连接的超时时间，发起握手等候响应超时时间（代理连接超时）。默认值 60s


proxy_read_timeout 720s;
连接成功后，等候后端服务器响应时间，其实已经进入后端的排队之中等候处理（也可以说是后端服务器处理请求的时间）。默认值 60s


proxy_send_timeout 720s;
后端服务器数据回传时间_就是在规定时间之内后端服务器必须传完所有的数据。默认值 60s

示例如下

server {
    listen       8081;
    server_name  xxx.xxx.com;

    location / {
        proxy_pass http://server.xxx.com;
        proxy_connect_timeout 300s;
        proxy_read_timeout 300s;
        proxy_send_timeout 300s;
    }
}

Nginx上传文件大小限制

nginx上传文件大小限制取决于client_max_body_size参数

示例

client_max_body_size32M;

默认限制的文件大小是32M，如果想增加或者减少只需要修改后面的参数值即可

注意：client_max_body_size可以在http段下也可以在server段下，但是不能在location下

在http段下是作用于全局，对所有server都生效，前提是server中没有配置client_max_body_size，假如一个server中配置了client_max_body_size，那就会优先使用自己server中的client_max_body_size配置。

在server段下只针对单个server有效

Nginx解决跨域问题

server {
    listen   80;
    server_name  xxx.xxx.com;
    
    location /api/ {
    proxy_pass http://server.xxx.com;
    proxy_set_header Host  $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

}

或

server {
    listen   80;
    server_name  xxx.xxx.com;

    location /api/ {
        add_header Access-Control-Allow-Origin * always;
        add_header Access-Control-Allow-Headers *;
        add_header Access-Control-Allow-Methods "GET, POST, PUT, OPTIONS";
        proxy_passhttp://server.xxx.com;
    }

}

Nginx Rewrite重写

server {
    listen   80;
    server_name  xxx.xxx.com;

    location / {
        root /data/web/zjtldt_app/dist;
        index  index.html index.htm;
    }

    location /t0 {
        rewrite ^/t0(.*)$ $1 break;         #通过rewrite将/t0路径消除
        proxy_passhttp://t0.tianditu.com;
    }
}

此处的rewrite参数释义如下

^：匹配输入字符串的起始位置
()：作为一个整体匹配
.：匹配除换行符以外的任意字符
*：匹配0次或多次
$：匹配输入字符串的结束位置
$1：引用前面括号中(.*)匹配的内容
break：本条规则匹配完成即终止，不再匹配后面的任何规则

Nginx配置SSL证书

server {
    listen   443 ssl;
    server_name  xxx.xxx.com;

    ssl_certificate /data/nginx/ssl_file/xxx_xxx.xxx.pem;       #证书文件
    ssl_certificate_key /data/nginx/ssl_file/xxx_xxx.xxx.key;       #密钥文件
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;

    location / {
        root /data/dist;
        index  index.html index.htm;
    }

    location /api {
        proxy_passhttp://192.168.200.20:8081/;
    }
}

完整配置文件示例

server {
    listen   443 ssl;
    server_name xxx.xxx.com;

    ssl_certificate /data/nginx/ssl_file/xxx_xxx.xin.pem;
    ssl_certificate_key /data/nginx/ssl_file/xxx_xxx.xin.key;
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;

    location / {
        root /data/web/zjtldt_app/dist;
        index  index.html index.htm;
    }

    location /api {
        proxy_pass http://192.168.200.20:8081/;
    }


    location /file {
        root /data/chatapp;
        autoindex on;
        charset 'utf-8';
    }  

    location /dataserver {
        proxy_pass http://192.168.200.20:48581/dataserver/;
    }

    location /AT_tileset {
        proxy_pass http://192.168.200.20:18822/AT_tileset/;
    }

    location /t0 {
        rewrite ^/t0(.*)$ $1 break;
        proxy_pass http://t0.tianditu.com;
    }

    location /t1 {
        rewrite ^/t1(.*)$ $1 break;
        proxy_pass http://t1.tianditu.com;
    }

    location /t2 {
        rewrite ^/t2(.*)$ $1 break;
        proxy_passhttp://t2.tianditu.com;
    }

    location /t3 {
        rewrite ^/t3(.*)$ $1 break;
        proxy_passhttp://t3.tianditu.com;
    }

    location /t4 {
        rewrite ^/t4(.*)$ $1 break;
        proxy_passhttp://t4.tianditu.com;
    }

    location /t5 {
        rewrite ^/t5(.*)$ $1 break;
        proxy_passhttp://t5.tianditu.com;
    }

    location /t6 {
        rewrite ^/t6(.*)$ $1 break;
        proxy_passhttp://t6.tianditu.com;
    }

    location /t7 {
        rewrite ^/t7(.*)$ $1 break;
        proxy_passhttp://t7.tianditu.com;
    }

}

说明

在该示例中，前端请求后台接口地址或其他接口地址时不直接请求真实的接口地址，通过Nginx为接口地址配置反向代理，前端请求时只请求Nginx的地址，通过Nginx去访问真实接口地址。

如为后台接口地址http://192.168.200.2:8081/ 配置了nginx反向代理，前端请求后台接口的地址改为Nginx地址https://xxx.xxx.com/api ，此处的Nginx地址为已映射的外网地址。

这种模式的好处是真实接口地址不需要暴露给客户端访问，只需要保证真实接口地址能被Nginx访问，应用发布时只需要暴露Nginx地址即可，对接口服务能起到保护作用，同时也不需要将接口地址映射到外网，减少NAT条数，减轻路由器压力。

另一个好处是部署https应用时，前端在Nginx上配置了https，后台接口服务如果不配置https的话访问时会报错“混合内容”，需要为后台接口服务也配置https，才能解决该问题，除此种方式外，使用nginx为后台接口配置反向代理，前端请求后台接口时请求的是Nginx地址，因为Nginx已经配置了https，可以有效解决混合内容问题。

注：公司部署的应用全部使用该种模式，只对外暴露Nginx访问地址。

其他

对于并发访问高的应用来说，在server中设置不存储访问日志，可以让读取磁盘IO操作更快

示例如下

server {
    listen   8081;
    server_name  xxx.xxx.com;
    access_log off;         #设置为off

    location / {
        root /data/web/zjtldt_app/dist;
        index  index.html index.htm;
    }
}

Nginx前端部署指导手册

Nginx做web服务器

Nginx做文件服务器

Nginx做web服务器并代理后端接口

Nginx location讲解

hello word

test abc

Nginx设置超时时间

Nginx上传文件大小限制

Nginx解决跨域问题

Nginx Rewrite重写

Nginx配置SSL证书

说明

其他

你可能感兴趣的:(Nginx前端部署指导手册)