flask和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;
}


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前后端分离项目部署的示例代码的文章就介绍至此，更多相关flask和vue前后端分离内容请搜索编程宝库以前的文章，希望以后支持编程宝库！

 一、watch监听属性这个属性用来监视某个数据的变化，并触发相应的回调函数执行。基本用法添加watch属性，值为一个对象。对象的属性名就是要监视的数据，属性值为回调函数，每当这个属性名对应的值发生变化 ...