目录
1. 部署思路
由于我们采用前后端分离开发的思路,即vue+django。所以我们的部署思路是先将vue和django整合在一起,然后可以像部署普通django项目一样去部署我们整合后的项目。
这里我们采用宝塔去部署我们的项目。根据上面的介绍我们的部署主要分为两大步骤:
- vue+django项目整合
- 宝塔部署整合后的项目
2. vue+DJango项目整合
2.1 打包vue
现在假设你的vue项目已经完成开发,在进行打包之前你需要进行打包配置:
在vue.config.js中配置:
assetsDir: "static",
同时检查你的axios的baseURL设置是否正确
格式: http://公网ip:设置访问的端口
这里由于django默认的端口是8000,设置访问的端口搞出8000就行,如:
baseURL: 'http://139.196.42.209:8000',
现在,终端输入npm run build
打包前端项目,最后在本项目目录下得到dist,其中包含:
2.2 django根目录下新建文件夹放置打包后的dist
2.3 setting.py设置访问前端文件的路径
'DIRS': [os.path.join(BASE_DIR, 'frontEnd/dist')],
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "frontEnd/dist/static"),
]
STATIC_ROOT = os.path.join(BASE_DIR, "static")
2.4 测试成功,关闭DEBUG
这里提一下,既然选择前后端分离开发,跨域问题想必在此前你已经解决了,故不再赘述。
整合完毕后,终端输入python manage.py runserver
测试,crtl+点击http://127.0.0.1:8000
后你能看到自己的前端就是成功了。
随后在setting.py里关闭DEBUG,DEBUG=False
至此项目已经整合完毕。
3. 宝塔部署Django
来到你的宝塔面板,进行下列的一系列步骤:
3.1 创建站点
切记:没有就写自己的IP
3.2 删除站点多余文件
站点上传整合后的项目代码,上传后目录如下:
3.4 在刚才的目录里新建uwsgi.ini并配置
配置文件内容如下:
#添加配置
[uwsgi]
#配置运行时的端口,8000就是你前面axios设置要访问的端口
http-socket = 0.0.0.0:8000
#配置和nginx接的socket接
socket=127.0.0.1:8997
#配置目路,目的所在目
buffer-size = 65536
chdir=/www/wwwroot/device_system.com/
#配置wsgi接口模文件路,也就是wsgi.py文件所在的目
wsgi-file= DistributedSystem/wsgi.py
#配置的程
processes=4
#配置每程的程
threads=2
#配置管理主程
master=True
#配置存放主程的程文件
pidfile=uwsgi.pid
#配置uwsgi日志
daemonize=/www/wwwroot/device_system.com/uwsgi_01.log
3.5 修改站点配置文件
配置nginx
location / {
include uwsgi_params;
uwsgi_pass 127.0.0.1:8997; #端口要和uwsgi里配置的一样
uwsgi_param UWSGI_SCRIPT DistributedSystem.wsgi; #wsgi.py所在的目录名+.wsgi
uwsgi_param UWSGI_CHDIR /www/wwwroot/www.device_system/; #项目路径
}
location /static/ {
alias /www/wwwroot/www.device_system/static/; #静态资源路径
}
3.6 Python项目管理器(没有先去下载)中添加Django项目
添加配置
3.7 生成静态文件
进入终端
进入虚拟环境
source XX_venv/bin/activate(观察目录,替换成自己的)
生成静态文件
python manage.py collectstatic
运行结束后,观察到对应的目录下有static文件夹生成即可
3.8 放行8000端口,测试
这里还要确认一下你自己云服务器原来平台那里的端口也要放行
最后,确定python项目管理器运行,前面的站点也正常运行,浏览器输入的http://你的IP
即可访问项目