本篇文章为大家展示了flask和vue前后端分离项目部署的代码怎么写,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
前段时间开发了一个项目, 我后端用的是flask框架写接口,前端用的是vue框架,项目前后端完全分离,部署的时候遇到一点问题,记录一下.
部署环境:centos6.5
、Python3.6.3
、flask0.12.0 vue
部署方式:uwsgi+nginx
步骤:
首先安装python运行环境,正常
2.安装uswsgi运行,正常(使用pip安装,pip install uwsgi):
新建config.ini文件
[uwsgi]# uwsgi 启动时所使用的地址与端口,nginx代理的时候需要转发到该地址socket = x.x.x.x:xxxx #python环境目录 #home = /usr/local/python/bin#指向网站根目录chdir = /root/www#python项目启动程序文件wsgi-file = /root/www/run.py#python程序内用于启动的application变量名callable = app#处理器数processes = 3#线程数threads = 3#状态监测地址stats = 127.0.0.1:5000#设置uwsgi包解析的内部缓存区大小。默认4kbuffer-size = 32768
uwsgi启动命令:
uwsgi config.ini #该命令直接启动uwsgi -d --ini config.ini #该命令后台运行,常用
安装nginx,正常,我们是运维安装的,过程不表,请百度一下
问题来了:
我们在同时代理vue和flask 的时候,不管怎么折腾,前端都无法访问到flask的地址
解决办法:
使用了两个不同 的域名分别代理了vue和flask,vue指向flask的代理域名
user nginx;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 xx; use epoll;}http { include mime.types; default_type application/octet-stream; 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 logs/access.log main; server_tokens off; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout xx; #gzip on; server { listen xx; server_name hqfund.com www.hqfund.com; return 301 https://$host$request_uri; } server { listen 443 ssl; server_name xxx.com1; ssl_certificate /xxxx; ssl_certificate_key /xxxx; location / { root /xxxx; index index.html index.htm; } } server { listen xx; server_name xxx.com2; return 301 https://$host$request_uri; } server { listen xxx ssl; server_name xxx.com2; ssl_certificate /xxxx; ssl_certificate_key /xxxx; location / { include uwsgi_params; uwsgi_pass x.x.x.x:xx; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } }}
上述内容就是flask和vue前后端分离项目部署的代码怎么写,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注编程网行业资讯频道。