- CentOS8部署（Vue + Django）前后端分离项目详细版
- 遇到的问题
- 跨域解决的方法
- 工具
- 1. 基本环境部署
- 安装相关的依赖包
- 安装Python 3.9.10
- 安装Node环境
- 安装nginx
- 安装MySQL
- 在CentOS8远程链接里新建poes数据库
- 2. 前后端项目搭建（Vue + Django），Nginx解决跨域失效问题
- 修改Django配置文件，确保能够正常连接MySQL数据库
- 安装Django依赖包
- Django 数据库迁移
- 将已备份好的数据导入到MySQL数据库
- 安装Vue脚手架依赖
- 解释Vue项目打包遇到的种种问题
- 前端Vue项目打包
- 3. 部分项目功能展示
- 具体页面显示（以学生管理页面为例）
- 添加对话框
- 修改对话框
- 删除对话框
- 详情对话框
- 分页功能
- 分数可视化（折线图）
- 分数可视化（饼状图）
- 分数可视化（柱状图）
- 4. 总结
- 前端框架
- 后端框架
- 结语
- 参考资料
- 将前端Vue项目打包：npm run build。
- Vue项目打包后跨域失效。
- 前端通过Node解决跨域
- 后端通过Django解决跨域
- 通过nginx反向代理解决跨域（本次实验使用的方法）
- CentOS 8.5
- Python 3.9.10
- node v16.14.0
- npm 8.3.1
- Navicat Premium 15
这里已经默认你按照好CentOS8了，并且已经配置好网络等基本信息。
1. 基本环境部署 安装相关的依赖包CentOS 8没有安装epel源的问题。安装epel源后可以问题解决
yum install epel-release
这里会出错，显示不能正常安装
上网搜到原因解释： CentOS Linux 8在2022年12月31日来到生命周期终点（End of Life，EoL）。即CentOS Linux 8 *** 作系统版本结束了生命周期（EOL），Linux社区已不再维护该 *** 作系统版本。所以原来的CentOS Linux 8的yum源也都失效了！最终导致此问题的产生。
所以我们更换CentOS Linux 8的yum源：
# 备份原生CentOS 8源 *** 作
cd /etc/yum.repos.d/
mkdir bak
mv CentOS-Linux-* bak
# 下载安装CentOS 8源
wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-vault-8.5.2111.repo
# 建立新的元数据缓存
yum makecache
以上 *** 作正常 *** 作完后就可以进行相关依赖安装
yum install epel-release
yum install openssl openssl-devel -y
在CentOS8里是默认已经按照好Python3的，但是这个版本太低了（Python 3.6.x），不符合我项目的要求，所以需要重装Python3。（建议不要删除原生Python 3.6.x再安装，因为这样可能会出很多奇怪的问题。直接安装Python 3.9就可以了）
先用Xftp上传所需要的压缩包，这里我上传的目录是在/home/zyh/tools下。你放在自己喜欢的文件夹下就可以了
进入到/home/zyh/tools目录下，然后进行解压
cd /home/zyh/tools
tar -zxvf Python-3.9.10.tgz
解压完后开始进行编译安装 *** 作
mv Python-3.9.10 ../ # 这一步可以忽略不做
cd Python-3.9.10 # 进入到Python 3.9.10目录
# 开始编译安装 *** 作
./configure --enable-optimizations
make && make install
验证是否安装成功
python3 -V # 显示版本则说明安装成功
python3 -m pip install --upgrade pip # 升级pip3
将你要安装的Node上传到Xftp，然后解压它
# 解压node压缩包
tar -zxvf node-v16.14.0-linux-x64.tar.gz
# 移动文件夹到你喜欢的目录下
mv node-v16.14.0-linux-x64 ../
# 进入刚才解压好的node文件夹下
cd ../node-v16.14.0-linux-x64/
建立软连接
# 查看node安装的目录
pwd
# 建立软连接，在node的bin目录有npm和node。将这两个文件的软连接建立在/usr/bin目录就可以使用了
ln -s /home/zyh/node-v16.14.0-linux-x64/bin/npm /usr/bin/npm
ln -s /home/zyh/node-v16.14.0-linux-x64/bin/node /usr/bin/node
# 查看是否安装成功（出现版本号就是安装成功）
node -v && npm -v
更换npm源
# 修改为淘宝源
npm config set registry https://registry.npm.taobao.org
# 查看是否更换成功
npm config get registry
全局安装cnpm、vue和yarn
# -g 表示全局安装
npm install -g cnpm
npm install -g vue-cli
npm install -g yarn
# 在node-v16.14.0-linux-x64的bin目录下可以看到cnpm、vue和yarn都安装成功。接下来建立软连接
ls bin/
# 建立软连接
ln -s /home/zyh/node-v16.14.0-linux-x64/bin/cnpm /usr/bin/cnpm
ln -s /home/zyh/node-v16.14.0-linux-x64/bin/vue /usr/bin/vue
ln -s /home/zyh/node-v16.14.0-linux-x64/bin/yarn /usr/bin/yarn
添加nginx源
rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
安装 Nginx
yum install -y nginx
启动 Nginx 服务
systemctl start nginx.service # 启动nginx服务
systemctl enable nginx.service # 设置开机启动nginx服务
systemctl status nginx.service # 查看nginx服务状态
防火墙开放80端口
# 防火墙开放80端口
firewall-cmd --permanent --zone=public --add-port=80/tcp
# 刷新防火墙配置
firewall-cmd --reload
查看nginx是否安装成功：192.168.1.31（CentOS8的IP地址）
看到这个页面就表示安装成功了！
nginx配置相关信息
- 自定义的配置文件放在/etc/nginx/conf.d
- 项目文件存放在/usr/share/nginx/html/
- 日志文件存放在/var/log/nginx/
- 还有一些其他的安装文件都在/etc/nginx
下载安装MySQL源
# 下载MySQL的yum源
rpm -ivh https://repo.mysql.com//mysql80-community-release-el7-1.noarch.rpm
# 安装MySQL
yum install mysql-server
设置不区分大小写
vim /etc/my.cnf
在[mysqld]下，添加以下内容
lower_case_table_names=1 # 让MYSQL大小写不敏感(1-不敏感，0-敏感)
启动MySQL
systemctl start mysqld.service # 启动MySQL服务
systemctl enable mysqld.service # 设置开机启动MySQL服务
systemctl status mysqld.service # 查看MySQL服务状态
进入MySQL数据库（此时是空密码）：
mysql -uroot -p
use mysql; # 使用mysql数据库
ALTER USER 'root'@'localhost' IDENTIFIED BY '123456'; # 设置密码为：123456
flush privileges; # 刷新
exit
防火墙开放3306端口
firewall-cmd --permanent --zone=public --add-port=3306/tcp # 开放3306端口
firewall-cmd --reload # 刷新防火墙
设置可以远程登录MySQL服务。编辑/etc/my.cnf文件，在[mysqld]下面加上这句话
vim /etc/my.cnf
default_authentication_plugin=mysql_native_password
再次登陆到mysql命令行
mysql -u root -p123456 # 登录MySQL命令行
use mysql; # 使用mysql数据库
select host, user, authentication_string, plugin from user; # 查看详情
update user set host='%' where user = 'root'; # 设置所有的IP都可以访问
flush privileges; # 刷新权限
exit # 退出MySQL命令行
使用远程工具链接检测刚才的配置是否成功
接下来就是重点了，把你自己的前后端项目放上去。这里我把我自己写的Python在线考试系统放上去作为例子
- poes：整个Django的项目
- poes/poes_ui：整个Vue的项目
- poes/poes：是Django的配置文件部分
- poes/mysql：是数据库备份文件
- poes/manage.py：是Django的启动信息文件
- poes/requirements.txt：是Django的依赖库
进入到poes/settings.py配置文件里
vim poes/settings.py
# 数据库设置
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'poes', # 数据库名称
'USER': 'root', # root身份登录
'PASSWORD': '123456', # root身份的密码
'HOST': '127.0.0.1', # 远程IP地址，因为这里是CentOS8连接自己的数据库。所以连本地IP即可。
'POST': 3306,
'OPTIONS': {
"init_command": "SET foreign_key_checks = 0;",
}
}
}
pip3 install -r requirements.txt
python3 manage.py makemigrations # 将model层转为迁移文件migration
python3 manage.py migrate # 将新版本的迁移文件执行，更新数据库。
在Navicat Premium 15上看看是不是数据库迁移成功了
查看一下我们要导入sql文件的完整路径
mysql -uroot -p123456 # 进入MySQL命令行
use poes; # 使用poes数据库
source /home/zyh/poes/mysql/poes7.sql; # 导入sql数据的完整路径
因为我备份数据量特别的大，所以这里导入的过程中会很慢
cd poes_ui
npm install
编辑vue.config.js文件（poes/poes_ui/vue.config.js）
vim vue.config.js
# 把里面host: 'localhost',
# 改成为host: '0.0.0.0',
到这里，如果你只是在虚拟机上部署这个项目的话，直接启动Vue和Django就可以正常使用了
npm run serve # 在poes/poes_ui文件夹下启动Vue项目
python3 manage.py runserver # 在poes文件夹下启动Django项目
但是如果你想把前后端分离项目部署到云平台上，就需要对前端Vue进行打包（npm run build）。不然你会发现它的登录页面需要很长很长的时间才能够正常登录（亲身经历的教训）。
下面来说明这个错误（问题）的原因，你也可以跳出去这部分的说明
让防火墙开放8080端口（Vue项目启动的端口）
firewall-cmd --permanent --zone=public --add-port=8080/tcp # 防火墙开放8080端口
firewall-cmd --reload # 刷新防火墙
现在展示的是Vue项目不打包的情况下，会有什么问题（错误 *** 作）
确保你现在已经是正常启动了前端Vue和后端Django，然后正常访问一下看看：192.168.1.31:8080
按F12来到开发者工具这边看看
前端Vue项目打包
在文件夹poes/poes_ui下,运行该命令就可以进行打包 *** 作。记住此时打包完成后，之前设置node进行的代理跨域就失效了。需要nginx反向代理
npm run build
进入dist目录下，将所有的文件索引从/改成./
cd dist
ls
vim index.html
你生成的index.html文件可能跟我的不一样，所以最好自己手动修改。。。
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="./favicon.ico">
<title>poes_ui</title>
<link href="./css/app.b7f07e88.css" rel="preload" as="style">
<link href="./css/chunk-vendors.306ea845.css" rel="preload" as="style">
<link href="./js/app.4a13a454.js" rel="preload" as="script">
<link href="./js/chunk-vendors.eeda85b0.js" rel="preload" as="script">
<link href="./css/chunk-vendors.306ea845.css" rel="stylesheet">
<link href="./css/app.b7f07e88.css" rel="stylesheet">
</head>
<body>
<noscript><strong>We're sorry but poes_ui doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong></noscript>
<div id="app"></div>
<script src="./js/chunk-vendors.eeda85b0.js"></script>
<script src="./js/app.4a13a454.js"></script>
</body>
</html>
再把整个dist文件夹移动到/usr/share/nginx/html/目录下
mv ../dist/ /usr/share/nginx/html/
再去修改nginx的配置文件
vim /etc/nginx/nginx.conf
server {
# 监听80端口
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
# nginx网站的根目录
root /usr/share/nginx/html/dist;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
}
# nginx代理后端的8000端口
location /api/v1 {
proxy_pass http://localhost:8000/api/v1;
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
重启nginx服务
systemctl restart nginx.service
确保后端Django的服务是启动的，在poes目录下
python3 manage.py runserver
在浏览器上访问CentOS 8的IP地址：192.168.1.31
至此，完整的Vue + Django项目搭建成功了。如果是你在阿里云上部署云平台的话，启动开放阿里云上防火墙规则（CentOS 8上一个防火墙规则，阿里云的安全组上一个防火墙规则）
这个Poes（Python在线考试系统）是我个人做的毕业设计的项目。采用前后端分离（Vue + Django）。是我第一个完整的前后端分离项目，所以上面还有一些BUG未修复。我已经把该项目放到码云上了，现在暂时还没公开该项目。等到我顺利毕业后，我会考虑公布该项目的所有代码。
参考资料https://blog.csdn.net/sinat_27690807/article/details/111505635
https://blog.csdn.net/qq_37143673/article/details/102696032
https://cloud.tencent.com/developer/article/1076602
https://blog.csdn.net/qq_33919114/article/details/104635576
https://blog.csdn.net/fuck487/article/details/103951520
https://cloud.tencent.com/developer/article/1801077
https://zhuanlan.zhihu.com/p/367327903
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）