前端必须知道的Nginx的经常使用配置

Nginx主要功能

1. 负载均衡
2. 反向代理
3. 动静分离
4. 配置https

负载均衡

负载均衡是一门计算机网络技术，主要用来优化资源使用、最大化吞吐率、最小化响应时间、同时避免过载的目的。
若是一个网站只有一台服务器的话，若是这台服务器宕机了，那么整个网站将没法正常访问。当访问网站人数过多，并发量达到必定规模，超过服务器性能的极限，整个网站也将没法访问。而负载均衡就是用来解决这一类的问题。

负载均衡是经过后端引入一个负载均衡器和至少一个额外的web服务器来缓解这类问题(增长的web服务器和本来的web服务器提供相同的内容)。用户访问的时候，先访问到负载均衡器，再经过负载均衡器将请求转发给后台服务器。

经过这种方法，当有一台服务器宕机时，负载均衡器就分配其余的服务器给用户，极大的增长的网站的稳定性。

负载均衡器主要能够转发http、https、tcp、udp四种请求规则
负载均衡器如何给用户分配服务器？ 负载均衡器有多种负载均衡算法，基本就是给每台服务器一个不一样的权重，经过权重来给用户分配服务器。
负载均衡不须要前端进行配置，主要是服务端进行配置，前端稍做了解便可。

反向代理

反向代理是前端常常会用到的一项功能，主要是为了解决浏览器跨域访问的问题。当协议、域名、端口号有一项或多项不一样时，便违反了同源策略，须要跨域。前端跨域用的较多的有：

1.jsonp跨域： 使用html的<script>标签能够引入第三方的js文件，因此咱们能够经过

<script src="http://后台接口"></script>

来绕过跨域的限制。可是须要注意的是，jsonp只支持get请求。

2.webpack反向代理： 前端开发中，基于webpack配置环境的spa页面已是一种趋势，webpack内置的proxy能够帮助咱们在开发环境调试接口时将咱们的地址代理到后台服务地址，解决跨域问题。配置以下

proxyTable: {
            '/api': {
                target: 'http://192.168.xxx.xxx:8080',
                changeOrigin: true
            }
        }

这段代码的含义就是，当前端访问接口匹配到'/api'时，将代理到'http://192.168.xxx.xxx:8080'服务端地址，若是前台的接口名为/api/restful，代理的请求路径将是'http://192.168.xxx.xxx:8080/api/restful'。

3.使用nginx进行反向代理
前端开发完成，对代码进行打包后，webpack就没法使用了。这个时候咱们手里只有html、css、js等静态文件，后台接口地址都会访问不到。这个时候nginx就登场了，nginx反向代理配置和webpack大同小异，匹配到动态的地址时将请求转发到一个服务器地址实现跨域。具体流程以下：
1) 访问nginx官网，下载nginx到本地
2) 将打包完成的代码放置在nginx的html目录下
3) 打开conf文件夹下的nginx.conf文件，配置以下：

server {
    listen       3000;    //监听的本地端口
    server_name  localhost;    
                
    location /api {         //匹配到/api开头的接口时，转发到下面的服务器地址
        root   html;  
        proxy_pass  http://192.168.xxx.xxx:8080;    //服务器地址      
    }  
                        
    location =/ {
        root html;
        index  index.htm  index.html;   //默认主页
    }
                        
    # 全部静态请求都由nginx处理，存放目录为html  
    location ~ \.(htm|html|js|css|jpg|png|gif|eot|svg|ttf|woff|woff2)$ {  
        root    html;      //配置静态资源地址
    }    
                
    error_page   500 502 503 504  /50x.html;
        location = /50x.html {
        root   html;
    }
}

动静分离

动静分离是为了减小没必要要的请求已减小资源的浪费、请求的延时。

举个例子，假如咱们全部的前台数据都从后台获取，咱们访问百度首页时，若是首页有一张背景图，那么咱们每一个人每次进入首页时都要去请求接口获取这张背景图，而首页的访问量是巨大的，每次都为了一张背景图去请求同一个接口对于资源的消耗不可计数，为了减小资源的损耗、加快网页的加载速度，动静分离由此而生。

像这种静态资源，前端都会直接保存在本地文件之中，每次进入首页的时候从本地文件内读取静态图片资源，动态数据再经过反向代理去服务器端获取展现。具体配置以下：

location ~ \.(htm|html|js|css|jpg|png|gif|eot|svg|ttf|woff|woff2)$ {  
     root    html;      //配置静态资源地址
 }

当匹配到上述后缀名时，直接去html内获取静态资源，不向后台发起请求。

配置https服务

微信小程序如今愈来愈火，大批前端开发进军微信小程序，可是微信小程序只支持https请求，这是一个问题。但当你看完这篇文章，这将再也不是阻挡你的一座大山。

要配置https服务，流程具体以下：
1) 申请证书，便宜ssl能够申请三个月免费ssl证书，申请过程请按照官方提示步骤
2) 申请完成后下载nginx版本的证书至本地，一个crt文件一个key文件，crt为证书，key为密钥
3) 配置nginx，以下：

server {
    listen       443 ssl;    //监听443端口，由于443端口是https的默认端口。80为http的默认端口
    server_name  www.domain.com;    //配置域名
                
    ssl_certificate      证书的绝对路径;
    ssl_certificate_key  密钥的绝对路径;
                
    # location / {        //反向代理的服务器地址，视状况进行配置
    #    proxy_pass   http://112.35.xxx.xxx;
    # }          
}

总结

最后，咱们走一遍整个流程

1.用户输入http://域名，默认80端口
2.nginx监听到80端口被访问，匹配到域名为www.dream.com，将服务代理到http://192.168.3.10:8080
3.服务器返回页面资源
4.用户输入https://二级域名,默认端口为443
5.nginx监听443端口,匹配到相应域名，进行证书验证，将服务代理到指定服务器

以上的都只是nginx最基础的配置，还具备不少能够优化的地方。若是有什么配置不当的地方，欢迎评论区批评指正，谢谢。