当前位置: 首页 > news >正文

【VUE】Flask+vue-element-admin前后端分离项目发布到linux服务器操作指南

目录

    • 一、Flask后端发布环境搭建
      • 1.1 python环境
        • 第一步:安装python环境
        • 第二步:配置python虚拟环境
      • 1.2 uwsgi环境
      • 1.3 nginx配置
      • 1.4 测试
    • 二、VUE前端发布环境搭建
      • 2.1 配置修改
      • 2.2 打包上传服务器
      • 2.3 nginx配置
      • 2.3 测试
    • 三、联合调试

一、Flask后端发布环境搭建

1.1 python环境

第一步:安装python环境

可参考前文Centos7 配置LAMP环境-Python3

第二步:配置python虚拟环境

1.安装virtualenv第三方库

pip install virtualenv

2.配置virtualenv软连接
直接用 virtualenv venv 命令 来创建虚拟环境(env为虚拟环境的目录名)会提醒bash: virtualenv:command not found
1)首先找到virtualenv的安装路径

find / -name virtualenv

2)我这边的文件地址是:

/usr/local/bin/python3/bin/virtualenv

3)创建软链接

ln -s /usr/local/bin/python3/bin/virtualenv /usr/bin/virtualenv

接下来就可以直接使用virtualenv命令了。
3.创建虚拟环境
cd到想要存放虚拟环境的路径,例如:

cd /path/to/your/flask_demo # 习惯性将venv存放至项目根目录下

执行:

virtualenv -p python3.9 venv

-p python3.9 指定python版本
venv 虚拟环境名称,自定义
如果看到 类似create virtual environment CPython3.9.7.final.0-64 in 222ms.的文字,表示创建python虚拟环境成功。
4.激活虚拟环境

source venv/bin/activate

5.安装flask项目依赖项
6.离开虚拟环境

deactivate

1.2 uwsgi环境

1.安装uwsgi模块

pip install uwsgi

2.创建uwsgi配置文件
在激活的虚拟环境中/path/to/your/flask_demo/venv 目录下创建 uwsgi.ini 配置文件

# 此时的目录为 /path/to/your/flask_demo/venv 或者自定义路径,建议放在flask项目根路径
touch uwsgiconfig.ini

3.编辑配置文件 添加以下内容

vim uwsgiconfig.ini
[uwsgi]
# uwsgi 启动时所使用的IP地址与端口,0.0.0.0表示所有IP地址都行
socket = 127.0.0.1:5200 #如果想服务器内可引用配置为0.0.0.0:5200
# http = 127.0.0.1:5200 #不依赖nginx可以配置为http
# 指向网站目录,也就是你项目根目录
chdir= /path/to/your/flask_demo
# python 你的程序启动文件,如果是app.py那么这里就写app.py
wsgi-file = app.py
# 你的运行程序省略.py后缀的名字
module = app
# 你的启动程序中的 app = Flask(__name__) 变量名,如果是app 那么这里就写app
callable = app
# 进程数量
processes = 5
# 线程数量
threads = 2
#状态检测地址
stats = 127.0.0.1:9191
# 日志输出目录
daemonize = /xxx/xxx/flask.log
# pid存储文件,启动服务的主进程ID
pidfile = /xxx/xxx/uwsgi.pid
# 启动主进程
master = true
# 请求体大小,这里65536/1024 就是 64M
buffer-size = 65536

4.使用脚本启动

uwsgi --ini /path/to/your/flask_demo/venv/uwsgiconfig.ini

5.停止命令

uwsgi --stop /xxx/xxx/uwsgi.pid

1.3 nginx配置

1.服务器安装nginx
可参考前文Centos7.5 nginx安装
2.编辑配置文件

vim /opt/nginx/nginx.conf

修改两点,其他参数可根据需求更改(我这边没改):
1.server_name修改为服务器ip;
2.添加location /test/{};

server{
listen 80;
server_name server_ip;  #服务器iplocation /test/{ # 我的后端接口都添加了test标签,所有包含test的URL都会转发到这include uwsgi_params;uwsgi_pass 127.0.0.1:5200;uwsgi_pass HTTP_X-Forwarded-For $proxy_add_x_forwarded_for;uwsgi_pass Host $http_host;uwsgi_pass HTTP_X-Real-IP $remote-addr;
}
}

3.重新启动nginx

