引言

Nginx这个词在一段时间里，对于一名前端开发工程师来说可能是比较陌生和遥远，但随着互联网的发展，前端技术也在日新月异的发生变化，对于前端技术人才的要求和门槛都在不断的提高，不仅仅希望你在自己的专业领域是一个有技术深度并且还需要有技术广度，那么服务器运维这块肯定是绕不过去的一个点，今天我们就一起来聊聊Web服务器Nginx。

1.Web服务器简介

Web服务器一般指网站服务器，一般是用于存储网站组件文件（例如，HTML 文档、图像、CSS 样式表和 JavaScript 文件）和基于Web的应用程序的数据托管。Web服务器连接到 Internet并支持与连接到Web的其他设备进行物理数据交换。

常用的服务器有Apache、Nginx、Lighttpd、Tomcat、IBM WebSphere等。目前比较主流的三个Web服务器是Apache、Nginx和IIS。

2.Nginx介绍

Nginx是一款轻量级的HTTP服务器，采用事件驱动的异步非阻塞处理方式框架，这让其具有极好的IO性能，时常用于服务端的反向代理和负载均衡。

• 优点: 支持高并发、内存消耗少、商用免费、配置简单上手成本低。
• 场景: 静态资源服务器、代理服务器(负载均衡，反向代理，缓存)、API服务等。

3.快速上手

• 基于brew方式安装Nginx

# 安装命令
brew install nginx

# 查看安装详情
brew info nginx

# 安装目录
/opt/homebrew/Cellar/nginx

# 配置目录
/opt/homebrew/etc/nginx

4.常用命令

• 在Terminal终端输入nginx -h可以看到详细的帮助信息，下面列举常用的几个命令

# 启动服务
./nginx | nginx

# 停止服务
nginx -s stop

# 重新加载
nginx -s reload

# 重新启动
nginx -s reopen

# 验证配置是否正确
nginx -t

# 退出
nginx -s quit

5.常用配置

5.1 反向代理

是指服务器代理，客户端无感知！当客户端发送请求访问Server上的数据时，发送的内容会先发送到代理服务器，然后代理服务器再把请求转发到真正的目标服务器！对外暴露的是代理服务器，隐藏了真实的服务器IP地址。

# 最简单的反向代理
server {
    listen 3000;
    server_name google.test.com;

    location / {
        proxy_pass https://wwww.baidu.com;
    }
}

5.2 负载均衡

在互联网早起，客户端和服务端交互一般都比较单一简单，用户的数量也相对规模较小。随着互联网的发展和普及，Web应用交互日趋复杂，用户数量也激增，当并发量特别大的时候，服务器很容易崩溃，过去的这种方式已无法满足需求。

上述问题很明显是由于服务性能出现瓶颈，很自然就会想到可以增加服务器，将一台机器的压力分担到多台服务器上，进而提高系统的吞吐率，另外一台机器挂掉，其它服务器还可以正常提供服务，以此来提高系统的可伸缩性和稳定性。

负载均衡策略分类：普通轮询(默认)、权重轮询、最少连接、IP Hash

• 轮询

 按请求的时间顺序依次逐一分配，如果服务器down掉，能自动剔除。

• 权重

# 服务器集群
upstream my_servers {
    server 127.0.0.1:9001 weight=5;
    server 127.0.0.1:9002 weight=2;
    server 127.0.0.1:9003 weight=2;
}

• fair

# 服务器集群
upstream my_servers {
    fair
    server 127.0.0.1:9001;
    server 127.0.0.1:9002;
    server 127.0.0.1:9003;
}

• ip

# 服务器集群
upstream my_servers {
    ip_hash
    server 127.0.0.1:9001;
    server 127.0.0.1:9002;
    server 127.0.0.1:9003;
}

服务使用负载均衡

server {
    listen 7777;
    server_name balance.test.com;

    location / {
        proxy_pass http://my_servers/;
    }
}

5.3 静态资源缓存

Web 缓存分为客户端缓存和服务端缓存，客户端缓存就是浏览器缓存，而服务器缓存就是常见的Nginx、Redis、Memcached等！现今随着技术不断发展，对系统性能以及用户体验方面要求都是越来越高，作为一个技术工作人员， 通常也会通过各种技术手段来系统进行调优，Nginx缓存也是一种很常用的方式，一般会对一些经常不变的文件做静态资源缓存，从而提升页面的加载速度，节约网络资源，减小服务的压力。

