如何编写flask与vue前后端分离项目的部署示例代码？

本文共计516个文字，预计阅读时间需要3分钟。

项目背景：近期开发了一个项目，后端使用的是Flask框架编写接口，前端使用的是Vue框架。项目前后端完全分离，部署时遇到了一些问题，以下为详细记录。

部署环境：CentOS 6.5、Python 3.6.3、Flask 0.12.0、Vue

遇到的问题及解决方法：

前段时间开发了一个项目, 我后端用的是flask框架写接口,前端用的是vue框架,项目前后端完全分离,部署的时候遇到一点问题,记录一下.

部署环境:centos6.5、Python3.6.3 、flask0.12.0 vue

部署方式:uwsgi+nginx

步骤:

​ 1.首先安装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包解析的内部缓存区大小。默认4k buffer-size = 32768

uwsgi启动命令:

uwsgi config.ini #该命令直接启动 uwsgi -d --ini config.ini #该命令后台运行,常用

3.安装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; } $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 $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前后端分离项目部署的示例代码的文章就介绍到这了,更多相关flask和vue前后端分离内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！