【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

三、联合调试

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/581402.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MyBatis 中 #{}和 ${}的区别是什么?

MyBatis 中 #{}和 ${}的区别是什么? 在 MyBatis 中,#{} 和 ${} 是用于在 SQL 语句中插入参数值的两种方式,它们之间有重要的区别: #{} 的使用: #{} 主要用于预编译的 SQL 语句中,它会将参数值以安全的方式…

python 框架 写一个demo

首先,确保您已经安装了Python和Django。您可以使用以下命令来安装Django: pip install django接下来,创建一个新的Django项目。在命令行中,使用以下命令: django-admin startproject myproject这将创建一个名为mypro…

pyCharm 打印控制台中文乱码解决办法

解决方法 在 "File" -> "Settings" 中的控制台设置: 在 "File" -> "Settings" 中,你可以找到 "Editor" -> "General" -> "Console"。在这里,你可能会找到…

docker学习(十八、network介绍)

[TOC]添加链接描述 首先,我们要知道什么是 Docker 网络。简单来说,它就是 Docker 中用于实现容器间通信的一个东西。 network相关内容: docker学习(十八、network介绍) docker学习(十九、network使用示例br…

【快速全面掌握 WAMPServer】03.玩转安装和升级

网管小贾 / sysadm.cc 大多数情况我们在了解和学习任何一款软件之前都会先去尝试一下软件的安装,毕竟只有安装好了软件,再通过使用它来进一步学习和掌握。 那么同样的道理,我们要学习和掌握如何动手搭建 PHP 的调试环境,那么作为…

启明智显开源项目分享|基于Model 3c芯片的86中控面板ZX3D95CM20S-V11项目软硬件全开源

前言: 本文为4寸 480*480 RGB接口IPS全面触屏的86中控面板(RT-ThreadLVGL)软硬件开源干货内容,该项目是综合性非常强的RTOS系列项目!项目主控芯片使用 Model 3c,整体实现了简化版本的86中控面板的功能需求…

“2023年的技术发展与个人成长:回顾与展望“

文章目录 每日一句正能量前言工作生活未来展望后记 每日一句正能量 凡事顺其自然,遇事处于泰然,得意之时淡然,失意之时坦然,艰辛曲折必然,历尽沧桑悟然。 前言 在这快速发展的信息时代,技术的进步和创新不…

Python网络设备连接和配置工具

当您的Python程序需要运行外部依赖密码的程序,或访问远程服务器时,请使用Paramiko。 Paramiko 是一个实现 SSHv2 协议的 Python 模块。 Paramiko 不是 Python 标准库的一部分,尽管它被广泛使用。 本指南向您展示如何在 Python 脚本中使用 Par…

基于深度学习的召回算法

基于深度学习的召回算法在推荐系统中取得了显著的成功,它利用深度神经网络来学习用户和物品之间的复杂关系,能够更好地捕捉数据中的隐藏模式。以下是一个基于深度学习的召回算法的基本步骤: 数据准备: 收集用户行为数据&#xff…

深入理解C语言中冒泡排序(优化)

目录 引言: 冒泡排序概述: 优化前: 优化后(注意看注释): 解析优化后: 原理(先去了解qsort): 引言: 排序算法是计算机科学中的基础问题之一。在本篇博客中&#xff0c…

[MySQL] MySQL 高级(进阶) SQL 语句

一、高效查询方式 1.1 指定指字段进行查看 事先准备好两张表 select 字段1,字段2 from 表名; 1.2 对字段进行去重查看 SELECT DISTINCT "字段" FROM "表名"; 1.3 where条件查询 SELECT "字段" FROM 表名" WHERE "条件…

计算机组成原理-多处理器系统的基本概念(SISD SIMD MISD MIMD)

文章目录 总览先看这个再往下看 SISDSIMDMISDMIMD向量处理器共享内存多处理器和多核处理器 总览 先看这个 再往下看 SISD 并发就是;先执行一下该指令序列,再执行一下另外一个指令序列 并行就是:两个指令序列同时进行 在某个时间段内只能处理…

centos 编译安装 python 和 openssl

安装环境: centos 7.9 : python 3.10.5 和 openssl 3.0.12 centos 6.10 : python 3.10.5 和 openssl 1.1.1 两个环境都能安装成功,可以正常使用。 安装 openssl 下载地址 下载后解压,进入到解压目录 执行&#xf…

java设计模式学习之【状态模式】

文章目录 引言状态模式简介定义与用途实现方式 使用场景优势与劣势在Spring框架中的应用状态示例代码地址 引言 设想你正在使用一个在线视频播放器观看电影。随着你的互动,播放器可能处于不同的状态:播放、暂停、缓冲或结束。每个状态下,播放…

ActiveMQ漏洞合集

目录 介绍CVE-2015-5254:Apache ActiveMQ任意代码执行漏洞漏洞介绍 & 环境准备漏洞发现Nuclei❌Vulmap✅漏洞验证漏洞利用 CVE-2016-3088:Apache ActiveMQ Fileserver远程代码执行漏洞漏洞发现Nuclei✅Vulmap✅MSF✅第三方工具1(漏洞探测…

腾讯云轻量应用服务器购买流程、搭建网站全流程超详细

腾讯云轻量应用服务器开箱即用、运维简单的轻量级云服务器,CPU内存带宽配置高并且价格特别便宜,大带宽,但是限制月流量。轻量2核2G3M带宽62元一年、2核2G4M优惠价118元一年,540元三年、2核4G5M带宽218元一年,756元3年、…

数据结构与算法:基于比较的排序算法:选择、冒泡、插入、归并的动图演示和java代码,排序时间复杂度、空间复杂度、稳定性总结表格

选择排序 选择排序是先在0~N-1上选择一个最小值排到最前面&#xff0c;然后再在1到N-1上选一个次小的&#xff0c;以此类推。 public static selectionSort(int[] arr){if(arrnull||arr.length<2){return;} //每次从i n-1 选一个最小的放前面for(int i0;i<arr.length-…

基于飞浆OCR的文本框box及坐标中心点检测JSON格式保存文本

OCR的文本框box及JSON数据保存 需求说明 一、借助飞浆框出OCR识别的文本框 二、以圆圈形式标出每个框的中心点位置 三、以JSON及文本格式保存OCR识别的文本 四、以文本格式保存必要的文本信息 解决方法 一、文本的坐标来自飞浆的COR识别 二、借助paddleocr的draw_ocr画出…

Mybatis 动态 SQL - choose, when, otherwise

有时候我们并不希望所有的条件都生效&#xff0c;而是只想在多个选项中选择一个。类似于Java中的switch语句&#xff0c;MyBatis提供了 ​<choose>​元素。 让我们使用上面的例子&#xff0c;但现在如果提供了标题&#xff0c;则只搜索标题&#xff1b;如果提供了作者&a…

基于 AForge.Net 框架的扑克牌计算机视觉识别

© Conmajia 2012, Nazmi Altun 2011 Init. 24 May 2012 SN: 125.1 本文为翻译文章&#xff0c;已获原作者 Nazmi Altun 授权。 下载资源&#xff1a; 源代码&#xff08;148.6 KB&#xff09;、Demo&#xff08;3.1 MB&#xff09; 简介 &#xff08;图片上的字&#xf…