赞
踩
重要提示:凡是下面配置中涉及端口号的,都需要在宝塔控制面板-安全 和 自己服务器的防火墙中添加端口规则,这样对应的端口号才能放行;例如:堡塔远程工具的端口22,就必须在宝塔控制面板和云服务器的防火墙中添加,否则连接服务器失败或连接端口失败!!!
由于采用Django+Vue2前后端分离,我们要上传到宝塔服务端就必须要先购买服务器(我选择是阿里云-轻量应用服务器-CentOS8.2宝塔版本)购买完成会有个公域IP,在宝塔控制面板网页下选择Linux面板 8.2.0选择在线安装(建议选择8.0.0以上,7.0的版本在python管理器安装项目依赖会报错SSL),输入服务器IP、SSH账号和密码可以安装宝塔到服务器中,后续通过堡塔远程工具登录到管理后台。
宝塔控制面板网页:https://www.bt.cn/new/download.html
堡塔远程工具:https://www.bt.cn/new/product_ssh.html
完成前端页面所有开发后,要准备打包,对于前端API请求域名要转化为服务器公域IP,因为后端项目也要放到服务器去运行,访问的API接口不再是http://127.0.0.1:8000/而是http://39.xxx.xxx.xxx:8000/
# vue.config.js module.exports = { // 选项... publicPath: "./", lintOnSave: false, outputDir: "build", assetsDir:"static", devServer: { open:true, host:'localhost', port:80, https:false, proxy: 'https://suggest.taobao.com', overlay: { warning: false, errors: false } } }; # 执行npm run build打包项目,生成build文件夹,在Django项下新建文件夹frontEnd用于存储前端打包项目,把build转移到frontEnd目录下,frontEnd与manage.py同级
3-1. 通过 django-cors-headers 库来实现跨域
1) 安装
pip install django-cors-headers
2) 修改 settings.py 配置文件
INSTALLED_APPS = (
##...
'corsheaders'
)
3)添加到中间件列表 corsheaders.middleware.CorsMiddleware
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'corsheaders.middleware.CorsMiddleware',
......
4)添加跨域设置
CORS_ORIGIN_ALLOW_ALL = True # 允许所有 domain 访问 或 CORS_ORIGIN_ALLOW_ALL = False # 允许某些域访问 CORS_ORIGIN_WHITELIST = [ 'https://127.0.0.1:8080', ] CORS_ALLOW_METHODS = ( 'DELETE', 'GET', 'OPTIONS', 'PATCH', 'POST', 'PUT', 'VIEW', ) CORS_ALLOW_HEADERS = ( 'accept', 'accept-encoding', 'authorization', 'content-type', 'dnt', 'origin', 'user-agent', 'x-csrftoken', 'x-requested-with', )
3-2、修改settings.py配置
# 开发模式为True,实际生产False DEBUG = False MEDIA_URL = '/media/' MEDIA_ROOT = BASE_DIR / 'static/media' # 设置访问前端文件的路径 TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join(BASE_DIR, 'frontEnd/build') # 前端打包 ,os.path.join(BASE_DIR, 'templates')] , 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', 'django.template.context_processors.media', ], }, }, ] # 把本地数据库导入到宝塔数据库中,设置好用户名和密码 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'XXXXXX', # 数据库名称 'USER': 'XXXXXX', # 用户名 'PASSWORD': 'XXXXXX', # 密码 'HOST': 'xxx.xxx.xxx.xxx', # 服务器地址 39.xxx.xxx.xxx 'PORT': '3306', 'OPTIONS': {'charset': 'utf8mb4'}, } } LANGUAGE_CODE = 'zh-hans' TIME_ZONE = 'Asia/Shanghai' USE_I18N = True USE_L10N = True USE_TZ = True STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, "frontEnd/build/static"), # 前端static的静态资源文件 os.path.join(BASE_DIR, "static/admin") # django后台+simpleui ] STATIC_ROOT = os.path.join(BASE_DIR, "static") # 生产模式,静态文件将收集到static文件夹下 ALLOWED_HOSTS = ['*'] CORS_ORIGIN_ALLOW_ALL = True CORS_ORIGIN_WHITELIST = ['*'] # 跨域设置,可设置多个路径 [''http://39.xxx.xxx.xx:8000''] CORS_ALLOW_METHODS = ( 'DELETE', 'GET', 'OPTIONS', 'PATCH', 'POST', 'PUT', 'VIEW', ) CORS_ALLOW_HEADERS = ( 'accept', 'accept-encoding', 'authorization', 'content-type', 'dnt', 'origin', 'user-agent', 'x-csrftoken', 'x-requested-with', )
3-2、创建wsgi.py文件
在settings.py同级创建wsgi.py文件。
"""
WSGI config for questionBank project.
It exposes the WSGI callable as a module-level variable named ``application``.
For more information on this file, see
https://docs.djangoproject.com/en/4.1/howto/deployment/wsgi/
"""
import os
from django.core.wsgi import get_wsgi_application
n = get_wsgi_application()
3-3、导出项目依赖包
在宝塔服务器添加Python项目时,会读取requirements.txt下的依赖列表自动安装。
pip freeze > requirements.txt
3-4、收集静态文件
python manage.py collectstatic # 必须调到生产模式才能成功
后续如果前端项目有修改改动,必须把前端项目重新打包放到frontEnd文件夹下重新收集静态文件或上传到服务器在宝塔服务器进入项目终端重新收集,否则服务器前端样式会丢失。
4-1、选择推荐安装套件(初次进入)
4-2、添加站点、删除多余文件
4-3、上传整合后的项目代码
就是整个django后端项目代码,里面也包含了前端打包的项目放到服务器下,而且我们之前也执行了3-3,3-4步骤
4-4、新建uwsgi.ini和uwsgi.log并配置
在项目下新建uwsgi.ini文件并配置,再新建uwsgi.log存储日志,便于后续调用接口查看是否报错
#添加配置 [uwsgi] #配置运行时的端口,8000就是你前端axios设置要访问的端口 http-socket = 0.0.0.0:8000 #配置和nginx接的socket接 socket=127.0.0.1:8997 #配置目路,目的所在目 buffer-size = 65536 chdir=/www/wwwroot/39.xxx.xxx.xxx/ # 换成自己的IP!!! #配置wsgi接口模文件路,也就是wsgi.py文件所在的目录 wsgi-file= questionBank/wsgi.py #配置的程 processes=4 #配置每程的程 threads=2 #配置管理主程 master=True #配置存放主程的程文件 pidfile=uwsgi.pid #配置uwsgi日志 daemonize=/www/wwwroot/39.xxx.xxx.xxx/uwsgi.log # 换成自己的IP!!!
4-5、修改站点配置文件
location / {
include uwsgi_params;
uwsgi_pass 127.0.0.1:8997; #端口要和uwsgi里配置的一样
uwsgi_param UWSGI_SCRIPT questionBank.wsgi; #wsgi.py所在的目录名+.wsgi
uwsgi_param UWSGI_CHDIR /www/wwwroot/39.xxx.xxx.xxx/; #项目路径
}
location /static/ {
alias /www/wwwroot/39.xxx.xxx.xxx/static/; #静态资源路径
}
4-6、安装python项目管理器
在宝塔控制面板-软件商店-搜索python项目管理器并安装,然后在点击添加项目,python版本我项目使用是3.10.0的,默认是需要下载的,点击版本管理下载对应项目版本。框架我是django,启动方式uwsgi,启动文件所在路径就uwsgi.py所在的目录,端口8997就是前面对应的uwsgi.ini中的端口,然后点击确认添加即可。
如果事先执行了3-3步骤导出了requirements.txt,那么会自动安装相应依赖,如果没有并报错的话,就需要查看报错日志,可能是某些依赖需要手动安装,或者是服务器CentOS8.2宝塔版本是需要8.x以上的,7.x的话我试过会报错SSL。
4-7、配置Nginx管理
在软件中点击选择Nginx管理,选择配置修改,其中最重要的是新增的server那部分 server{ listen 80; server_name 39.xxx.xxx.xxx; index index.html index.htm index.php; root /www/wwwroot/39.xxx.xxx.xxx/frontEnd/build; include enable-php.conf; access_log /www/wwwlogs/access.log; location /static/ { alias /www/wwwroot/39.xxx.xxx.xxx/static/; # 静态资源路径 add_header Access-Control-Allow-Origin *; # 防止图片跨域 add_header Access-Control-Allow-Methods 'DELETE,PATCH,PUT,VIEW,GET, POST, OPTIONS'; add_header Access-Control-Allow-Headers 'ACCEPT,Accept-Encoding,AUTHORIZATION,ORIGIN,Access-Token,DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; } location / { proxy_pass http://127.0.0.1:8000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }
已完成了整个项目服务器的配置部署,下面再额外介绍进入项目虚拟环境的方法。
4-8、进入项目虚拟环境
1、进入虚拟环境
每个人机子虚拟环境地址不一样,先在项目终端搜一下虚拟环境的入口:
find / -name activate
执行命令,进入虚拟环境(一般是6ef364d0181464ca4a42c6bdf1ffbbe9_venv这种在项目下有个很长名称的venv文件夹就是了,而不是我们自己后端项目的那个venv):
source /www/wwwroot/wl01.weiyuting.cn/6ef364d0181464ca4a42c6bdf1ffbbe9_venv/lib/python3.8/venv/scripts/common/activate
出现项目名 VENV_PROMPT 这个标记,才说明已经成功进入虚拟环境。此时可以看一下虚拟环境中安装的依赖:
2、在虚拟环境中再次进入项目根目录
cd /www/wwwroot/39.xxx.xxx.xxx/
此时可以执行在开发模式中的启动服务命令,进行测试。
python manage.py runserver
或者在虚拟环境中操作收集静态文件命令
python manage.py collectstatic
到此为止,所有的项目部署流程都完成了,后面我们直接路径访问:
前端:http://39.xxx.xxx.xxx/#/
后端管理后台:http://39.xxx.xxx.xxx/admin/
大多数都是样式丢失问题,一定要看清楚静态文件有没有放到服务器的static目录下,如果浏览器控制台报错前端样式丢失,那就重新收集静态文件覆盖过去和看清楚 STATICFILES_DIRS 有没有前端静态文件路径。我是安装自己的前后端项目分离来部署到宝塔上的,遇到问题一定要百度!!!多看看相似报错案例或者询问搜索AI伙伴来获得解决方法。
搜索AI伙伴:https://chat.baidu.com/?sourceType=pc_r_backup
相似部署案例1:https://blog.csdn.net/carl_liutao/article/details/131500414
相似部署案例2:https://blog.csdn.net/qq_45859826/article/details/124774607
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。