Flask + Vue + PyTorch 前后端分离部署，配合 Gunicorn + Nginx + 阿里云ECS

最新推荐文章于 2024-02-18 19:29:00 发布

Skr.B

最新推荐文章于 2024-02-18 19:29:00 发布

阅读量1.5k

点赞数 1

分类专栏：深度学习 Python Web 文章标签： nginx flask vue pytorch 阿里云

本文链接：https://blog.csdn.net/Run_Bomb/article/details/106543790

版权

Python Web 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

深度学习

8 篇文章 1 订阅

订阅专栏

参考 GitHub 项目：sketch-to-art

前期准备：

一、系统环境配置：

选用默认设定的系统。
安装 miniconda：
- 使用 wget https://mirrors.tuna.tsinghua.edu.cn/anaconda/miniconda/Miniconda3-py39_4.10.3-Linux-x86_64.sh，从 Miniconda 清华镜像下载。
- 使用 bash Miniconda3-py39_4.10.3-Linux-x86_64.sh 运行自动安装。
nginx 安装：cd ~，apt-get install nginx。

若没有 apt-get，则使用 yum。

二、源代码文件上传：

确保项目在本地已经运行良好，前端用 npm run build 打包生成 dist 文件夹，这是唯一需要上传的前端代码。
在本地项目中使用 pip freeze > requirements.txt 生成 python 项目的依赖。
我使用FileZilla远程连接上传（最好在 home 目录下新建一个文件夹，保证服务器对文件具有访问权限），不要将 node.js 的包文件夹 node_models 和 python 的包文件夹 venv 文件夹上传，会很浪费时间。

有这个时间都可以在服务器上安装好 nodejs 来当场运行配置了 😆
在服务器上创建 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 个 worker。
-b 127.0.0.1:5003：绑定服务器本地的5003端口。
app_stylize:app：指定可运行的flask脚本文件app_stylize.py，以及该文件中的flask实例app。

一般开辟 2 * cpu核数 + 1 个 worker。参考 gunicorn supervisor nginx 配置问题，该给gunicorn几个worker，有没有必要上gevent

(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 其中之一：

1. 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;
        }
}

2. nginx.conf：

差别不大，把上面的 server 放到 http 中即可

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 4096;

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

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    # server {
    #     listen       80;
    #     listen       [::]:80;
    #     server_name  _;
    #     root         /usr/share/nginx/html;

    #     # Load configuration files for the default server block.
    #     include /etc/nginx/default.d/*.conf;

    #     error_page 404 /404.html;
    #         location = /40x.html {
    #     }

    #     error_page 500 502 503 504 /50x.html;
    #         location = /50x.html {
    #     }
    # }

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

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

            location / {  # nginx将请求转发到此处
                    root /home/codesrc/seg_ptvue/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 seg.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;
            }
    }


# Settings for a TLS enabled server.
#
#    server {
#        listen       443 ssl http2;
#        listen       [::]:443 ssl http2;
#        server_name  _;
#        root         /usr/share/nginx/html;
#
#        ssl_certificate "/etc/pki/nginx/server.crt";
#        ssl_certificate_key "/etc/pki/nginx/private/server.key";
#        ssl_session_cache shared:SSL:1m;
#        ssl_session_timeout  10m;
#        ssl_ciphers PROFILE=SYSTEM;
#        ssl_prefer_server_ciphers on;
#
#        # Load configuration files for the default server block.
#        include /etc/nginx/default.d/*.conf;
#
#        error_page 404 /404.html;
#            location = /40x.html {
#        }
#
#        error_page 500 502 503 504 /50x.html;
#            location = /50x.html {
#        }
#    }

}

配置文件编辑完成后：

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

别的版本的 linux 系统可能是这样的命令：

systemctl start nginx  # 开启 
systemctl stop nginx  # 关闭

Skr.B

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
Flask + Vue + PyTorch 前后端分离部署，配合 Gunicorn + Nginx + 阿里云ECS

前期准备：一、系统环境配置：阿里云系统镜像最好选择Ubuntu系统（CentOS安装Tensoflow会踩很多坑），我选择镜像市场的免费镜像：NVIDIA GPU Cloud VM Image with TensorFlow，已经自带python2.7+和python3.6+，区分python和python3。python3.7+安装参考：《在阿里云CentOS服务器上安装Python3.7并设置为默认Python》nginx安装：cd ~，apt-get install nginx。二、源代
复制链接

扫一扫