服务器端知识库nginx搭建文件服务器

·  阅读 2756

前言

作为一名前端开发者,使用nginx配置静态web服务器是我们经常使用的功能之一。此外对于nginx的其他功能,比如说负载均衡,反向代理之类的我们接触的比较少。但是我认为要想掌握nginx这一大利器,我们就需要去多多了解他所具备的功能,以及nginx的设计架构和原理,而如果想要快速的掌握这块,我觉得动手去使用nginx是最快的途径之一。本章记录下搭建nginx的过程。

基本实现

基本功能

  • 文件目录查看
  • 点击文件目录展示下一级
  • 文件目录下文件数量显示(待定)
  • 点击文件下载功能
  • 文件信息展示(更新时间 文件类型 文件大小)
  • 文件上传功能(待定)
  • 文件目录搜索功能(待定)
  • 文件目录自定义样式(待定 fancyindex)

相关api

在开始搭建文件服务器之前我们先要了解下实现这块的相关api,在nginx模块中有如下 ngx_http_autoindex_module,模块处理以斜杠('/')结尾的请求,并生成目录列表。

  • autoindex :启用或禁用目录列表输出。
  • autoindex_exact_size:默认为on,显示出文件的确切大小,单位是bytes。改为off后,显示出文件的大概大小,单位是kB或者MB或者GB
  • autoindex_format:html | xml | json | jsonp;
  • autoindex_localtime:默认为off,显示的文件时间为GMT时间。 改为on后,显示的文件时间为文件的服务器时间

实现步骤

  • 服务器(百度云ubuntu)
  • 安装nginx
apt install nginx
复制代码
  • 配置nginx
http{
    server{
        location /test{
            alias /var/www; //目录路径
            autoindex on;
        }
    }
}
复制代码
  • 测试/启用nginx
nginx -t //返回ok则说名语法没问题
nginx -s start
复制代码
  • 打开浏览器页面

这个是nginx自带的文件处理,样式不够美观,在真实项目中我们常常使用Nginx-Fancyindex-Theme来美化目录样式。

facyindex的配置使用

当我们不满足于nginx自带的文件服务器样式时候,我们可以使用facyindex来重新格式化其目录样式,具体操作如下

环境安装(必须在linux机器上,window没试过)

  • 下载nginx和fancyindex源代码(centos)
yum install https://extras.getpagespeed.com/redhat/7/x86_64/RPMS/nginx-module-fancyindex-1.12.0.0.4.1-1.el7.gps.x86_64.rpm

复制代码
  • 安装fancyindex
yum install nginx-module-fancyindex
复制代码
  • 加载fancyindex
load_module "modules/ngx_http_fancyindex_module.so";
复制代码

//如果系统是ubuntu那比较简单

  • 安装fancyindex
sudo apt-get install nginx-extras
复制代码

配置fancyindex

  • 基础配置
location /teset {
  alias /var/www; //目录路径
  fancyindex on;              # Enable fancy indexes.
  fancyindex_exact_size off;  # Output human-readable file sizes.
}
复制代码
  • 其他fancyindex配置
//允许在生成的清单中插入指向CSS样式表的链接。该链接将插入到内置CSS规则之后,因此您可以覆盖默认样式。
fancyindex_css_href
//指定应该将哪个文件插入到目录清单的底部。如果设置为空字符串,则发送模块提供的默认页脚。
fancyindex_footer
//指定应该将哪个文件插入到目录清单头部。如果设置为空字符串,则发送模块提供的默认页眉。
fancyindex_header
//指定将不会在生成的清单中显示的文件名列表
fancyindex_ignore
//Enables showing file times as local time. Default is “off” (GMT time).
fancyindex_localtime
复制代码

启动nginx

nginx -t
nginx -s reload
复制代码

至此我们可以实现一个比默认格式更美观的文件服务器,如下图: 这样肯定还不够的,为此我们可以引入个开源插件fancyindex-theme,这个提供了两种主题light和dark我选择了light主题进行搭建

引入fancyindex-theme

注:fancyindex-theme是基于fancyindex的插件,提供了更加优美的文件展示页面。以及一些检索操作。

  • 准备好前两步的环境
  • clone fancyindex-theme仓库
git clone https://github.com/Naereen/Nginx-Fancyindex-Theme
复制代码
  • 将light主题文件放到对应的文件夹下(及在配置文件中alias定义的路径)
cp Nginx-Fancyindex-Theme-light /var/www/Nginx-Fancyindex-Theme-light
复制代码
  • 修改nginx配置文件
{
       fancyindex_localtime on;
        fancyindex_header "/Nginx-Fancyindex-Theme-light/header.html";
        fancyindex_footer "/Nginx-Fancyindex-Theme-light/footer.html";
}
复制代码

注:如果我们在nginx中的配置location 为/test,那我们在引入fancyindex_header和fancyindex_footer是就要如下写

{
     fancyindex_header "/test/Nginx-Fancyindex-Theme-light/header.html";
        fancyindex_footer "/test/Nginx-Fancyindex-Theme-light/footer.html";
}
复制代码

另外在/Nginx-Fancyindex-Theme-light/footer.html和fancyindex_header "/Nginx-Fancyindex-Theme-light/header.html"文件中需要在引入外部文件的地方都加上前缀test

 <link rel="stylesheet" href="/test/Nginx-Fancyindex-Theme/styles.css">
<script type="text/javascript" src="/test/Nginx-Fancyindex-Theme/jquery.min.js"></script>
复制代码

这个是因为nginx路由匹配规则导致。

  • 重新启动后刷新页面如下图:

总结

本节主要是了解下nginx在搭建静态文件服务器中的使用,虽然默认的nginx文件模块已经能满足我们功能需求,但作为一名前端工程是追求友好交互是必不可少的品质之一。另外,在这个大前端时代,对于前端开发来说掌握nginx那我们就相当于在前端领域多了另一种可能。

命令总结:

  • 1.autoindex打开文件服务器功能
  • 2.alias设置文件服务器的路径
  • 3.fancyindex文件展示样式优化
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改