欢迎您, 来到 宁时修博客.^_^

Nginx系列---6、搭建一个简单的静态资源web服务器

2019/07/25 言则行 Nginx 370
Nginx系列

一、准备

    前几篇文章已经编译安装好了Nginx,现在要搭建一个 静态资源 web服务器,我已经把 Bootstrap中文网的首页下载下来作为演示文件。

                    730.png

    把这些文件上传到nginx服务器上:

[root@lynn ~]# cd /usr/local/nginx-1.16.0/
[root@lynn nginx-1.16.0]# mkdir bootstrap
[root@lynn nginx-1.16.0]# ll
total 40
drwxr-xr-x 3 nobody nobody 4096 Jul 25 10:51 bootstrap
drwx------ 2 nobody nobody 4096 Jul 23 21:00 client_body_temp
drwxr-xr-x 2 nobody nobody 4096 Jul 25 10:52 conf
drwx------ 2 nobody nobody 4096 Jul 23 21:00 fastcgi_temp
drwxr-xr-x 2 nobody nobody 4096 Jul 23 16:16 html
drwxr-xr-x 2 nobody nobody 4096 Jul 23 21:16 logs
drwx------ 2 nobody nobody 4096 Jul 23 21:00 proxy_temp
drwxr-xr-x 2 nobody nobody 4096 Jul 23 21:04 sbin
drwx------ 2 nobody nobody 4096 Jul 23 21:00 scgi_temp
drwx------ 2 nobody nobody 4096 Jul 23 21:00 uwsgi_temp
[root@lynn nginx-1.16.0]# cd bootstrap/
[root@lynn bootstrap]# ll
total 100
drwxr-xr-x 2 nobody nobody  4096 Jul 25 10:51 bootstrap_files
-rw-r--r-- 1 nobody nobody 91640 Jul 25 10:48 bootstrap.html


二、配置nginx.conf


    然后配置nginx.conf文件:

[root@lynn bootstrap]# cd ../conf/
[root@lynn conf]# vim nginx.conf

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#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;

    server {
        listen       80;  # 监听端口
        server_name  132.232.32.154;  # nginx虚拟主机名,IP或域名

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            alias  bootstrap/;  # 静态资源路径,这里指定了相对路径,alias和root有些区别
            index  bootstrap.html index.html index.htm; # 指定首页,默认index.html
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

}

# 保存重载nginx
[root@lynn conf]# /usr/local/nginx-1.16.0/sbin/nginx -s reload

    浏览器访问 http://132.232.32.154

16.png


    这样,一个简单的静态资源 web服务器已经搭建好了。



三、gzip 模块压缩文件

    如果你按 F12 打开了浏览器调试,在访问 http://132.232.32.154 时,会有如下显示:

3031.png

    会有发现:服务器传到本地浏览器上的文件和服务器上的文件大小一样

    这样传输会很消耗服务器带宽,所以需要经过压缩处理后再传给本地浏览器,减少服务器带宽消耗。


    官方gzip模块用法介绍:http://nginx.org/en/docs/http/ngx_http_gzip_module.html


    配置nginx.conf文件,添加gzip模块配置:

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#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_buffers  16 8k;
    gzip_comp_level  5;  # 压缩级别,1 - 9,数字越大压缩的越好,也越占用CPU时间
    gzip_min_length  100; # 最小压缩文件大小,小于设置值的文件将不会压缩
    gzip_proxied   any;
    gzip_types  text/plain text/css text/javascript; # 压缩类型,mime.types 文件可以查看
    gzip_vary on; # 是否在http header中添加Vary: Accept-Encoding,建议开启

    server {
        listen       80;  # 监听端口
        server_name  132.232.32.154;  # nginx虚拟主机名,IP或域名

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            alias  bootstrap/;  # 静态资源路径,这里指定了相对路径,alias和root有些区别
            index  bootstrap.html index.html index.htm; # 指定首页,默认index.html
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

}

    重启nginx,清空浏览器缓存之后,再访问 http://132.232.32.154。能看到调试界面传输文件大小的变化:

017.png


    再查看http响应头:

308.png

    Content Encoding: gzip  表明了是使用了gzip压缩传输的文件。



四、文件下载、图片浏览服务

    有时候需要文件下载、图片浏览,使用Nginx可以自建图片服务器、文件服务器。

    这个时候需要用nginx  autoindex模块,官方介绍:http://nginx.org/en/docs/http/ngx_http_autoindex_module.html

    

    配置nginx.conf:

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#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_buffers  16 8k;
    gzip_comp_level  5;  # 压缩级别,1 - 9,数字越大压缩的越好,也越占用CPU时间
    gzip_min_length  100; # 最小压缩文件大小,小于设置值的文件将不会压缩
    gzip_proxied   any;
    gzip_types  text/plain text/css text/javascript; # 压缩类型,mime.types 文件可以查看
    gzip_vary on; # 是否在http header中添加Vary: Accept-Encoding,建议开启

    server {
        listen       80;  # 监听端口
        server_name  132.232.32.154;  # nginx虚拟主机名,IP或域名

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            alias  bootstrap/;  # 静态资源路径,这里指定了相对路径,alias和root有些区别
            index  bootstrap.html index.html index.htm; # 指定首页,默认index.html
        }

        location /files {
            alias  bootstrap/bootstrap_files;
            autoindex on; # 启用=目录列表输出,处理以斜杠字符('/')结尾的请求,并生成目录列表
        }   
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

}


    保存重启nginx,访问 http://132.232.32.154/files/,就会列出各文件列表了:

26.png


    点击图片就可以浏览了:

942.png


    点击文件可以下载到本地。

点赞
说说你的看法

所有评论: (1)

# 加入组织

1、用手机QQ扫左侧二维码

2、搜Q群:1058582137

3、点击 宁时修博客交流群