聊聊前端必须know 的Nginx的一些常用配置

Nginxmain功能

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

负载均衡

负载均衡是一门计算机network技术,main用来优化资源使用、最大化吞吐率、最小化响应time、同时避免过载的康摹
if一个网站只有一台service器的话,ifthis台service器宕机了,那么整个网站take无法正常访问。当访问网站人数过多,并发量达到一定规模,超过service器性能的极限,整个网站也take无法访问。而负载均衡就是用来解决this一类的problem。

1.png

负载均衡是通过后端引入一个负载均衡器和至少一个额外的webservice器来缓解this类problem(增加的webservice器和原本的webservice器provide相同的谌)。user访问的时候,先访问到负载均衡器,再通过负载均衡器take请求转发给后台service器。

2.png

通过this种方法,当有一台service器宕机时,负载均衡器就分配其他的service器给user,极大的增加的网站的稳定性。

负载均衡器mainsure转发http、https、tcp、udp四种请求rule
负载均衡器how 给user分配service器? 负载均衡器有多指涸鼐算法,基本就是给每台service器一个不同的权重,通过权重来给user分配service器。
负载均衡不需要前端进行配置,main是service端进行配置,前端稍作了解即可。

反向agent

反向agent是前端经常会用到的一项功能,main是为了解决浏览器跨域访问的problem。当agreement、域名、端口号有一项或多项不同时,便违反送床呗裕枰缬颉G岸丝缬蛴玫慕隙嗟挠校

1.jsonp跨域: 使用html的<script>标签sure引入第三方的js文件,所以Wesure通过

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

来绕过跨域的限制。however需要注意的是,jsonp只supportget请求。

2.webpack反向agent: 前端开发中,基于webpack配置环车膕papage面已经是一种趋势,webpack内置的proxysure帮助Westay开发环车魇越涌谑眛akeWe的地址agent到后台service地址,解决跨域problem。配置如下

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

this段代码的含义就是,当前端访问接口匹配到'/api'时,takeagent到':8080'service端地址,if前台的接口名为/api/restful,agent的请求路径take是':8080/api/restful'。

3.使用nginx进行反向agent
前端开发完成,对代码进行打包后,webpack就无法使用了。this个时候We手里只有html、css、js等静态文件,后台接口地址都会访问不到。this个时候nginx就登场了,nginx反向agent配置和webpack大同小异,匹配到动态的地址时take请求转发到一个service器地址实现跨域。specific 流程如下:
1) 访问,downloadnginx奖地
2) take打包完成的代码放置staynginx的html柯枷
3) 打开conf文件夹下的nginx.conf文件,配置如下:

server {
    listen       3000;    //监听的本地端口
    server_name  localhost;    
                
    location /api {         //匹配到/api开头的接口时,转发到下面的service器地址
        root   html;  
        proxy_pass  http://192.168.xxx.xxx:8080;    //service器地址      
    }  
                        
    location =/ {
        root html;
        index  index.htm  index.html;   //默认主page
    }
                        
    # All静态请求都由nginx处理,存放柯嘉猦tml  
    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;
    }
}

动静分离

动静分离是为了减少不必要的请求已减少资源的浪费、请求难邮薄

举个例子,假如WeAll的前台数据都从后台获取,We访问百度首page时,if首page有一张背景图,那么We每personal看谓胧譸age时家デ求接口获取this张背景图,而首page的访问量是巨大的,看味嘉艘张背景图去请求同一个接口对于资源的消耗不可计数,为了减少资源的损耗、加fast网page的加载speed,动静分离由此而生。

像this种静态资源,前端都会直接preservationstay本地文件之中,看谓胧譸age的时候从本地文件内读取静态picture资源,动态数据再通过反向agent去service器端获取展示。specific 配置如下:

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

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

配置httpsservice

微信小程序Now越来越火,大批前端开发进军微信小程序,however微信小程序只supporthttps请求,this是一个problem。但当你看完this篇文章,thistake不再是阻挡你的一座大山。

要配置httpsservice,流程specific 如下:
1) 申请证书,sure申请三个月免费ssl证书,申请过程请按照official提示步骤
2) 申请完成后downloadnginx版本的证书至本地,一个crt文件一个key文件,crt为证书,key为密钥
3) 配置nginx,如下:

 server {
    listen       443 ssl;    //监听443端口,because443端口是https的默认端口。80为http的默认端口
    server_name  www.domain.com;    //配置域名
                
    ssl_certificate      证书的绝对路径;
    ssl_certificate_key  密康木路径;
                
    # location / {        //反向agent的service器地址,视情况进行配置
    #    proxy_pass   http://112.35.xxx.xxx;
    # }          
}

总结

最后,We走一遍整个流程

3.png1.user输入,默认80端口
2.nginx监听到80端口被访问,匹配到域名为www.dream.com,takeserviceagent到:8080
3.service器返回page面资源
4.user输入
5.nginx监听443端口,匹配到相应域名,进行证书验证,takeserviceagent到指定service器

以上的都只是nginx最基础的配置,还have很多sure优化的地方。
if有what配置不当的地方,欢迎comment区批评指正,谢谢。

本文转载自:https://segmentfault.com/a/1190000016336322?utm_source=sf-related

想要了解morerelevant知识,可访问 !!

以上就是聊聊前端必须know 的Nginx的一些常用配置的详细谌荩琺ore请关注亚博足彩app其它relevant文章!

赞(0) 打赏
未经市聿坏米兀亚博足彩app首page » 头条

comment 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发relevantadvertisement投放 更专业 更精准

联系We

觉梦恼掠杏镁痛蛏鸵幌挛恼耡uthor

支付宝扫一扫打赏

微信扫一扫打赏

1/1