1.4 测试

使用postman做接口测试,url格式如下所示:

http://server_ip:80/test/user/login

二、VUE前端发布环境搭建

2.1 配置修改

1. .env.production

ENV = 'production'
#base api
VUE_APP_BASE_API='test'
SYSTEM_BACKEND_URL='http://127.0.0.1:5200'
2.vue.config.js
1)打包路径
publicPath:'/' 改为 process.env.NODE_ENV === 'development' ? '/' : './'
2)反向代理
proxy:{[process.env.VUE_APP_BASE_API]:{target:process.env.SYSTEM_BACKEND_URL,changeOrigin:true;pathRewrite:{['^'+ process.env.VUE_APP_BASE_AP]:process.env.VUE_APP_BASE_AP}}
3)打包模式
src/router/index.js将mash:'history'改为mode:'hash'
const createRoter =()=> new Router({mode:'hash',scrollBehavior:()=>({y:0}),router:constantRoutes
})
}

2.2 打包上传服务器

1.打包

npm run build:prod

执行完成后,会在项目根目录下生成一个dist文件夹
2.上传服务器
将dist文件夹上传服务器/html/dist

2.3 nginx配置

server {listen       80;server_name  server_ip;access_log off;location / {root   /html/dist; index  index.html index.htm;try_files $uri $uri/ /index.html @router;}location @router{rewrite ^.*$ /index.html last;}}

重新启动nginx

2.3 测试

http://server_ip/index.html

三、联合调试

相关文章:

【VUE】Flask+vue-element-admin前后端分离项目发布到linux服务器操作指南

目录 一、Flask后端发布环境搭建1.1 python环境第一步:安装python环境第二步:配置python虚拟环境 1.2 uwsgi环境1.3 nginx配置1.4 测试 二、VUE前端发布环境搭建2.1 配置修改2.2 打包上传服务器2.3 nginx配置2.3 测试 三、联合调试 一、Flask后端发布环境…...

django的gunicorn的异步任务执行

gunicorn 本身是一个WSGI HTTP服务器,用于运行Python的web应用,如Django项目。它并不直接提供执行异步任务的功能。异步任务通常是指那些你想要在web请求之外执行的后台任务,如发送电子邮件、处理长时间运行的计算或与外部API交互等。 在Dja…...

KEPServerEX 6 之【外篇-2】PTC-ThingWorx服务端软件安装 PostgreSQL本地安装

---------------------------安装相关信息--------------- 默认用户角色 : Postgres 密码:root@123 localhost 用户角色 :postgres_tw 密码 root@123 端口 5432 ------------------------------------------------------------------ 1. WIN 安装 Postgre…...

websocket 介绍

目录 1,前端如何实现即时通讯短轮询长轮询 2,websocket2.1,握手2.2,握手过程举例2.3,socket.io 3,websocket 对比 http 的优势 1,前端如何实现即时通讯 在 websocket 协议出现之前,…...

【IoT网络层】STM32 + ESP8266 +MQTT + 阿里云物联网平台 |开源,附资料|

目标:实现STM32连接阿里云物联网平台发送数据同时接收数据,IOT studio界面显示数据。具体来说:使用ESP8266 ESP-01来连接网络,获取设备数据发送到阿里云物联网平台并显示且oled显示屏当前的设备数据,通过IOT studio界面…...

数据分析工具 Top 8

你能想象一个没有工具箱的水管工吗? 没有,对吧? 数据从业者也是如此。如果没有他们的数据分析工具,数据从业者就无法分析数据、可视化数据、从数据中提取价值,也无法做数据从业者在日常工作中做的许多很酷的事情。 根据你最感兴趣的数据科学职业——数…...

AI 换脸的新时代:没有显卡也可以使用的AI换脸工具

大家好!今天,我要为大家介绍一个即使没有显卡,也能体验AI换脸的工具!是的,您没听错,无论您的电脑配置如何,只要运行在Windows 10或Windows 11上,都可以轻松使用这一神奇工具。这就是…...

3.Python中的循环结构

Python中的循环结构 一、回顾分支练习题 1、判断是否为一个合法三角形 需求:输入三角形的3边,如果两边的长度大于第三条边,则代表是一个合法三角形 # 1、提示用户输入三角形的三边长度 a = int(input(请输入第一条边的长度:)) b = int(input(请输入第二条边的长度:)) …...