location ~ .*\.(css|js|jpg|png|gif|swf|woff|woff2|eot|svg|ttf|otf|mp3|m4a|aac|txt)$ {
    proxy_pass: http://xxx.xxx.xxx.xxx: 1234; 目标资源服务器地址
    proxy_set_header Host $host; #允许重新定义或者添加发往后端服务器的请求头
    proxy_cache_valid 200 302 24h;#为不同的响应状态码设置不同的缓存时间
    proxy_cache_valid 301 30d; #为不同的响应状态码设置不同的缓存时间
    proxy_cache_valid any 5m; #为不同的响应状态码设置不同的缓存时间
    expires 90d; #缓存过期时间90天
    add_header wall "hello world"; #自定义header
 }

5.4 图片防盗链

Nginx防盗链是通过请求参数refer参数来做处理，在图片服务器中配置自己的白名单域名，当所有请求过来的时候，非白名单的域就会被拦截从而过滤掉。

server {
    listen	80;
    server_name  static.test.com
    location ~* \.(gif|jpg|jpeg|png|bmp|swf)$ {      
        valid_referers none server_names *.test1.com ~\.test2\.;
        if ($invalid_referer){
            rewrite ^/ http://static.test.com/static/img/default.jpg;
        }
    }
}

5.5 Gzip压缩

Gzip是一种网页的常见压缩技术，开启Gzip压缩后，页面大小可以变的更小。也就意味着带宽的节约和传输速度的提升，从而也会让用户浏览的体验更好，Gzip网页压缩的实现需要浏览器和服务器的支持。

Gzip压缩检测站点：https://tool.chinaz.com/Gzips/Default.aspx?q=bj.58.com

#开启gzip
gzip on;

#低于1kb的资源不压缩
gzip_min_length 1k;

#压缩级别1-9，越大压缩率越高，同时消耗cpu资源也越多，建议设置在5左右。
gzip_comp_level 6;

#需要压缩哪些响应类型的资源，多个空格隔开。不建议压缩图片.
gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css image/jpeg image/gif image/png;

#配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
gzip_disable "MSIE [1-6]\.";

#是否添加“Vary: Accept-Encoding”响应头
gzip_vary on;

5.6 多端适配

在移动互联网时代，为了更好的满足用户的需求，作为开发通常会遇到这也的需求，根据用户不同设备，呈现给用户的页面样式和布局会有所不同，所以很多网站都有自己的PC站点和M站点，为了更好的维护和体验，通常会分开来做，比如我们常见的淘宝和京东这些大型网站PC和M都是两套系统。通过nginx获取用户设备的Agent，可以很方便快捷的将不同端的页面展示给用户。

# 多端适配
server {
    listen 7000;
    server_name web.test.com;
    location / {
        root /Users/a58/Desktop/nginx-demo;
        # 1.如果是静态页面判断agent如果是移动端则指向移动端
        # 2.pc和m端是两个服务，可以通过proxy_pass反向代理到对应的服务
        if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
            root /Users/a58/Desktop/nginx-demo/m;
        }
        index index.html index.htm;
    }
}

5.7 解决跨域CORS配置

由于安全考虑，1995年有Netscape公司在Web浏览器引入同源策略。它用于限制从一个源加载文档或脚本如何与来自另一个源的资源进行交互。同源策略要求：协议、域名、端口必须一致，否则就会跨域报错。

同源策略是Web浏览器的安全策略，服务端通信不会出现触发，通过代理转发可以完美解决。

locaton / api {
    proxy_pass: http://api.test.com/api; # 真正的目标服务器
}

5.8 Https协议配置

在购买的服务器提供商的管理后台，申请免费的SSL证书，会填写绑定的域名，待信息验证通过后，CA机构会颁发证书！获取证书之后下载，服务器类型选择Nginx，然后把下载到本地的证书文件中后缀为.crt和.key的证书文件和私钥文件上传到nginx的配置目录。

# 域名配置https协议
server {
    listen 443 ssl; #SSL 默认访问端口号为 443
    server_name www.xxx.com;
    ssl_certificate xxx.com_bundle.crt; #填写证书文件的相对路径或绝对路径
    ssl_certificate_key xxx.com.key; #填写私钥文件的相对路径或绝对路径
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #按照这个协议配置
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;                     ssl_prefer_server_ciphers on;
    location / { root 或 proxy_pass } # 打到网站主页路径或者代理到目标服务器
}

