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

目录

一、Flask后端发布环境搭建

1.1 python环境

第一步:安装python环境

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

第二步:配置python虚拟环境

1.安装virtualenv第三方库

python 复制代码
pip install virtualenv

2.配置virtualenv软连接

直接用 virtualenv venv 命令 来创建虚拟环境(env为虚拟环境的目录名)会提醒bash: virtualenv:command not found

1)首先找到virtualenv的安装路径

bash 复制代码
find / -name virtualenv

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

bash 复制代码
/usr/local/bin/python3/bin/virtualenv

3)创建软链接

bash 复制代码
ln -s /usr/local/bin/python3/bin/virtualenv /usr/bin/virtualenv

接下来就可以直接使用virtualenv命令了。
3.创建虚拟环境

cd到想要存放虚拟环境的路径,例如:

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

执行:

bash 复制代码
virtualenv -p python3.9 venv

-p python3.9 指定python版本
venv 虚拟环境名称,自定义

如果看到 类似create virtual environment CPython3.9.7.final.0-64 in 222ms.的文字,表示创建python虚拟环境成功。
4.激活虚拟环境

bash 复制代码
source venv/bin/activate

5.安装flask项目依赖项

6.离开虚拟环境

bash 复制代码
deactivate

1.2 uwsgi环境

1.安装uwsgi模块

bash 复制代码
pip install uwsgi

2.创建uwsgi配置文件

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

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

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

bash 复制代码
vim uwsgiconfig.ini
bash 复制代码
[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.使用脚本启动

bash 复制代码
uwsgi --ini /path/to/your/flask_demo/venv/uwsgiconfig.ini

5.停止命令

bash 复制代码
uwsgi --stop /xxx/xxx/uwsgi.pid

1.3 nginx配置

1.服务器安装nginx

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

bash 复制代码
vim /opt/nginx/nginx.conf

修改两点,其他参数可根据需求更改(我这边没改):

1.server_name修改为服务器ip;

2.添加location /test/{};

bash 复制代码
server{
listen 80;
server_name server_ip;  #服务器ip

location /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格式如下所示:

bash 复制代码
http://server_ip:80/test/user/login

二、VUE前端发布环境搭建

2.1 配置修改

1. .env.production

bash 复制代码
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.打包

bash 复制代码
npm run build:prod

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

将dist文件夹上传服务器/html/dist

2.3 nginx配置

bash 复制代码
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

三、联合调试

相关推荐
雨声不在1 小时前
debian切换用户
linux·服务器·debian
两点王爷1 小时前
springboot项目文件上传到服务器本机,返回访问地址
java·服务器·spring boot·文件上传
遇到我又惊又喜1 小时前
佛山大旺高新区3650 M5 ERP服务器维修案例
运维·服务器
Mr.app2 小时前
vue mixin混入与hook
vue.js
一个专注写代码的程序媛2 小时前
vue组件间通信
前端·javascript·vue.js
一笑code2 小时前
美团社招一面
前端·javascript·vue.js
2302_799525743 小时前
【Linux】第十二章 安装和更新软件包
linux·运维·服务器
心宽体胖连壮实3 小时前
记录一次 MarchingSquaresJS 使用经历
vue.js
杨凯凡3 小时前
Linux日志分析:安全运维与故障诊断全解析
linux·运维·服务器
Monly214 小时前
vue报错:Loading chunk * failed,vue-router懒加载出错问题。
前端·javascript·vue.js