机器学习之BP神经网络精讲(Backpropagation Neural Network(附案例代码))

概念 BP神经网络(Backpropagation Neural Network)是一种常见的人工神经网络,它通过反向传播算法来训练网络,调整连接权重以最小化预测输出与实际输出之间的误差。这种网络结构包含输入层、隐藏层和输出层,使用梯度下降算法来优化权重。 结构: BP神经网络(Backpropag…...

安全生产人员定位系统助企业实现智能化管理,提高生产安全性和效率

安全生产人员定位系统是基于物联网技术的系统,通过集成各种传感器和通信技术,实时监测员工的位置和活动状态。该系统可以帮助企业管理者了解员工的工作状态,及时发现潜在的安全隐患,从而采取相应的措施,保障员工的安全…...

动态规划 多源路径 字典树 LeetCode2977:转换字符串的最小成本

涉及知识点 动态规划 多源最短路径 字典树 题目 给你两个下标从 0 开始的字符串 source 和 target ,它们的长度均为 n 并且由 小写 英文字母组成。 另给你两个下标从 0 开始的字符串数组 original 和 changed ,以及一个整数数组 cost ,其中…...

Hadoop集群找不到native-hadoop

1.问题描述 hive 运行中的问题,需要把把native复制进去 /usr/lib 2023-02-15 19:59:42,165 WARN scheduler.TaskSetManager: Lost task 11.0 in stage 1.0 (TID 3, common4, executor 2): java.lang.RuntimeException: Hive Runtime Error while closing operators…...

解决阿里云远程连接yum无法安装问题(Ubuntu 22.04)

解决阿里云远程连接yum无法安装问题(Ubuntu 22.04) 第一步 进入阿里云远程连接后,尝试安装宝塔面包第二步:尝试更新软件包等一些列操作第三步:完成上述操作之后,尝试安装yum第四步:尝试更换清华…...

springboot 查询

ServiceImpl中 getBaseMapper()的使用 public IPage<ProductPageVO> getProductPage(Integer regionOrCityCode, Integer brandId, LocalDate usedDate, Page<ProductPageVO> page) {return getBaseMapper().getProductPage(regionOrCityCode, brandId, usedDate, …...

【分布式链路追踪技术】sleuth+zipkin

目录 1.概述 2.搭建演示工程 3.sleuth 4.zipkin 5.插拔式存储 5.1.存储到MySQL中 5.2.用MQ来流量削峰 6.联系作者 1.概述 当采用分布式架构后&#xff0c;一次请求会在多个服务之间流转&#xff0c;组成单次调用链的服务往往都分散在不同的服务器上。这就会带来一个问…...

Windows 源码编译 MariaDB

环境 Win11, vs2022, git, cmake, Bison from GnuWin32, perl, Gnu Diff. 默认都安装好。 perl 看之前博客教程。perl Bison from GnuWin32 默认安装到 C:\GnuWin32 Add C:\GnuWin32\bin to your system PATH after installation. 下载mariadb源码 地址&#xff1a;MariaD…...

【动画视频生成】

转自&#xff1a;机器之心 动画视频生成这几天火了&#xff0c;这次 NUS、字节的新框架不仅效果自然流畅&#xff0c;还在视频保真度方面比其他方法强了一大截。 最近&#xff0c;阿里研究团队构建了一种名为 Animate Anyone 的方法&#xff0c;只需要一张人物照片&#xff0…...

《Spring Cloud学习笔记:微服务保护Sentinel》

Review 解决了服务拆分之后的服务治理问题&#xff1a;Nacos解决了服务治理问题OpenFeign解决了服务之间的远程调用问题网关与前端进行交互&#xff0c;基于网关的过滤器解决了登录校验的问题 流量控制&#xff1a;避免因为突发流量而导致的服务宕机。 隔离和降级&#xff1a…...

解密负载均衡:如何平衡系统负载(下)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…...

go 源码解读 - sync.Mutex

sync.Mutex mutex简介mutex 方法源码标志位获取锁LocklockSlowUnlock怎么 调度 goroutineruntime 方法 mutex简介 mutex 是 一种实现互斥的同步原语。&#xff08;go-version 1.21&#xff09; &#xff08;还涉及到Go运行时的内部机制&#xff09;mutex 方法 Lock() 方法用于…...

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...