如何使用宝塔部署vue+flask项目


前端项目

1. 打包前端项目生成dist文件夹

npm run build:prod

在这里插入图片描述

2. 宝塔面板的/www/wwwroot路径下新建项目文件夹

在这里插入图片描述

3. 将打包生成的dist文件夹中的文件移动到vue-flask-app文件夹中

在这里插入图片描述

4. 新建php网站(注意,这里是前端访问网站)

(1)添加站点

在这里插入图片描述

(2) 编辑站点,替换成自己的域名加端口号(记得开放端口)

![在这里插入图片描述](https://img-blog.csdnimg.cn/bb70d18fc76645d39f771f7635896928.png

5. 部署flask后端项目

(1) 将后端api项目文件夹移到vue-flask-app文件夹下

在这里插入图片描述

(2) 配置数据库连接(api/config.py)

mysql+pymysql://用户名:密码@localhost:3306/数据库名
![在这里插入图片描述](https://img-blog.csdnimg.cn/ee229c043b534056bc2a7bf4c79f0925.png

(3) 数据库迁移(当数据表字段发生改变时需要执行此操作)

flask db init //创建迁移文件夹migrates
flask db migrate // 生成迁移文件
flask db upgrade //执行迁移文件中的升级

(4) 删除ll_env文件,重新配置虚拟环境(本地环境是windows要部署到centos服务器才需要此操作)

因为ll_env文件是windows生成的,这里需要在centos环境下api目录下重新安装虚拟python环境,生成venv文件

// 此命令会在当前目录下生成一个名为venv的目录,后面一个venv是创建的虚拟环境名
python3 -m venv venv
source venv/bin/activate //激活Python虚拟开发环境

在这里插入图片描述

5. 命令运行api后端项目

(1) api/venv目录下安装gunicorn

pip install gunicorn

(2) gunicorn命令启动项目(main是入口文件,因项目而异)

gunicorn -b 127.0.0.1:8823 main:app

(3) 重启项目(当后端项目修改需要执行此步骤)

pstree -ap|grep gunicorn //查看进程服务
kill -9 1223 // 关闭进程号
gunicorn -b 127.0.0.1:8823 main:app //重启项目

7. 修改网站配置文件(/api)

这里的8823端口号需要和上面gunicorn命令运行的端口号保持一致
这里是代理不需要开放8823端口,只需要开放前端访问的8824端口就好了

 location /api
    {
        proxy_pass http://127.0.0.1:8823;
        proxy_set_header Host $http_host;
        proxy_http_version 1.1;
        proxy_set_header Connection "";
    }

在这里插入图片描述

好的,我可以为您提供一些基本的步骤。首先,您需要在阿里云上购买一台服务器,并确保您拥有对该服务器的完全访问权限。然后,您可以按照以下步骤进行VueFlask应用程序的部署: 1. 安装Node.js和npm 在您的服务器上安装Node.js和npm,这将使您能够运行和构建Vue应用程序。 2. 安装Vue CLI 使用npm安装Vue CLI,这样您就可以在服务器上使用Vue CLI命令行工具创建和管理Vue项目。 3. 创建Vue项目 使用Vue CLI创建一个新的Vue项目,为此,请在终端中运行以下命令: ``` vue create my-project ``` 4. 构建Vue项目 使用npm运行构建命令,将Vue项目构建为静态文件,以便可以在Web服务器上提供它们。为此,请在终端中运行以下命令: ``` npm run build ``` 5. 安装Flask 在您的服务器上安装Flask,这将使您能够运行和管理Flask应用程序。 6. 编写Flask应用程序 使用Python和Flask编写您的应用程序代码,包括路由和视图函数等。 7. 部署Flask应用程序 将Flask应用程序部署到Web服务器,例如Nginx或Apache等。 8. 配置Web服务器 配置Web服务器以在服务器上提供VueFlask应用程序。这通常涉及到将Vue应用程序的静态文件和Flask应用程序的路由配置到Web服务器上。 以上是基本的步骤,您可以根据您的具体情况进行更改和定制。希望这可以帮助您部署Vue+Flask应用程序到阿里云服务器。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

trabecula_hj

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值