教你在容器中使用nginx搭建上傳下載的文件服務(wù)器

更新時間：2022年05月10日 17:13:30 作者：witton

這篇文章主要介紹了容器中使用nginx搭建支持上傳下載的文件服務(wù)器,在這需要注意為了讓nginx支持文件上傳，需要下載并運行帶有nginx-upload-module模塊的容器，需要的朋友可以參考下

一、安裝nginx容器

為了讓nginx支持文件上傳，需要下載并運行帶有nginx-upload-module模塊的容器：

sudo podman pull docker.io/dimka2014/nginx-upload-with-progress-modules:latest
sudo podman -d --name nginx -p 83:80 docker.io/dimka2014/nginx-upload-with-progress-modules

該容器同時帶有nginx-upload-module模塊和nginx-upload-progress-module模塊。

注意該容器是Alpine Linux ，沒有bash，有些命令與其它發(fā)行版本的Linux不一樣。

使用下面的命令進入容器：

sudo podman exec -it nginx /bin/sh

作為文件服務(wù)器，需要顯示本地時間，默認不是本地時間。通過下面一系列命令設(shè)置為本地時間：

apk update
apk add tzdata
echo "Asia/Shanghai" > /etc/timezone
rm -rf /etc/localtime
cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime
apk del tzdata

創(chuàng)建文件服務(wù)器的根目錄：

mkdir -p /nginx/share

二、配置nginx

配置文件的路徑為/etc/nginx/conf.d/default.conf，作為

server {
    ……
    charset utf-8; # 設(shè)置字符編碼，避免中文亂碼
    location / {
            root   /nginx/share; # 根目錄
            autoindex   on;  # 開啟索引功能
            autoindex_exact_size off; # 關(guān)閉計算文件確切大?。▎挝籦ytes），只顯示大概大?。▎挝籯b、mb、gb）
            autoindex_localtime on; # 顯示本地時間
        }
}

此時我們的文件服務(wù)就配置好了，需要使用下面的命令讓配置生效：

nginx -s reload

在這里插入圖片描述

三、支持文件上傳

1. 配置nginx

上面的配置已經(jīng)完成文件服務(wù)器的配置了，但是不能上傳文件，想要上傳文件，還需要做如下配置：

server {
    ……
    charset utf-8; # 設(shè)置字符編碼，避免中文亂碼
    client_max_body_size 32m; 
    upload_limit_rate 1M; # 限制上傳速度最大1M
    
    # 設(shè)置upload.html頁面路由
    location = /upload.html {                                                        
            root /nginx;  # upload.html所在路徑                                                       
    }

    location /upload {
            # 限制上傳文件最大30MB
            upload_max_file_size 30m;
            # 設(shè)置后端處理交由@rename處理。由于nginx-upload-module模塊在存儲時并不是按上傳的文件名存儲的，所以需要自行改名。
            upload_pass @rename;
            # 指定上傳文件存放目錄，1表示按1位散列，將上傳文件隨機存到指定目錄下的0、1、2、...、8、9目錄中（這些目錄要手動建立）
            upload_store /tmp/nginx 1;
            # 上傳文件的訪問權(quán)限，user:r表示用戶只讀，w表示可寫
            upload_store_access user:r;

            # 設(shè)置傳給后端處理的表單數(shù)據(jù)，包括上傳的原始文件名，上傳的內(nèi)容類型，臨時存儲的路徑
            upload_set_form_field $upload_field_name.name "$upload_file_name";
            upload_set_form_field $upload_field_name.content_type "$upload_content_type";
            upload_set_form_field $upload_field_name.path "$upload_tmp_path";
            upload_pass_form_field "^submit$|^description$";

            # 設(shè)置上傳文件的md5值和文件大小
            upload_aggregate_form_field "${upload_field_name}_md5" "$upload_file_md5";
            upload_aggregate_form_field "${upload_field_name}_size" "$upload_file_size";

            # 如果出現(xiàn)下列錯誤碼則刪除上傳的文件
            upload_cleanup 400 404 499 500-505;
     }

    location @rename {
            # 后端處理
            proxy_pass http://localhost:81;
    }
}

