前端用Vue,后端用Django, nginx,Mysql
参照:
通过WSL在阿里云上部署Vue项目_阿里云 wsl-CSDN博客
采用Ubuntu系统,
- apt update
- #检查是否已经安装
- mysql --version #检查是否已经安装mysql
- systemctl status mysql #检查mysql的运行状态 systemd命名。
- apt install mysql-server #安装mysql
在云服务器管理控制台,选择安全组,单击安全组,入方向,手工创建端口,Mysql默认使用3306端口。
- #进入mysql命令行
- sudo mysql
-
- #mysql命令行,输入修改root密码.必须以;结尾。
-
- ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password by 'Mysql@1234';
-
- #设定密码后退出
- exit;
- #linux下重新进入mysql。
- mysql -uroot -p #输入上面的密码可以进入。
- #进入mysql不是必须项
- exit; #退出mysql命令行。
- #对mysql进行安全设定
- sudo mysql_secure_installation
- #需要按照屏幕提示进行设置。
- #创建数据库 mysql命令
- create database MyDjango;
- #显示数据库
- show databases;
- python3 --version
- pip --version
-
- #如有必要安装 python 和 pip(阿里云的ubuntu不需要)
- sudo apt install python3
- sudo apt install python-pip
-
-
-
- ### 安装Django和相关包
- pip list
- pip install --upgrade pip #可以不运行。
- pip install django
- sudo apt install libmysqlclient-dev
-
- pip install mysqlclient #这个命令报错。用下面的命令代替
- #取代pip install mysqlclient报错的命令
- sudo apt install python3-mysqldb #安装过后,在pip list 里显示mysqlclient安装完成。
-
- pip install django-cors-headers
- pip install uwsgi
- #安装过后可以同过 pip list 查询
-
-
调整本机文档的settings.py文件,dubug 调整为 False。
使用filezilla将含有manage.py的MyDjango的目录上传到阿里云的 /home目录下。
阿里云的目录下执行 linux命令。
- #数据迁移
- python3 manage.py migrate
- #创建超级用户
- python3 manage.py createsuperuuser
- #收集需要的静态资源写入/static 文件夹
- python3 manage.py collectstatic
-
-
Django部署在uWSGI服务器可以通过配置文件完成。在MyDjango项目目录下创建配置文件uwsgi.ini. 打开文件写入内容。
-
- vim /home/MyDjango/MyDjango/uwsgi.ini #编辑文件
- cat uwsgi.ini #查看文件
-
- #启动uwsgi服务器
- uwsgi --ini uwsgi.ini
- # 这个命令并不会提出到命令行。
创建uwsgi.ini 文件所在目录
soccket=:8080 用于uWSGI服务器和Nginx服务器的通信连接。
uWSGI和Nginx通信连接通过8080端口实现,在Nginx定义配置文件django.conf
- touch /etc/nginx/conf.d/django.conf
- vim /etc/nginx/conf.d/django.conf
启动uWSGI, 重启nginx。
uwsgi --ini /home/MyDjango/MyDjango/uwsgi.ini --daemonize /var/log/uwsgi/mydjango.log
--daemonize (以守护进程模式运行uWSGI,日志保存在后面的文件里,没有目录的话需要新建)
systemctl restart nginx
Vue在打包时没有更改服务器地址,造成前端无法连接后端。修改.vue的访问的网址,127.0.0.1改为47.120.66.77
重新生成 dist文件。 npm run build (覆盖掉原来的dist文件)。用filezilla,删除home下的dist,更新为新的dist文件夹。
systemctl restart nginx
到此大功告成。
两个问题,问题一,后端无法登录, 显示502错误。 问题二,前端无法访问后端。
问题一:报错显示 47.120.66.77:8000 显示502错误 Bad Gateway.
第一步, 502 错误的意义
同时检查 5173接口和80接口正常显示。其他接口如5174 显示服务器拒绝访问。
结论:如此8000接口,服务器是准备好接受访问的。项目没有运行,没有为端口的请求准备数据。
第二步,Django项目显示端口被占用。
Django项目并没有被启动。用django的 runserver 命令启动项目。报错显示8000端口已经被使用。
用 systemctl stop nginx 后,项目可以运行 使用8000端口。
分析结论,Nginx和项目都需要运行。暂时不会使用其他端口运行Django,下一步更改Django.conf文件中的监听端口。
第三步,更改django.conf 文件, uwsgi.ini文件接口
改后文件,端口号对调一下。
结果: systemctl restart nginx 之后结果,8080显示502 bad gateway. 8000显示拒绝访问.
第四步,端口调整后,启动 Django项目
python3 /home/MyDjango/manage.py runserver
程序正常运行
结果:浏览器的8080端口 持续 502错误。 访问8080端口,python程序的terminal有报错信息。可能是uWSGI没有启动。
第五步:端口调整为浏览器访问8080,关闭python runserver,启动uwsgi。
uwsgi --ini /home/MyDjango/MyDjango/uwsgi.ini --daemonize /var/log/uwsgi/mydjango.log
--daemonize (以守护进程模式运行uWSGI,日志保存在后面的文件里,没有目录的话需要新建)
结果: OK. 通过 47.120.66.77:8080/admin 可以登录后端。但是前端不好用。下一步,把端口8080给为5173试一下。
第六步:更改Django.conf的端口。
发现不会终止uWSGI 服务器,只能让系统整个重新启动。
更改uwsgi-ini 的端口到 8080. django.conf 端口到8000. 就是恢复到第一步的状态(后端在uWSGI服务运行的状态下是OK的。)但是前端和后端还是无法连接。
结果:不是阿里云上端口的问题了。
问题一出现的原因,uWSGI服务器运行状态对nginx的干扰的原因,另外后端程序的启动不是通过“python3 manage.py runserver” 来运行的。
问题解决后的状态: 使用uWSGI服务器命令 uwsgi --ini uwsgi.ini --daemonize /../django.log 来以守护流程的方式启动 Django和uwsgi服务器。可以保证后端可用。
验证过程需要重启阿里云的服务器,并利用 systemctl status 命令来检查相关的进程状态。
uWSGI进程不会在服务器不重启的情况下停掉是一个问题点。
第七步:分析问题二,调整vue.conf, django.conf 和 uwsgi.ini 的各种端口可能性,都是前后端可以单独运行,不能互动。
本机的Vue可以访问本机的后端。
需要尝试一下本机被Vue前端是否可以访问服务器的后端。
分别更改signin.vue和product.vue中的网址 从 127.0.0.1 改为47.120.66.77
npm run dev
本机的Vue程序可以访问阿里云的数据了。 (本机和阿里云的product内容是不同的。)检查 uWSGI的log文件,有从本机访问服务器的记录(时间方面的判断)。
第八步:既然是前端的问题,就重新生成 dist文件。 npm run build (覆盖掉原来的dist文件)。用filezilla,删除home下的dist,更新为新的dist文件夹。
systemctl restart nginx
浏览器访问:5173端口,登录成功。
前端的服务器和端口需要调成为何服务器端的设置一致。 开发过程中后端的开发原则上应当比前端提前部署。
打包Vue项目之前,必须将Ajax的请求地址改为服务的公网IP或域名地址,否则无法向后端发送HTTP请求。
pip报错,本机WSL上和阿里云上同样的问题。电脑上的问题莫名其妙的好了。阿里云上也乱试居然问题也解决了。特别验证一下解决的过程,并记录下来。
探索过程如下,重新安装阿里云系统(纯净系统)
- pip install mysqlclient #安装失败。测试
-
- 重新安装linux。
-
- 用root用户。在root目录下操作。
-
- apt update
- apt upgrade
-
- apt list libmysql* #-dev没有安装
- apt list mysql* #Mysql-server没有安装 如下图
apt list (Mysql-server还没有安装)
apt install mysql-server
apt install libmysqlclient-dev
安装成功后,运行 pip install mysqlclient 失败。
用apt search 查找 mysqlclient 相关的linux 包。
apt search mysqlclient # 显示如下图1,2
1,apt install 安装 相关的包,2用 pip install mysqlclent / pip list 检查测试,3不成功就用 apt remove删除对应的包。
实验到 apt install python3-mysqldb #如下图 3
安装过后,pip list 直接显示mysqlclient已经安装。
问题解决。学到了 apt list , apt search 和 pip list. apt show , pip show
pip show mysqlclient
apt show python3-mysqldb
显示都是python Interface to MySQL. 错误的原因 mysqlclient的pip包没有更新到新版本。