服務器端知識庫nginx搭建文件服務器

前言

做爲一名前端開發者，使用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那咱們就至關於在前端領域多了另外一種可能。