Press "Enter" to skip to content

Nginx配置索引(目录浏览),美化索引页面,配置目录密码保护

本文演示了为Nginx配置索引(目录浏览),美化索引页面,配置目录密码保护的全部过程,全部完成以后的效果如http://soft.vpser.net/所示。

1,安装Nginx,并加入FancyIndex插件
FancyIndex是一个美化插件,可以引入自定义HTML内容用于美化索引页面。如果仅仅需要开启目录浏览而不需要美化,可以不引入此插件。

$ yum install gcc gcc-c++ make openssl openssl-devel

$ wget http://sourceforge.net/projects/pcre/files/pcre/8.33/pcre-8.33.tar.gz
$ tar -zxvf pcre-8.33.tar.gz
$ cd pcre-8.33
$ ./configure
$ make && make install
$ cd ../

$ groupadd www
$ useradd -s /sbin/nologin -g www www
$ git clone https://github.com/aperezdc/ngx-fancyindex.git ngx-fancyindex

$ wget http://nginx.org/download/nginx-1.6.0.tar.gz
$ tar zxvf nginx-1.6.0.tar.gz
$ cd nginx-1.6.0/
$ ./configure --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_gzip_static_module --add-module=../ngx-fancyindex
$ make && make install
$ ln -s /usr/local/nginx/sbin/nginx /usr/bin/nginx

$ git clone https://github.com/ixbear/nginx
$ mv nginx/nginx.conf /usr/local/nginx/conf/
$ mv nginx/init.d.nginx /etc/init.d/nginx
$ chmod +x /etc/init.d/nginx
$ chkconfig --level 345 nginx on
$ /etc/init.d/nginx start

注意,这里可能会出现错误提示“error while loading shared libraries: libpcre.so.1: cannot open shared object file: No such file or directory”
解决办法:ln -s /usr/local/lib/libpcre.so.1 /lib64

2,打开Nginx索引功能,并美化索引页面

$ vim /usr/local/nginx/conf/nginx.conf  #作如下修改
……
server
        {
                listen       80;
                server_name www.lnmp.org;
                index index.html index.htm index.php;
                root  /home/wwwroot;
                autoindex off;              #如果开启了fancyindex,建议关闭此项
                autoindex_exact_size off;  #人性化方式显示大小
                autoindex_localtime on;    #显示服务器时间
                fancyindex on;             #开启fancyindex
                fancyindex_exact_size off;
                fancyindex_name_length  100; #列表文件名长度
                fancyindex_header /.header.html;
                fancyindex_footer /.footer.html;
……

根据如上配置文件,可以看出网站的根目录是/home/wwwroot。因此我们需要在根目录建立两个文件:header.html和footer.html。

$ vim /home/wwwroot/.header.html  #输入如下内容
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style type="text/css" media="screen">
body,html {background:#fff;font-family: "Lucida Grande",Calibri,Arial;font-size: 13pt;color: #333;background: #f8f8f8;}
tr.e {background:#f4f4f4;}
th,td {padding:0.1em 0.5em;}
th {text-align:left;font-weight:bold;background:#eee;border-bottom:1px solid #aaa;}
#top1 {width:80%; font-size:28px; margin: 0 auto 5px auto;}
#top2 {width:80%; font-size:18px; margin: 0 auto 5px auto;}
#footer {width:80%;margin: 0 auto; padding: 10pt 0;font-size: 10pt;text-align:center;}
#footer a {font-size: 14px; font-weight: normal; text-decoration: underline;}
#list {border:1px solid #aaa;width:80%;margin: 0 auto;padding: 0;}
a {color: #b00;font-size: 11pt;font-weight: bold;text-decoration: none;}
a:hover {color: #000;}
#readme {padding:0;margin:1em 0;border:none;width:100%;}
</style>
<script type="text/javascript">// <![CDATA[function ngx_onload(){var f=document.getElementById('readme');if(!(f&&f.contentDocument))return;f.style.height=f.contentDocument.body.offsetHeight+'px';f.contentDocument.body.style.padding='0';f.contentDocument.body.style.margin='0';}// ]]></script>
<title>Inspur Linux OS Download Center</title>
</head>
<body onload="ngx_onload()">
<h1 id="top1">Inspur Linux OS Download Center</h1>
<h1 id="top2">Directory listing of
$ vim /home/wwwroot/.footer.html  #输入如下内容
<table id="footer" cellpadding="0" cellspacing="1">
<thead><tr><td colspan="3">本页面由系统软件部研发二处负责维护</td></tr><thead>
</table></body></html>

3,为目录配置密码保护
根据上一步骤中的配置文件,可以看出网站的根目录是/home/wwwroot。假设网站根目录下有一个名为repo的隐私目录,下面我们为此隐私目录添加密码验证。

$ vim /usr/local/nginx/conf/nginx.conf  #作如下修改
……
server
        {
                listen       80;
                server_name www.lnmp.org;
                index index.html index.htm index.php;
                root  /home/wwwroot;
                autoindex off;
                autoindex_exact_size off;
                autoindex_localtime on;
                fancyindex on;
                fancyindex_exact_size off;
                fancyindex_header /.header.html;
                fancyindex_footer /.footer.html;

                location /repo {
                        auth_basic "input you user name and password";
                        auth_basic_user_file /home/wwwroot/repo/.htpasswd;
                }
……

其中,auth_basic是弹出的文字提示,而.htpasswd则是记录登陆用户名与密码的文件。该文件可用Apache的htpasswd工具创建。查看创建.htpasswd文件的方法

2014.12.06更新:
发现了一个更好看的Fancyindex-Theme:https://github.com/TheInsomniac/Nginx-Fancyindex-Theme
页面上给出了主题的缩略图,拿来测试了一下,整个界面看起来非常简洁大方,只是没有了页面大标题。

2014.12.19更新:
终于解决了文件名长度问题,参考http://forum.nginx.org/read.php?2,124400,167420,请参考下方更新

$ vim ngx-fancyindex/ngx_http_fancyindex_module.c
……
#define NGX_HTTP_FANCYINDEX_PREALLOCATE  50  #新版本可能取消了此项
#define NGX_HTTP_FANCYINDEX_NAME_LEN     50
……

2016.01.11更新:
关于文件名长度问题,可直接在nginx.conf中添加fancyindex_name_length项指定文件名长度,不再需要修改ngx-fancyindex/ngx_http_fancyindex_module.c文件。

2015.07.09更新:
fancyindex并不是autoindex的补充,今天发现有些目录无法浏览,点击没有任何反应,于是尝试关闭audoindex,一切正常。因此建议开启fancyindex的同时关闭autoindex。

One Comment

  1. Anonymous 2018-03-19

Leave a Reply

Your email address will not be published. Required fields are marked *