Nginx核心要领三：Nginx搭建静态资源服务器

梦里梦外; 2022-01-27 06:51 308阅读 0赞

通过上篇文章，可以了解到Nginx的进程模型和常用命令，本篇将基于Nginx搭建一个静态资源服务器

Nginx对静态资源 (html、css、img、js等) 的处理性能是Apache、Tomcat的很多倍，所以使用Nginx处理静态资源可以提升性能

我将以之前开发中用到的html静态资源进行搭建，是个H5 页面，上传到服务器的 /home目录，里面有 html、css、img、js等  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXl1MTk5MTEwMTY1MjA_size_16_color_FFFFFF_t_70]

###### 1.搭建静态资源服务器 ######

静态资源准备好后，进入nginx安装目录，修改配置，启动nginx

#进入nginx目录
    cd /usr/local/nginx
    #修改配置文件
    vim conf/nginx.conf

修改后的配置如下：

#将worker进程数修改的和CPU核心数相同;
    worker_processes  2;
    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"';
        sendfile        on;
        keepalive_timeout  65;
        #gzip  on;
        server {
            listen       80;
            server_name  localhost;
            #日志记录每一次访问的信息
            access_log  logs/zy.access.log  main;
            #允许跨域访问
            add_header 'Access-Control-Allow-Origin' '*';
            location / {
                #root   html;
                #使用alias指令，效果和 root 相似，参数为我们上传的静态资源的目录
                alias /home/lkh/; 
                index  index.html index.htm;
            }
        }
    }

启动nginx ，./sbin/nginx或重启 ./sbin/nginx -s reload  
访问静态资源 192.168.68.136（虚拟机地址），可看到资源正常展示出来了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXl1MTk5MTEwMTY1MjA_size_16_color_FFFFFF_t_70 1]  
再看看nginx/logs/zy.access.log日志，可从日志中看到 客户端的IP、客户端浏览器使用GET方法、访问了那些资源、访问地址是 http://192.168.68.136/index.html 、使用的浏览器内核信息、浏览器版本等

![在这里插入图片描述][20190525191233659.png]

###### 2.使用Gzip压缩提升性能 ######

客户端与服务器之间进行数据传输时，如果能把数据进行压缩，减少传输流量、传输时间，为更多用户提供更快的响应给，nginx使用Gzip压缩也是要更改nginx.conf配置文件  
在上面的配置文件中可以看到 \#gzip on; 配置，把注释打开，并加入压缩的其它配置  
配置文件内容如下：

gzip  on;#开启gzip压缩
    gzip_min_length 1k; #小于 1024 字节的文件不要压缩了，意义不大，还要消耗cpu资源
    gzip_buffers 4 16k;
    gzip_comp_level 2;  #压缩级别1-10，数字越大压缩的越好，时间也越长，看心情随便改吧
    gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

重启nginx，再访问http://192.168.68.136/index.html ，通过浏览器的网络查看工具，可以看到html页面传输时只有 2.67kb，但它的真正大小有 8.69kb，这样就表示 Gzip 压缩启用成功了

![在这里插入图片描述][20190525192022167.png]  
我们还可以从http请求头与响应头中看到  
Accept-Encoding: gzip,deflate \#请求头支持gzip压缩  
Content-Encoding: gzip \#响应头传递回来的是gzip压缩后的数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXl1MTk5MTEwMTY1MjA_size_16_color_FFFFFF_t_70 2]

###### 3.更多 ######

在开发项目时，可以把静态资源如：css、js、image等文件单独部署在nginx上，项目中引用静态资源的地址，这样可以nginx不用把请求转发后上游tomcat服务中，1.减少网络传输，2.nginx静态资源处理性能大大高于tomcat

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXl1MTk5MTEwMTY1MjA_size_16_color_FFFFFF_t_70]: /images/20220127/21e204df9b734c4785a1cacc45afddb2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXl1MTk5MTEwMTY1MjA_size_16_color_FFFFFF_t_70 1]: /images/20220127/251767fcbb6947e2a0048fac6514fa27.png
[20190525191233659.png]: /images/20220127/8aaed8f86b2f4d2bb88b410cb0b59e84.png
[20190525192022167.png]: /images/20220127/3b1e06d4d85949c58881df1eae1b4bb2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXl1MTk5MTEwMTY1MjA_size_16_color_FFFFFF_t_70 2]: /images/20220127/5ab7eed6ef2048f795773e0a5ca913b3.png