flask vue nginx uwsgi 前后端分离公网部署
安装依赖
安装uwsgi web服务器、nginx(高性能的HTTP和反向代理web服务器)
创建conda虚拟环境
在该环境下，安装flask以及flask后端运行依赖的包。
配置uwsgi，使得flask后端项目运行其中。
flask配置
app.py
from flask import *
from flask_cors import CORS, cross_origin
from werkzeug.utils import secure_filename
import os
import main
app = Flask(__name__, static_folder='static', static_url_path='/static')
CORS(app, supports_credentials=True)
static_host = "static/"
host = 'http://127.0.0.1:5000/'
@app.route('/hello')
def hello_word():
return 'hello world'
@app.route('/upload_img', methods=['POST'])
def upload_crack_image():
...
return res
if __name__ == '__main__':
app.run()
vue前端配置
vue.config.js，说明前端运行的套接字。
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer:{
host:'127.0.0.1',
port:80,
client:{
webSocketURL:'ws://0.0.0.0:80/ws',
},
headers:{
'Access-Control-Allow-Origin':'*',
}
}
})
App.vue，说明前端请求后端的路径样例，后面nginx会进行解析和反向代理
<el-upload
class="avatar-uploader"
action="/upload_img"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon">i>
el-upload>
uwsgi服务配置
mkdir uwsgi # 在flask后端项目中创建该文件，用于存放uwsgi启动flask后存放的pid、log等文件
cd uwsgi
vi uwsgi.pid # 存放uwsgi web服务器运行时的进程id,以后会根据这个id进行启动、重启、关闭等操作
vi uwsgi.log # 存放运行后端时的日志，以后如果后端运行错误，比如server500，根据这个log进行排错
创建uwsgi.ini配置文件
[uwsgi]
# 服务端口号，这里没有设置IP值，默认是加载服务器的IP地址
http = :5000
# flask项目地址
chdir = /home/flask_project
# wsgi文件 /home/flask_project/main.py
module = app #module=app # 启动flask应用的文件名，不用加.py
callable=app # 应用名,falsk 默认
# 进程数
processes = 4
# 主进程
master = true
# 每个进程有2个线程
threads = 2
# 后台启动 日志输出路径
daemonize = /home/flask_project/uwsgi/uwsgi.log
# 保存主进程的进程号
pidfile = /home/flask_project/uwsgi/uwsgi.pid
# 以固定大小切分日志文件
log-maxsize = 1000
# 启动请求日志
disable-logging = true
# 设置中断时间
harakiri = 60
# 懒加载
lazy = true
lasy-apps = true
命令
uwsgi --ini uwsgi.ini # 启动
uwsgi --reload uwsgi.pid # 重启
uwsgi --stop uwsgi.pid # 关闭
pkill -f uwsgi -9 # 关闭所有uwsgi服务
nginx服务器配置
nginx.conf
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
# include加载其它配置文件,如png、exe等文件告诉浏览器应该怎么渲染，是展示还是下载。
include mime.types;
# mime.types 文件中没有说明的类型，默认以application/octet-stream方式渲染。
default_type application/octet-stream;
# 无copy
sendfile on;
keepalive_timeout 65;
# 一个serve代表一个虚拟服务主机，那么一个真实主机可以配置多个服务
server {
# 浏览器输入server_name:80端口后，都会被其拦截
listen 80;
server_name localhost;
# 前端请求路径，vue被打包成dist文件，把其放到html文件下就会被nginx解析了。这里的‘/’是vue的router主地址.
location / {
root html/dist;
index index.html;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
# 当请求出现500...等错误码后会被nginx自动重定向到50x.html
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# 后端flask框架的反向代理，header一大堆设置是为了处理post请求。在被nginx反向代理后，前端请求后端的接口，就不能写成http://127.0.0.1:5000/upload_img了，直接写成/upload_img。这样，当前端发出upload_img后，nginx会拦截自动拼接proxy_pass http后完成请求。
location /upload_img {
proxy_pass http://127.0.0.1:5000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
# 后端flask框架的反向代理。
location /hello{
proxy_pass http://127.0.0.1:5000;
}
# 后端flask框架的反向代理
location /static{
proxy_pass http://127.0.0.1:5000;
}
}
}
nginx被我安装在/usr/local/目录下，sbin存放了其启动文件
命令
/usr/local/nginx/sbin/nginx
/usr/local/nginx/sbin/nginx -s stop
/usr/local/nginx/sbin/nginx -s reload
/usr/local/nginx/conf/nginx.conf