Flask+Vue+PyTorch深度学习前后端分离部署，配合Gunicorn+Nginx+阿里云服务器（Ubuntu-18、PyTorch、Tensorflow）

我将我的毕业设计成果网站部署到了阿里云：WCT Style Transfer

毕业设计参考GitHub仓库：sketch-to-art

前期准备：

一、系统环境配置：

• 阿里云系统镜像最好选择Ubuntu系统（CentOS安装Tensoflow会踩很多坑），我选择镜像市场的免费镜像：NVIDIA GPU Cloud VM Image with TensorFlow，已经自带python2.7+和python3.6+，区分python和python3。
• 需要自己安装pip3：apt-get install python3-pip
• 若要安装python3.7+，可参考，但没必要再安装：《在阿里云CentOS服务器上安装Python3.7并设置为默认Python》
• nginx安装：cd ~，apt-get install nginx。

二、源代码文件上传：

• 确保项目在本地已经运行良好，前端用npm run build打包生成dist文件夹，这是前端源代码唯一需要上传的。
• 在本地项目中使用pip freeze > requirements.txt生成python项目的依赖。
• 我使用FileZilla远程连接上传（最好在home目录下新建一个文件夹，保证服务器对文件具有访问权限），不要将node.js的包文件夹node_models和python的包文件夹venv文件夹上传，会很浪费时间。
• 在服务器上创建python虚拟环境：pip install virtualenv，cd 到项目所在目录下：virtualenv venv，激活虚拟环境：source venv/bin/activate。
• 确认激活之后：（venv）root@iZwz96mzapb0uvavnm6mq6Z:~#，到requirements.txt所在目录用pip安装python依赖：pip install -r requirements.txt，由于自带阿里云镜像，安装过程非常快！gunicorn需要单独安装：pip install gunicorn。
• 至此系统环境已经配好。

终端运行：

一、gunicorn运行flask实例：

4个参数：

• -w 4：开辟4个进程
• -b 127.0.0.1:5003：绑定服务器本地的5003端口
• app_stylize:app：指定可运行的flask脚本文件app_stylize.py，以及该文件中的flask实例app

(venv) root@iZwz96mzapb0uvavnm6mq6Z:/home/wct/server# gunicorn -w 4 -b 127.0.0.1:5003 app_stylize:app
[2020-06-04 10:51:38 +0800] [31318] [INFO] Starting gunicorn 20.0.4
[2020-06-04 10:51:38 +0800] [31318] [INFO] Listening at: http://127.0.0.1:5002 (31318)
[2020-06-04 10:51:38 +0800] [31318] [INFO] Using worker: sync
[2020-06-04 10:51:38 +0800] [31323] [INFO] Booting worker with pid: 31323
[2020-06-04 10:51:38 +0800] [31325] [INFO] Booting worker with pid: 31325
[2020-06-04 10:51:38 +0800] [31327] [INFO] Booting worker with pid: 31327
[2020-06-04 10:51:38 +0800] [31330] [INFO] Booting worker with pid: 31330
......

关闭gunicorn：通过进程号关闭

(venv) root@iZwz96mzapb0uvavnm6mq6Z:/home/wct/server# pstree -ap | grep gunicorn
  |-gunicorn,32516 /home/wct/server/venv/bin/gunicorn -w 1 -b 127.0.0.1:5003 -D app_stylize:app
  |   `-gunicorn,32519 /home/wct/server/venv/bin/gunicorn -w 1 -b 127.0.0.1:5003 -D app_stylize:app
  |       |-{gunicorn},32524
  |       |-{gunicorn},32526
  |       |-{gunicorn},32527
  |       |-{gunicorn},32528
  |       |-{gunicorn},32530
  |       |-{gunicorn},32531
  |       |-{gunicorn},32532
  |       |-{gunicorn},32533
  |       |-{gunicorn},32534
  |       `-{gunicorn},32535
  |           |-grep,32580 --color=auto gunicorn

