安装依赖
安装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会进行解析和反向代理
class="avatar-uploader" action="/upload_img" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> 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 精彩内容
您阅读本篇文章共花了：
发表评论