flask+vue部署阿里云ubantu服务器,详细

flask+vue部署阿里云Ubuntu服务器教程,非常详细

1.我买的是轻量级服务器 ubuntu20.04 重置密码后点击远程连接 轻量级服务器需要切换到root账号 sudo su root,其他也大致一样部署;
在这里插入图片描述
2运行python3 –version 查看是否安装pyhon3;
在这里插入图片描述
3下载安装pip3
sudo apt-get update
sudo apt-get install python3-pip
运行pip3 –version查看是否安装
在这里插入图片描述
4我后台文件存放/home/dc/heymiss/heymiss-server这个目录下,创建文件夹命令:mkdir在这里插入图片描述
5 创建下载虚拟环境:sudo pip3 install virtualenv,安装后在项目目录下运行virtualenv venv 你会发现有一个venv文件夹 ,然后执行:source venv/bin/activate 进入虚拟环境
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
6 在本地输入pip freeze > requmenet.txt得到该项目所要安装包,通过xftp工具将本地Flask项目代码拷贝到服务器Flask项目(heymiss-server)目录下 在进入虚拟环境输入 pip3 install -r requmenet.txt下载安装包
在这里插入图片描述
7配置Nginx、Gunicorn
nginx是一个高性能的HTTP和反向代理服务器。gunicorn是一个Python WSGI UNIX的HTTP服务器,能够与各种WSGI WEB框架协作。在虚拟环境激活状态下,安装gunicorn。
Pip3 install gunicorn
安装nginx需要退出virtualenv的虚拟环境 输入deactivate退出虚拟环境
在这里插入图片描述
sudo apt-get install nginx 安装nginx,安装成功后,切换到nginx目录
cd /etc/nginx/sites-available/ 先备份nginx的默认配置 sudo cp default default.bak 然后修改配置 vi default
server {
listen 80; #阿里云添加安全组规则端口80
server_name ip; #域名或者公网IP
root /home/dc/heymiss/data;
index index.html;

    location / {
       root /home/dc/heymiss/data;
       try_files $uri $uri/ /index.html last;
       index index.html;
    }

}

server {
listen 8081; #阿里云添加安全组规则端口8081
server_name ip; #域名或者公网IP

   location / {
      proxy_pass http://0.0.0.0:8081; #指向gunicorn host的服务器地址
      proxy_set_header Host $host;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   }

}
将ip修改为自己的ip或者域名。配置修改完,检查下配置。nginx -t
在这里插入图片描述
出现以上文字则配置成功 启动或重启nginx。sudo service nginx restart
8 请求后台地址从本地改成服务器ip地址,Vue项目Build并上传到服务器运行npm run build:prod 得到dist文件,在heymiss创建一个data存放前端文件
在这里插入图片描述
在这里插入图片描述
9此处使用的端口除了在nginx配置外,也需要在阿里云后台安全组规则中添加80,8081端口和5000端口。
在这里插入图片描述
成功后输入公网ip会出现前端页面
在这里插入图片描述
输入 gunicorn -w 4 -b 0.0.0.0:80 manager:app 出现以下界面 flask也部署成功,如果没有出来去看看5000端口的安全组添加了没
在这里插入图片描述
10安装 mysql数据库
sudo apt install mysql-server
sudo vi /etc/mysql/mysql.conf.d/mysqld.cnf 最后面加上 skip-grant-tables
mysql -uroot -p
use mysql;
flush privileges;
ALTER USER ‘root’@‘localhost’ IDENTIFIED WITH mysql_native_password BY ‘你的密码’;
flush privileges;
vi /etc/mysql/mysql.conf.d/mysqld.cnf 删掉skip-grant-tables
一定要先刷新 flush privileges;
数据库迁移:
Python3 manager.py mysql init
Python3 manager.py mysql migrate -m"这是注释"
Python3 manager.py mysql upgrade
查看数据库中的表是否出来
在这里插入图片描述
从本地数据库中的数据导入服务器数据库上
1)选择数据库
    mysql>use dbname ;
  (2)设置数据库编码
    mysql>set names utf8;
  (3)导入数据(注意sql文件的路径)
    mysql>source /home/xxxx/dbname .sql;
在这里插入图片描述
输入 gunicorn -w 4 -b 0.0.0.0:80 manager:app,输入ip 点击登录 大功告成
在这里插入图片描述
以上内容整合网上资料和完善一下其他内容。

  • 0
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以为您提供一些基本的步骤。首先,您需要在阿里云上购买一台服务器,并确保您拥有对该服务器的完全访问权限。然后,您可以按照以下步骤进行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应用程序 使用PythonFlask编写您的应用程序代码,包括路由和视图函数等。 7. 部署Flask应用程序 将Flask应用程序部署到Web服务器,例如Nginx或Apache等。 8. 配置Web服务器 配置Web服务器以在服务器上提供VueFlask应用程序。这通常涉及到将Vue应用程序的静态文件和Flask应用程序的路由配置到Web服务器上。 以上是基本的步骤,您可以根据您的具体情况进行更改和定制。希望这可以帮助您部署Vue+Flask应用程序到阿里云服务器
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值