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前后端分离内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Django vue前后端分离整合过程解析

    最近接到一个任务,就是用django后端,前段用vue,做一个普通的简单系统,我就是一搞后端的,听到vue也是比较震惊,之前压根没接触过vue. 看了vue的一些文档,还有一些项目,先说一下django与vue的完美结合吧! 首先是创建一个django项目 django-admin startproject mysite # 创建mysite项目 django-admin startapp blog # 创建blog应用 一.接下来就是安装关于vue 的东西了 1.首先安装node.js,官网地

  • Vue+SpringBoot前后端分离中的跨域问题

    Vue+SpringBoot前后端分离中的跨域问题

    在前后端分离开发中,需要前端调用后端api并进行内容显示,如果前后端开发都在一台主机上,则会由于浏览器的同源策略限制,出现跨域问题(协议.域名.端口号不同等),导致不能正常调用api接口,给开发带来不便. 封装api请求 import axios from 'axios' //axios.create创建一个axios实例,并对该实例编写配置,后续所有通过实例发送的请求都受当前配置约束 const $http = axios.create({ baseURL: '', timeout: 1000

  • springboot+VUE前后端分离实现疫情防疫平台JAVA

    springboot+VUE前后端分离实现疫情防疫平台JAVA

    目录 主要模块: 系统主要实现如下: 登录之后进入系统首页:目前系统主要功能如下 用户管理模块:用户添加.修改.删除.查询等基本操作 角色管理模块.通过用户绑定角色.角色控制菜单显示.灵活控制菜单. 前端VUE代码添加菜单 菜单添加修改列表层操作 历史行程数据管理:添加修改删除等操作 用户每日健康打卡列表数据展示以及添加打卡信息 员工出行外出报备管理申请 员工复工申请 管理员审核 通知公告模块: 一些设计报告和文档描述参考 数据库连接: 主要模块: 管理员用户登录:用户登录. 用户信息: 用户信

  • SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建过程(前端篇)

    SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建过程(前端篇)

    后端篇 SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建[后端篇][快速生成后端代码.封装结果集.增删改查.模糊查找][毕设基础框架] 前端篇 创建vue项目 1.找个文件夹进入命令行,输入:vue create vue-front 2.直接回车,等待片刻,稍微有点小久 3.根据提示指令测试 打开浏览器输入:http://localhost:8080/ 安装所需工具 安装的工具会有点多,为了提供更好的拓展性,可以自主选择安装(不建议),后面的代码中都是使用到了,不安装

  • FastApi+Vue+LayUI实现前后端分离的示例代码

    FastApi+Vue+LayUI实现前后端分离的示例代码

    目录 前言 项目设计 后端 前端 运行项目 Q&A 前言 在前面的Api开发中,我们使用FastApi已经可以很好的实现.但是实际使用中,我们通常建议前后端项目分离.今天我们就使用FastApi+Vue+LayUI做一个前后端分离的Demo. 项目设计 后端 后端我们采用FastApi在新的test视图中,定义一个路由,并将其注册到app中,并且在test视图中定义一个接口,实现模拟从数据库读取数据供前端调用渲染. 代码 test.py from fastapi import FastAPI,D

  • Vue+axios封装请求实现前后端分离

    本文实例为大家分享了Vue+axios封装请求实现前后端分离的具体代码,供大家参考,具体内容如下 前言 我们需要进行前后端分离开发,那么前后端的跨域问题就是无可避免的问题,前后端的请求也是无可避免的,Vue之中有一个请求组件是axios,我们可以对axios进行封装作为我们请求的工具组件 # 一.封装axios vue.config.js 配置文件 module.exports = { configureWebpack: { resolve: { alias: { api: '@/api', a

  • ssm+vue前后端分离框架整合实现(附源码)

    前言 本文针对Spring+SpringMVC+Mybatis后台开发框架(基于maven构建)与vue前端框架(基于webpack构建)的项目整合进行介绍,对于ssm和vue单独项目的搭建不作为本文的重点,而着重介绍两者之间交互的要点. SSM 项目结构 说明 项目有service和web两个子项目组成,web依赖于service,其中web主要是control层内容,service则对应service层,而MyBatis内容放在了service项目中,spring配置文件放在了web项目中.

  • Vue结合Springboot实现用户列表单页面(前后端分离)

    Vue结合Springboot实现用户列表单页面(前后端分离)

    目录 用户列表页面开发 项目介绍 1.前端html页面编写 2.springboot框架搭建 2.1.项目创建 2.2.连接数据库 2.3.项目完整依赖 3.编写entity层 4.查询用户信息 4.1.后端代码编写 4.2.前端代码编写 5.添加用户信息 5.1.后端代码编写 5.2.前端代码编写 6.修改用户信息 6.1.后端代码 6.2.前端代码 7.删除用户信息 7.1.后端代码 7.2.前端代码 用户列表页面开发 项目介绍 用户列表页面开发,可以实现简单的查询,删除,修改,和添加用户信

  • Springboot+Vue+shiro实现前后端分离、权限控制的示例代码

    本文总结自实习中对项目的重构.原先项目采用Springboot+freemarker模版,开发过程中觉得前端逻辑写的实在恶心,后端Controller层还必须返回Freemarker模版的ModelAndView,逐渐有了前后端分离的想法,由于之前,没有接触过,主要参考的还是网上的一些博客教程等,初步完成了前后端分离,在此记录以备查阅. 一.前后端分离思想 前端从后端剥离,形成一个前端工程,前端只利用Json来和后端进行交互,后端不返回页面,只返回Json数据.前后端之间完全通过public A

  • 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 启动时所使用的地址与端口,ngin

  • Docker部署前后端分离项目的实现示例

    Docker部署前后端分离项目的实现示例

    目录 一.环境准备 二.运行镜像 解决问题 Redis安装 Nginx安装 三.打包项目 四.部署 一.环境准备 服务器 阿里云服务器 1核+2GB即可 软件 本次部署采用的是 docker,因此软件环境都在 docker 上 我们需要 MySQL 8.0.x版本,Redis,Nginx,提前下好镜像即可 二.运行镜像 MySQL安装 MySQL我用的是8.0.x的版本,在部署过程中出现了一些问题,在这里跟大家分享一下 docker run \ -p 3306:3306 \ --name mys

  • SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建过程(后端)

    SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建过程(后端)

    数据库准备 data_test.sql: /* SQLyog Enterprise v12.08 (64 bit) MySQL - 5.7.31 : Database - data_test ********************************************************************* */ /*!40101 SET NAMES utf8 */; /*!40101 SET SQL_MODE=''*/; /*!40014 SET @OLD_UNIQUE_

  • Spring Boot和Vue前后端分离项目架构的全过程

    Spring Boot和Vue前后端分离项目架构的全过程

    目录 Spring Boot+Vue 前后端分离项目架构 1. SpringBoot 后端项目 2. Vue 前端项目 总结 Spring Boot+Vue 前后端分离项目架构 项目流程: 1. SpringBoot 后端项目 1.新建一个 SpringBoot 工程,并添加项目开发过程中需要的相关依赖: 2.数据库新建 book 数据表: -- ---------------------------- -- Table structure for book -- ---------------

  • Spring Boot + Vue 前后端分离项目如何踢掉已登录用户

    上篇文章中,我们讲了在 Spring Security 中如何踢掉前一个登录用户,或者禁止用户二次登录,通过一个简单的案例,实现了我们想要的效果. 但是有一个不太完美的地方,就是我们的用户是配置在内存中的用户,我们没有将用户放到数据库中去.正常情况下,松哥在 Spring Security 系列中讲的其他配置,大家只需要参考Spring Security+Spring Data Jpa 强强联手,安全管理只有更简单!一文,将数据切换为数据库中的数据即可. 本文是本系列的第十三篇,阅读前面文章有助

  • 部署vue+Springboot前后端分离项目的步骤实现

    单页应用 vue经常被用来开发单页应用(SinglePage Web Application,SPA),什么叫做单页应用呢,也就是只有一张web页面的应用,单页应用的跳转只需要刷新局部资源,大大加快的了我们页面的响应速度 前端页面打包 打开vue工程,在项目根目录下创建一个配置文件:vue.config.js,然后在里面写入以下内容: module.exports = { assetsDir: 'static', // 静态资源保存路径 outputDir: 'dist', // 打包后生成的文

  • Django+Vue.js搭建前后端分离项目的示例

    Django+Vue.js搭建前后端分离项目的示例

    在写这篇文章的时候,顺带学习了一下关于Markdown的使用方法. 笔者是个渣渣,一切都是自己在摸索的学着,所以也谈不上什么体系.系统学习.在这里主要是为了实现把项目前后端分离开. 这里假设你的电脑上所需的django.vue.js已经有了,如果没有,往下拉就是vue.js的安装流程.django前面写过了,就不赘述了. 一,正常搭建前后端分离项目流程 1.创建django项目 命令: django-admin startproject ulb_manager 结构: ├── manage.py

  • 详解Flask前后端分离项目案例

    简介 学习慕课课程,Flask前后端分离API后台接口的实现demo,前端可以接入小程序,暂时已经完成后台API基础架构,使用 postman 调试.git 重构部分: ken校验模块 auths认证模块 scope权限模块,增加全局扫描器(参考flask HTTPExceptions模块) 收获 我们可以接受定义时的复杂,但不能接受调用时的复杂 如果你觉得写代码厌倦,无聊,那你只是停留在功能的实现上,功能的实现很简单,你要追求的是更好的写法,抽象的艺术,不是机械的劳动而是要 创造 ,要有自己的

  • SpringBoot+mybatis+Vue实现前后端分离项目的示例

    SpringBoot+mybatis+Vue实现前后端分离项目的示例

    目录 一.SpringBoot环境搭建 1.项目的数据库 2.项目所需依赖 3.application.yml文件 4.入口类 二.vue实现前后端分离 1.前端页面 2.springBoot控制层 3.mapper文件 4.项目完整源代码 vue前后端分离实现功能:员工的增删改(先实现数据回显之后,再进行修改)查 一.SpringBoot环境搭建 1.项目的数据库 /* Navicat Premium Data Transfer Source Server : windows Source S

随机推荐