6. 完整配置代码

# 进程个数，通常CPU核数减一
worker_processes 1;

# nginx的错误日志目录
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

# nginx进程id记录文件路径
#pid        logs/nginx.pid;
events {
    # 客户端最大连接数
    worker_connections 1024;
}


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;
    sendfile on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout 65;

    #gzip  on;

    #开启gzip
    gzip on;
    #低于1kb的资源不压缩
    gzip_min_length 1k;
    #压缩级别1-9，越大压缩率越高，同时消耗cpu资源也越多，建议设置在5左右。
    gzip_comp_level 6;
    #需要压缩哪些响应类型的资源，多个空格隔开。不建议压缩图片.
    gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css image/jpeg image/gif image/png;
    #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
    gzip_disable "MSIE [1-6]\.";
    #是否添加“Vary: Accept-Encoding”响应头
    gzip_vary on;

    #静态资源缓存
    #proxy_cache_path 缓存文件路径
    #levels 设置缓存文件目录层次；levels=1:2 表示两级目录
    #keys_zone 设置缓存名字和共享内存大小.【在使用的地方要使用相同的变量名】
    #inactive 在指定时间内没人访问则被删除
    #max_size 最大缓存空间，如果缓存空间满，默认覆盖掉缓存时间最长的资源。
    proxy_cache_path /Users/a58/Desktop/cache levels=1:2
    keys_zone=cache_one:100m inactive=7d max_size=100g;

    # 负载均衡
    # 1.默认轮训，2.weight，3.ip_hash，4.fair
    upstream my_servers {
        server 127.0.0.1:9001 weight=5;
        server 127.0.0.1:9002 weight=2;
        server 127.0.0.1:9003 weight=2;
    }

    # 1.web站点
    server {
        listen 7000;
        server_name web.test.com;

        location / {
            root /Users/a58/Desktop/nginx-demo;
            # 1.如果是静态页面判断agent如果是移动端则指向移动端
            # 2.pc和m端是两个服务，可以通过proxy_pass反向代理到对应的服务
            if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
                root /Users/a58/Desktop/nginx-demo/m;
            }
            index index.html index.htm;
        }

        # 匹配到api然后代理转发到对应的服务器
        # Nginx对服务端转发不触发浏览器的同源策略
        location /api/ {
            proxy_pass http://api.test.com:7001/api/;
        }

        # 静态资源代理 &&& 静态资源缓存
        location /static {
            proxy_pass http://static.test.com:7002/static/;
            proxy_cache cache_one;
            proxy_cache_valid 200 302 24h;
            proxy_cache_valid 301 30d;
            proxy_cache_valid any 5m;
            expires 90d;
            add_header sign "The cache has been exist.";
        }

        # 图片防盗链
        location ~* \.(gif|jpg|jpeg|png|bmp|swf)$ {
            valid_referers none blocked server_names ~\.google\. ~\.baidu\. *.qq.com;
            if ($invalid_referer) {
                return 403;
            }
        }
    }

    # 负载均衡
    server {
        listen 7777;
        server_name balance.test.com;

        location / {
            proxy_pass http://my_servers/;
        }
    }

    # 最简单的反向代理
    server {
        listen 7778;
        server_name google.test.com;

        location / {
            proxy_pass https://wwww.baidu.com;
        }
    }

    # HTTPS server
    server {
        # SSL 默认访问端口号为 443
        listen 443 ssl;
        server_name www.xxx.com;
        #填写证书文件的相对路径或绝对路径
        ssl_certificate xxx.com_bundle.crt; 
        #填写私钥文件的相对路径或绝对路径
        ssl_certificate_key xxx.com.key; 
        ssl_session_timeout 5m;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; ssl_prefer_server_ciphers on;
        location / {
            root html;
            index index.html index.htm;
        }
    }
}

最后

Nginx的功能远远不止这些，上面的这些点只是我在自己个人的实际项目中，总结的一些比较常用的一些配置项，要想把一个服务运维好，还需要更多的学习和探索，愿大家始终保持对技术的好奇心、探索之心、追求之心！谢谢您的观看～

作者简介

吴旺成：路虽远，行则将至。