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

tracymac7 发布于2019-07-25 14:27 / 2589人阅读

摘要：负载均衡是通过后端引入一个负载均衡器和至少一个额外的服务器来缓解这类问题增加的服务器和原本的服务器提供相同的内容。负载均衡不需要前端进行配置，主要是服务端进行配置，前端稍作了解即可。

Nginx主要功能

负载均衡

反向代理

动静分离

配置https

负载均衡

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

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

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

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

反向代理

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

1.jsonp跨域：使用html的

来绕过跨域的限制。但是需要注意的是，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最基础的配置，还具有很多可以优化的地方。
如果有什么配置不当的地方，欢迎评论区批评指正，谢谢。

云服务器 GPU云服务器 nginx的安装与配置你不知道的你不知道的javascript 知道别人的ip怎么攻击

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/40117.html

PHP程序员学习路线

摘要：第一阶段基础阶段基础程序员重点把搞熟练核心是安装配置基本操作目标能够完成基本的系统安装，简单配置维护能够做基本的简单系统的开发能够在中型系统中支持某个功能模块的开发。本项不做重点学习，除非对前端有兴趣。第一阶段：基础阶段（基础PHP程序员）重点：把LNMP搞熟练（核心是安装配置基本操作）目标：能够完成基本的LNMP系统安装，简单配置维护；能够做基本的简单系统的PHP开发；能够在P...

genedna 2019-06-27 16:06 评论0 收藏0
前端性能优化与上线

摘要：看下状态可以看到我已经有一些镜像了我已经删除了拉镜像正常即可，中间那段是中国镜像源，我们成功下来了的镜像。攻破像我这样屌丝的服务器一般都买的，大的资源文件不住，一个动辄的文件这很蛋疼，不上很难受。 4000字长文，多图预警！！！流量慎入！！性能优化 - 屌丝前端性能优化、上线一条龙大家好我又来了，本章给大家带来的内容是：上线和上线后的性能优化项目地址实战预览地址实战项目地址...

wupengyu 2019-06-28 16:51 评论0 收藏0
关于 nginx 前端知道这些就够了

摘要：我备案了个域名，买了一个阿里云服务器，想要搭建几个自己的网站，难免要接触。创建软链接假如我们每个网站程序放在一个文件夹里，该程序的配置文件也应该放在这个文件夹里才方便管理。我备案了个域名，买了一个阿里云服务器，想要搭建几个自己的网站，难免要接触 nginx。那么我用 nginx 来干嘛呢：静态资源反向代理将域名泛解析到服务器之后，通过 nginx 来给不同的二级域名分配服务器...

Alfred 2019-08-22 16:58 评论0 收藏0
关于 nginx 前端知道这些就够了

摘要：我备案了个域名，买了一个阿里云服务器，想要搭建几个自己的网站，难免要接触。创建软链接假如我们每个网站程序放在一个文件夹里，该程序的配置文件也应该放在这个文件夹里才方便管理。我备案了个域名，买了一个阿里云服务器，想要搭建几个自己的网站，难免要接触 nginx。那么我用 nginx 来干嘛呢：静态资源反向代理将域名泛解析到服务器之后，通过 nginx 来给不同的二级域名分配服务器...

xiao7cn 2019-07-25 14:17 评论0 收藏0
Docker Compose 整合发布应用相关服务

摘要：于是，程序不再是原先单一的服务，而是，变成了一系列密切相关的服务。需要注意的是，在模式下申请证书，需要向证明服务器能被访问。首先，祝各位新年快乐，万事如意，鸡年大吉。这次要来说说一个和前端并不太相关的东西——docker compose，一个整合发布应用的利器。如果，你对 docker 有一些耳闻，那么，你可能知道它是什么。不过，你不了解也没有关系，在作者眼中，docker 就...

microcosm1994 2019-07-25 13:51 评论0 收藏0