耀极客论坛

 找回密码
 立即注册
查看: 740|回复: 0

flask和vue前后端分离项目部署的示例代码

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220555
发表于 2022-5-9 01:32:02 | 显示全部楼层 |阅读模式
  本文主要介绍了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文件
  1. [uwsgi]
  2. # uwsgi 启动时所使用的地址与端口,nginx代理的时候需要转发到该地址
  3. socket = x.x.x.x:xxxx   
  4. #python环境目录
  5. #home = /usr/local/python/bin
  6. #指向网站根目录
  7. chdir = /root/www
  8. #python项目启动程序文件
  9. wsgi-file = /root/www/run.py
  10. #python程序内用于启动的application变量名
  11. callable = app
  12. #处理器数
  13. processes = 3
  14. #线程数
  15. threads = 3
  16. #状态监测地址
  17. stats = 127.0.0.1:5000
  18. #设置uwsgi包解析的内部缓存区大小。默认4k
  19. buffer-size = 32768
复制代码
  uwsgi启动命令:
  1. uwsgi config.ini   #该命令直接启动
  2. uwsgi -d --ini config.ini  #该命令后台运行,常用
复制代码
  3.安装nginx,正常,我们是运维安装的,过程不表,请百度一下
  问题来了:
  ​ 我们在同时代理vue和flask 的时候,不管怎么折腾,前端都无法访问到flask的地址
  解决办法:
  ​ 使用了两个不同 的域名分别代理了vue和flask,vue指向flask的代理域名
  1. user  nginx;
  2. worker_processes  1;
  3. error_log  logs/error.log;
  4. #error_log  logs/error.log  notice;
  5. #error_log  logs/error.log  info;
  6. pid        logs/nginx.pid;
  7. events {
  8.     worker_connections  xx;
  9.     use epoll;
  10. }
  11. http {
  12.     include       mime.types;
  13.     default_type  application/octet-stream;
  14.     log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
  15.                       '$status $body_bytes_sent "$http_referer" '
  16.                       '"$http_user_agent" "$http_x_forwarded_for"';
  17.     #access_log  logs/access.log  main;
  18.     server_tokens off;
  19.     sendfile        on;
  20.     #tcp_nopush     on;
  21.     #keepalive_timeout  0;
  22.     keepalive_timeout  xx;
  23.     #gzip  on;
  24.         server {
  25.                 listen xx;
  26.                 server_name  hqfund.com www.hqfund.com;
  27.                 return 301 https://$host$request_uri;
  28.   }
  29. server {
  30.   listen 443 ssl;
  31.   server_name   xxx.com1;
  32.          ssl_certificate     /xxxx;
  33.          ssl_certificate_key /xxxx;
  34.   
  35.   location / {
  36.               root /xxxx;
  37.    index index.html index.htm;
  38.   }
  39. }
  40.     server {
  41.                 listen xx;
  42.                 server_name  xxx.com2;
  43.                 return 301 https://$host$request_uri;
  44.   }
  45.   
  46. server {
  47.   listen xxx ssl;
  48.   server_name  xxx.com2;
  49.   ssl_certificate     /xxxx;
  50.          ssl_certificate_key /xxxx;
  51.   
  52.   location / {
  53.               include uwsgi_params;
  54.    uwsgi_pass x.x.x.x:xx;
  55.    proxy_http_version 1.1;
  56.    proxy_set_header Upgrade $http_upgrade;
  57.    proxy_set_header Connection "upgrade";
  58.   }
  59. }
  60. }
复制代码
  到此这篇关于flask和vue前后端分离项目部署的示例代码的文章就介绍到这了,更多相关flask和vue前后端分离内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 02:57 , Processed in 0.064504 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表