(venv) root@iZwz96mzapb0uvavnm6mq6Z:/home/wct/server# kill -9 32516
(venv) root@iZwz96mzapb0uvavnm6mq6Z:/home/wct/server# pstree -ap | grep gunicorn
  |           |-grep,32595 --color=auto gunicorn

下面的方式多了参数-D表示以守护进程在后台运行，终端关闭也不会挂掉，这是最终部署的运行方式。

(venv) root@iZwz96mzapb0uvavnm6mq6Z:/home/wct/server# gunicorn -w 4 -b 127.0.0.1:5003 -D app_stylize:app

二、查找nginx：

root@iZwz96mzapb0uvavnm6mq6Z:/etc/nginx/sites-available# find / -name nginx
/usr/share/nginx
/usr/share/doc/nginx
/usr/lib/nginx
/usr/sbin/nginx
/etc/logrotate.d/nginx
/etc/nginx
/etc/init.d/nginx
/etc/default/nginx

找到nginx.conf文件或者sites-available文件夹

root@iZwz96mzapb0uvavnm6mq6Z:~# cd /etc/nginx
root@iZwz96mzapb0uvavnm6mq6Z:/etc/nginx# ls
conf.d        fastcgi_params  koi-win     modules-available  nginx.conf    scgi_params      sites-enabled  uwsgi_params
fastcgi.conf  koi-utf         mime.types  modules-enabled    proxy_params  sites-available  snippets       win-utf

可以直接修改nginx.conf文件，但一般只对sites-available/default进行修改：

sites-available/default:

# Default server configuration
#
server {  # 监听客户端的Http请求（让服务器找到前端页面）
        # root /var/www/html;
        # index index.html index.htm index.nginx-debian.html;

        # server_name _;
        listen 80;  # 监听端口
        server_name wct.shabng.ink;  # 阿里云服务器域名或IP地址
        root /home/wct/dist;  # npm run build 打包生成的前端静态文件夹
        index index.html;  # 前端静态文件的入口html文件

        location / {  # nginx将请求转发到此处
                root /home/wct/dist;
                index index.html;
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ /index.html last;
        }
}

server {  # 监听前端的请求（让前端axios的请求达到后端运行的地址端口）
        listen 5002;  # 前端我将请求发到阿里云服务器的这个端口
        server_name wct.shbang.ink;

        location / {  # 将请求转发到后端flask的运行地址
                proxy_pass http://127.0.0.1:5003;  # gunicorn命令行中-b后面的地址，注意端口要不同于监听的端口
                proxy_set_header Host $host;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
}

nginx.conf:

把sites-available/default中的server放到http中即可

user root;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
        worker_connections 768;
        # multi_accept on;
}

http {

        ##
        # Basic Settings
        ##

        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        keepalive_timeout 65;
        types_hash_max_size 2048;
        # server_tokens off;

        # server_names_hash_bucket_size 64;
        # server_name_in_redirect off;

        include /etc/nginx/mime.types;
        default_type application/octet-stream;

        ##
        # SSL Settings
        ##

        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
        ssl_prefer_server_ciphers on;

        ##
        # Logging Settings
        ##

        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        ##
        # Gzip Settings
        ##

        gzip on;

        # gzip_vary on;
        # gzip_proxied any;
        # gzip_comp_level 6;
        # gzip_buffers 16 8k;
        # gzip_http_version 1.1;
        # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

        ##
        # Virtual Host Configs
        ##

        include /etc/nginx/conf.d/*.conf;
        include /etc/nginx/sites-enabled/*;
}                                                                                                                                                                   

配置文件编辑完成后：

root@iZwz96mzapb0uvavnm6mq6Z:/etc/nginx/sites-available# nginx -t  # 检查配置文件语法，如下则正确：
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

启动nginx：

root@iZwz96mzapb0uvavnm6mq6Z:/etc/nginx/sites-available# service nginx start  # 启动nginx

启动成功后即可在浏览器输入nginx中配置的server_name访问你指定的前端入口文件index.html

关闭nginx：

root@iZwz96mzapb0uvavnm6mq6Z:/etc/nginx/sites-available# service nginx stop  # 启动nginx