2022-6，flask+vue+uwsgi+nginx，线上部署完整流程打包配置文件

 

uwsgi配置文件

[uwsgi]
# 服务端口号，这里没有设置IP值，默认是加载服务器的IP地址
http = :8000
# flask项目地址
chdir = /home/flask_project
# wsgi文件 /home/flask_project/mange.py
module = manage:app
# 进程数
processes = 4
# 主进程
master = true
# 每个进程有2个线程
threads = 2
# 后台启动 日志输出路径
daemonize = /home/flask_project/uwsgi.log
# 保存主进程的进程号
pidfile = /home/flask_project/uwsgi.pid
# 以固定大小切分日志文件
log-maxsize = 1000
# 启动请求日志
disable-logging = true
# 设置中断时间
harakiri = 60
# 懒加载
lazy = true
lasy-apps = true

 

前端代码打包：

进入vue路径，这个路径，要在src文件夹的父路径下，

执行命令：

npm run build

执行完之后，会生成dist文件夹，这个dist就是需要放到服务器上面的前端代码。

 

nginx.conf配置文件

worker_processes 4;

events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    server {
                    listen 8090; # 80端口监听需要root权限，这里我们用8090
                    server_name 127.0.0.1;  # 这里是你项目的url地址，或者写成域名地址  www.phno2.xyz  也行。
                    access_log  /home/nginx/logs/access.log;  # 这是自己设定的nginx正常输出日志的日志地址
                    error_log  /home/nginx/logs/error.log;  # 也是自己设定的，nginx错误日志地址
                    charset  utf-8;
                    gzip on;
                    location / {
                        root  /home/vue_project/dist;  # 这里是vue项目的路径地址，vue上传服务器之前，需要执行npm run build打包，# 这里是把打包后的dist文件夹放到服务器
                        index  index.html index.htm;                        try_files  $uri  $uri/  /index.html;  # 这里是让nginx找到vue打包项目的index.html文件，这里的配置是匹配vue项目# router路由配置mode:history.url里面去掉#号
                    }

                    error_page  404           /404.html;
                    location = /404.html {
                        root  html;  # 这里404.html文件，是自己创建的一个页面。/home/nginx/nginx-1.2.2.0/html
                    }
                    error_page   500 502 503 504  /50x.html;
                    location = /50x.html { 
                        root  html;
                    }
                    # flask项目反向代理配置
                    location /api/ {
                        proxy_pass  http://127.0.0.1:8000;  # 这里就是uwsgi配置的IP和端口，写的时候需要把http带上，写完整
                        proxy_send_timeout  600;
                        proxy_read_timeout  120;
                        proxy_connect_timeout  90;
                    }
                    # 指定静态文件路径
                    location /static/{  # 这里的static是我们自己后来加上的，用于处理静态文件，这都是固定语法，
                        root  /home/vue_project/dist; 
                        expires  30d;
                        autoindex  on;
                    }
      }
}

 

到此，就全部配置完成。uwsgi的IP端口，跟nginx挂载上了，前端项目打包路径也挂载到nginx上了。前端代码中，ajax请求，都一律改写成相对路由，即从http：//localhost：8000/api/index 改成 /api/index，然后再打包上传服务器。nginx启动之后，就会自动拼接上前端代码中路由的IP端口部分。部署完成之后，前端页面的访问地址：“20.80.80.80:8090/home” IP是服务器的IP，端口是nginx配置的端口，/home是前端router相对路由地址。