Vue+Django部署Ubuntu服务器

Vue+Django部署Ubuntu服务器

首先用MobaXterm（或其他软件）连接上ubuntu服务器

ubuntu服务器上需安装：

  • mysql

  • python3（django+uwsgi）

  • nginx

整体架构

查看端口与进程

查看mysql的3306、django项目的8000等要用的端口有没有被占用

1
2
3
4
# -a查看已连接的服务端口，-ap查看所有的服务端口
netstat -ap | grep 8000
# 关闭使用端口的程序
kill -9 pid号

查看mysql、nginx等进程

1
2
3
4
5
# 输出格式为：拥有者 PID PPID CPU 系统启动时间 登入者的终端机位置 使用掉的CPU时间 下达的命令
# 该命令最少有一个结果，即该命令本身
ps -ef | grep mysql
# 关闭进程
kill -9 pid号

mysql安装配置

mysql8.0

安装与密码基本配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 安装mysql（可只安装server）
sudo apt-get install mysql-server
sudo apt-get install mysql-client
# 查看mysql服务状态
systemctl status mysql.service
# mysql基本安全配置
# 配置的内容为：增加密码组件；设置root密码策略和密码；是否禁用匿名用户；是否不允许root远程登录；是否移除test数据库；是否重新加载权限表
sudo mysql_secure_installation
# 进入mysql
mysql -u root -p
# 设置密码策略
set global validate_password.policy=LOW;
# 设置密码长度
set global validate_password.length=6;
# 修改root密码（建议密码不要设太简单）
alter user 'root'@'localhost' identified with mysql_native_password by 'password';
# 退出mysql
exit

若忘记密码，据说不能用skip-grant-tables来跳过密码登录（ubuntu20.04安装mysql_Ubuntu 20.04安装MySQL 8.0.20记_zibuyu9的博客-CSDN博客）

1
2
# 使用该命令输出的默认用户名密码登录，再修改密码
sudo cat /etc/mysql/debian.cnf

创建两个新用户，一个供项目访问一个供远程访问（host不同），并授予项目数据库的所有权限、并使mysql能够远程连接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 进入mysql数据库
use mysql;
# 查看user表
select * from user;
# 查看用户和host
select user,host from user;
# 创建新用户（一个host为localhost，一个host为远程主机ip地址）
create user '用户名'@'要访问的主机ip地址（%为任意）' identified by 'password';
# 授予该用户数据库权限
grant all privileges on 数据库名（*为任意）.表名（*为任意） to '用户名'@'要访问的主机ip地址（%为任意）';
# 或
grant all privileges on 数据库名（*为任意）.表名（*为任意） to '用户名'@'要访问的主机ip地址（%为任意）' with grant option;
# 刷新权限，使之生效
flush privileges;
# 退出mysql
exit
# 修改mysqld.cnf配置文件中的bind-address
sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf
bind-address = 127.0.0.1,服务器ip地址
# 重启mysql
sudo systemctl restart mysql.service
# 查看3306端口的地址
ss -anplt | grep 3306
# 验证是否能够远程连接
mysql -u 用户名 -p -h 数据库的ipv4地址

开启数据库操作日志

1
2
3
4
# 查看日志相关设置（是否开启、日志文件位置）
show variables like 'gen%';
# 开启日志
set global general_log=ON;

python3虚拟环境

创建虚拟环境来运行项目，方便python环境管理

1
2
3
4
5
6
7
8
9
10
11
12
# 安装virtualenv包
pip install virtualenv
# 创建虚拟环境
virtualenv 环境名称
# 指定python版本创建虚拟环境
virtualenv 环境名称 --python=python3.8
# 激活虚拟环境
source 虚拟环境目录/bin/activate
# 退出虚拟环境
deactivate
# 删除环境删除文件夹即可
rm -rf 环境名称

也可以使用virtualenvwrapper统一配置和管理虚拟环境

上传本地项目

vue中的后端api请求的请求ip地址改为服务器ip地址，端口应为后面nginx监听的端口

首先将vue打包放到django项目中，然后上传django项目；或者vue项目也上传

可以使用git上传项目或直接将项目打包文件传输至服务器

vue环境安装

1
2
3
4
5
6
7
8
9
10
11
# 安装nodejs
sudo apt-get install nodejs
# 查看nodejs和npm版本
node -v
npm -v
# 安装vue2脚手架
sudo npm install -g vue-cli
# 安装vue3脚手架
sudo npm install -g @vue/cli
# 查看vue版本
vue -V

上传成功后在虚拟环境中安装django依赖包

1
2
3
4
# 本地django项目生成依赖包
pip freeze > requirements.txt
# 在服务器安装依赖包
pip install -r requirements.txt

服务器上安装报错的话可以根据生成的requirements.txt手动安装

其中，下载mysqlclient的方法为

1
2
sudo apt-get install libmysqlclient-dev
pip install mysqlclient

进入mysql创建django的数据库，并修改django设置文件中的数据库配置

