2020-04-10 nginx+uwsgi+Flask 文件管理系统部署遇到的问题

1、虚拟环境调用问题

clone已经创建好的虚拟环境，然后通过 source activate命令启动，发现启动的还是原路径下的虚拟环境，通过pip安装模块还会安装在原路径目录下。

解决方法：

通过记事本打开虚拟环境下bin/activate文件，修改虚拟环境路径

VIRTUAL_ENV="/home/xx/venv"

修改路径为clone后的虚拟环境路径，bin的上一层

2、nginx安装问题

离线服务器无法通过 apt-get install nginx 安装nginx

解决方法：

方法1、下载nginx相关安装包 包括zlib、pcre、openssl、和ngxin安装包并依次安装几个安装包。可能因为版本不匹配等问题导致安装失败

方法2、需找一台可以联网并且没有安装nginx(如果已经安装，可以通过sudo apt-get remove --purge nginx移除)的设备，通过命令

sudo apt-get -d install nginx

下载nginx离线包，进入缓存目录

cd /var/cache/apt/archives 

将刚下载的几个nginx相关包打包复制到需要安装的离线服务器上，解压后通过命令

dpkg -i *.deb 

将所有安装包安装。

3、nginx无法上传大文件的问题

系统架构 nginx-uwsgi-flask，开发时只运行flask，可以正常上传下载文件，包括1g左右的大文件，部署到服务器后，开启nginx和uwsgi后发现上传超过100m的文件都会失败，查看nginx-log后发现以下打印

*76 client intended to send too large body: 167862207 bytes, client: 127.0.0.1, server: 0.0.0.0, request: "POST /file/upload-file HTTP/1.1", host: "127.0.0.1:8080",

解决方法：

修改nginx 設置，打开nginx配置文件/etc/nginx/nginx.conf文件修改以下几项

http字段下添加
client_max_body_size 2048M;    #最大传输消息体大小

在server字段下添加
client_header_timeout 5m;       #读取消息头超时
client_body_timeout      5m;    #读取消息体超时
    
proxy_connect_timeout     60s;     #连接超时
proxy_read_timeout      5m;        #读取超时
proxy_send_timeout      5m;        #发送超时

4、dropzone问题

使用插件dropzone(李辉大神封装好的flask-dropzone)来进行文件的批量上传、拖拽上传功能，将dropzone嵌在form中提交，上传文件并上传form中字段内容。

实现过程中发现两个问题：

1>根据flask-dropzone的example中的in-form例子，文件上传和form提交是指向不同的url，通过submit按钮会先上传文件，文件上传完成后自动提交form，服务器端无法获取上传的文件列表。(不知道flask-dropzone有没有封装相应的方法)

解决方法：文件上传到用户的tmp文件夹下，上传成功后submit对应的url在tmp文件夹下遍历文件，保存

2>页面中form上传按钮点击以后还能再次点击，会触发form的submit，预期达到按钮点击以后置为disable的效果。

解决方法:查看flask-dropzone的代码(flask-dropzone包中__init__文件中)，看到以下代码段是控制文件上传和form提交的

dz = this; // Makes sure that 'this' is understood inside the functions below.

document.getElementById("%s").addEventListener("click", function handler(e) {
    e.currentTarget.removeEventListener(e.type, handler);
    e.preventDefault();
    e.stopPropagation();
    dz.processQueue();
});
this.on("queuecomplete", function(file) {
    // Called when all files in the queue finish uploading.
    document.getElementById("%s").click();
});

等待上传queue完成后在触发按钮的click函数，在函数内添加控制按钮的代码

dz = this; // Makes sure that 'this' is understood inside the functions below.

document.getElementById("%s").addEventListener("click", function handler(e) {
    e.currentTarget.disabled = true;    //在上传之前将按钮置灰
    e.currentTarget.removeEventListener(e.type, handler);
    e.preventDefault();
    e.stopPropagation();
    dz.processQueue();
});
this.on("queuecomplete", function(file) {
    // Called when all files in the queue finish uploading.
    document.getElementById("%s").disabled = false;  //上传完成后按钮还原
    document.getElementById("%s").click();
});