上面的配置中，臨時存儲時是按1位散列來存儲的，需要在上傳目錄下手動創(chuàng)建0~9幾個目錄。

 mkdir -p /tmp/nginx
 cd /tmp/nginx
 mkdir 1 2 3 4 5 6 7 8 9 0
 chown nginx:root . -R

2. 添加upload.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>上傳</title>
</head>
<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<form name="upload" method="POST" enctype="multipart/form-data" action="upload">
<input type="file" name="file"/>
<input type="submit" name="submit" value="上傳"/>
</form>
</body>
</html>

3. 添加后面的處理服務(wù)

需要先安裝python及所需的庫

apk add python3
pip3 install bottle
pip3 install shutilwhich

python服務(wù)源碼：

#!/usr/bin/python3
# -*- coding: utf-8 -*-

from bottle import *
import shutil

@post("/upload")
def postExample():
    try:
        dt = request.forms.dict
        filenames = dt.get('file.name')
        tmp_path = dt.get("file.tmp_path")
        filepaths = dt.get("file.path")
        count = filenames.__len__()
        dir = os.path.abspath(filepaths[0])
        for i in range(count):
            print("rename %s to %s" % (tmp_path[i],  os.path.join(dir, filenames[i])))
            target = os.path.join(dir, filenames[i])
            shutil.move(tmp_path[i], target)
            shutil.chown(target, "nginx", "root") # 由于shutil.move不會保持用戶歸屬，所以需要顯示修改，否則訪問時會報403無訪問權(quán)限
    except Exception as e:
        print("Exception:%s" % e)
        redirect("50x.html") # 如果是在容器中部署的nginx且映射了不同的端口，需要指定IP，端口
    redirect('/') # 如果是在容器中部署的nginx且映射了不同的端口，需要指定IP，端口

run(host='localhost', port=81)

四、獲取上傳進度

1.修改配置

# 開辟一個空間proxied來存儲跟蹤上傳的信息1MB
upload_progress proxied 1m;
server {
    ……
    location ^~ /progress {
        # 報告上傳的信息
        report_uploads proxied;
    }
    location /upload {
        ...
        # 上傳完成后，仍然保存上傳信息5s
        track_uploads proxied 5s;
    }
}

2. 修改上傳頁面

<form id="upload" enctype="multipart/form-data" action="/upload" method="post" onsubmit="openProgressBar(); return true;">
    <input name="file" type="file" label="fileupload" />
    <input type="submit" value="Upload File" />
</form>
<div>
    <div id="progress" style="width: 400px; border: 1px solid black">
        <div id="progressbar" style="width: 1px; background-color: black; border: 1px solid white"> </div>
    </div>
   <div id="tp">(progress)</div>
</div>
<script type="text/javascript">
    var interval = null;
    var uuid = "";
    function openProgressBar() {
        for (var i = 0; i < 32; i++) {
            uuid += Math.floor(Math.random() * 16).toString(16);
        }
        document.getElementById("upload").action = "/upload?X-Progress-ID=" + uuid;
        /* 每隔一秒查詢一下上傳進度 */
        interval = window.setInterval(function () {
            fetch(uuid);
        }, 1000);
    }
    function fetch(uuid) {
        var req = new XMLHttpRequest();
        req.open("GET", "/progress", 1);
        req.setRequestHeader("X-Progress-ID", uuid);
        req.onreadystatechange = function () {
            if (req.readyState == 4) {
                if (req.status == 200) {
                    var upload = eval(req.responseText);
                    document.getElementById('tp').innerHTML = upload.state;
                    /* 更新進度條 */
                    if (upload.state == 'done' || upload.state == 'uploading') {
                        var bar = document.getElementById('progressbar');
                        var w = 400 * upload.received / upload.size;
                        bar.style.width = w + 'px';
                    }
                    /* 上傳完成，不再查詢進度 */
                    if (upload.state == 'done') {
                        window.clearTimeout(interval);
                    }
                    if (upload.state == 'error') {
                        window.clearTimeout(interval);
                        alert('something wrong');
                    }
                }
            }
        }
        req.send(null);
    }
</script>

在這里插入圖片描述