1
2
mysql -u root -p
create database example;

最后运行一下django项目，看能不能成功

1
2
3
python manage.py makemigrations
python manage.py migrate
python manage.py runserver

若出现问题，可参考部署windows一文

uwsgi安装配置

安装

1
2
# 在虚拟环境下
pip install uwsgi

配置uwsgi，新建uwsgi.ini文件并配置（路径不能用~符号，只能用根目录/开始写绝对路径），其中uwsgi.log需手动创建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
[uwsgi]
# 开启主进程
master = true
# 最大进程数量
processes = 8
# 启用线程
enable-threads = true
# 每个进程下的线程数
threads = 4
# django项目路径
chdir = django项目路径
# wsgi.py文件的位置
wsgi-file = django项目wsgi.py文件路径
# 该端口为后端django的运行端口，与nginx的配置一致
socket = 服务器ip:8001
chmod-socket = 660
# 当服务器退出的时候自动删除unix socket文件和pid文件
vacuum = true
#uwsgi的运行状态
status = django项目路径/uwsgi.status
# uwsgid的进程id
pidfile = django项目路径/uwsgi.pid
# 输出日志
logto = django项目路径/uwsgi.log
# 虚拟环境路径
virtualenv = 虚拟环境路径

运行uwsgi，启动django项目

1
uwsgi --ini uwsgi.ini

uwsgi常用命令

1
2
3
4
5
6
# 运行
uwsgi --ini uwsgi.ini
# 停止
uwsgi --stop uwsgi.pid
# 重启
uwsgi --reload uwsgi.pid

uwsgi后台运行

用systemd将uwsgi设置为系统服务，开启uwsgi服务使其在后台一直运行

在虚拟环境中查看虚拟环境的uwsgi命令路径

1
whereis uwsgi

在/etc/systemd/system下创建uwsgi.service文件（路径应为绝对路径）

1
2
3
4
5
6
7
8
[Unit]
Description=singing evaluation music web uwsgi
After=network.target
[Service]
ExecStart=虚拟环境的uwsgi命令路径 --ini uwsgi.ini路径
ExecStop=虚拟环境的uwsgi命令路径 --stop uwsgi.pid路径
[Install]
WantedBy=multi-user.target

开启uwsgi服务

1
systemctl start uwsgi.service

uwsgi服务的常用命令

1
2
3
4
5
6
7
8
9
10
# 开机自启动
systemctl enable uwsgi.service
# 启动
systemctl start uwsgi.service
# 停止
systemctl stop uwsgi.service
# 重启
systemctl restart uwsgi.service
# 查看状态
systemctl status uwsgi.service

nginx安装配置

安装

1
sudo apt-get install nginx

配置项目的nginx服务器块

在/etc/nginx/sites-available目录下新建配置文件example并配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
server {
     listen       8000;  # 项目访问端口
     server_name  服务器ip;
     # root         ;
     #charset koi8-r;

     #access_log  logs/host.access.log  main;

     # location / {
     #     root ;
     #     index /templates/index.html;
     # }

     location /app {  # 前端api请求
         uwsgi_pass 服务器ip:8001;  # django运行端口，也即uwsgi配置中的socket端口，无需http://
         include /etc/nginx/uwsgi_params;
     }

     location /static {
         root django项目的static目录路径;  # 末尾加/
     }

     error_page   500 502 503 504  /50x.html;
     location = /50x.html {
         root   html;
     }

}

在sites-enabled目录建立该配置的链接，使nginx启动时读取该配置

1
sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/

重新启动nginx

1
service nginx restart

登录刚配置的网址看是否有nginx的欢迎界面

nginx常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 开机自启动
systemctl enable nginx
# 启动
service nginx start
systemctl start nginx
# 停止
service nginx stop
systemctl stop nginx
# 重启
service nginx restart
systemctl restart nginx
# 查看状态
service nginx status
systemctl status nginx
# 重新加载
service nginx reload
systemctl reload nginx
sudo nginx -s reload
# 若修改了/etc/nginx/nginx.conf文件，先测试配置是否正确
sudo nginx -t

nginx日志文件位置

1
2
3
4
# 请求日志
/var/log/nginx/access.log
# 错误日志
/var/log/nginx/error.log

访问项目

运行nginx和uwsgi，访问服务器ip地址，端口为nginx的监听端口

参考

服务器部署 Vue 和 Django 项目的全记录 - ZewanHuang - 博客园 (cnblogs.com)

ubuntu安装Mysql数据库及安全配置_sudo mysql_secure_installation_昵称还在想呢的博客-CSDN博客

Ubuntu 中安装和配置 Nginx - Tozhang - 博客园 (cnblogs.com)

开发
#教程
Vue+Django部署Ubuntu服务器
https://wangaaayu.github.io/blog/posts/61a84e4c/
作者
WangAaayu
发布于
2023年5月18日
更新于
2023年9月2日
许可协议