django + Vue项目上线部署
django + Vue项目上线部署
0.安装包下载linux系统
-
node.js
wget https://nodejs.org/download/release/v10.16.2/node-v10.16.2-linux-x64.tar.gz # 解压node包 tar -zxvf node-v8.6.0-linux-x64.tar.gz # 配置环境变量,修改/etc/profile,可以直接使用npm和node命令 PATH=$PATH:/opt/node-v10.16.2-linux-x64/bin # 验证node npm node -v npm -v
-
linux与windows互传文件工具
yum -y install lrzsz
-
zip包解压工具
yum -y install unzip
1.Vue部署
1.将vue项目router 下index.js的mode改为'history'
2.将封装axios模块的请求ip更改:
- windows可以直接修改
- linux修改:sed -i 's/127.0.0.1/182.92.100.141/g' /opt/vue_project/westmanager/src/plugins/http.js
3.项目打包:
windows:npm run build
linux: npm run build
4.生成dist文件将,dist文件压缩zip包,拽入虚拟机,执行:unzip dist.zip
5.等待nginx配置
2.python安装
1.安装python前库的环境
yum install gcc patch libffi-devel python-devel zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-devel db4-devel libpcap-devel xz-devel -y
2.下载解压python安装源码包
wget https://www.python.org/ftp/python/3.6.9/Python-3.6.8.tar.xz
xz -d Python-3.6.8.tar.xz
tar -xf Python-3.8.9.tar
3.编译安装,cd到python源码包目录执行:
./configure --prefix=/opt/python3/
make && make install
4.配置python3的环境变量,cd /etc/profile
export PATH=/opt/python3/bin:$PATH
source /etc/profile
3.虚拟环境配置
1.下载虚拟环境安装包
pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple virtualenv
2.创建一个叫west_env虚拟环境
virtualenv --python=python3 west_env
3.进入虚拟环境相关操作:
#激活虚拟环境
source west_env/bin/activate
#退出虚拟环境
deactivate
4.在虚拟环境中下载项目依赖包
- 首先导出项目依赖包,在所在项目中:
pip3 freeze > requirements.txt
- 然后将requirements.txt拽入虚拟机中
- 在虚拟环境执行pip3 install -r requirements.txt
4.django项目
1.settings更改配置:
ALLOW_HOSTS = ['*']
DEBUG = False
2.项目压缩zip,拽入虚拟机,执行unzip 项目名 解压
5.uwsgi配置
1.虚拟环境中下载uwsgi
pip3 install -i https://pypi.douban.com/simple uwsgi
2.创建uwsgi.ini文件
touch uwsgi.ini
3.配置uwsgi
[uwsgi]
# Django-related settings
# the base directory (full path)
# 指定项目的绝对路径的第一层路径(很重要)
chdir = /opt/west_coast__company_project
# Django's wsgi file
# 指定项目的 wsgi.py文件
# 写入相对路径即可,这个参数是以chdir参数为相对路径
module = west_coast__company_project.wsgi
# the virtualenv (full path)
# 写入虚拟环境解释器的绝对路径
home = /opt/west_env
# process-related settings
# master
master = true
# maximum number of worker processes
# 指定uwsgi启动的进程个数(机器配置好的话可以写多点)
processes = 2
# the socket (use the full path to be safe
#socket指的是:uwsgi启动一个socket连接,当你使用nginx+uwsgi的时候,使用socket参数
socket = 0.0.0.0:9000
# 这个参数是uwsgi启动一个http连接,当你不用nginx只用uwsgi的时候,使用这个参数
#http = 0.0.0.0:9000
# ... with appropriate permissions - may be needed
# chmod-socket = 664
# clear environment on exit
vacuum = true
#日志记录配置
daemonize = uwsgi.log
4.启动uwsgi,在uwsgi.ini目录下:uwsgi --ini uwsgi.ini
6.redis配置
1.下载redis
yum install redis
2.redis.conf配置,如果需要远程连接
- 将 bind 127.0.0.1 注释掉
- protected-mode 将yes改成no
3.启动redis
systemctl start redis
7.Mysql配置
1.下载数据库
yum install mariadb-server mariadb -y
2.将windows数据库备份到一个文件中:
mysqldump -uroot -p123 库名 > J:\自己起名.sql
3.将导出备份文件west.sql拽入虚拟机内
4.启动数据库:systemctl start mariadb
5.进入数据库给数据库root设置密码123
set password for root@localhost = password("123");
6.创建一个库,要求名字与项目连接库名字一样
create database 库名
use 库名
7.导入数据表,数据
source /opt/自己起名.sql
8.nginx配置
1.下载nginx:
yum install nginx
2.更改nginx文件:vim /etc/nginx/nginx.conf
3.配置:
server {
#监听80端口
listen 80 default_server;
listen [::]:80 default_server;
server_name 182.92.100.141;
root /usr/share/nginx/html;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
# 指定vue打包dist文件路经
root /opt/dist;
index index.html;
# 保证页面刷新时候,不会出现404
try_files $uri $uri/ /index.html;
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
server {
#监听8000端口 前端发送ajax请求就用8000端口
listen 8000;
# 本机公网ip
server_name 182.92.100.141;
location / {
# 转到后端配置端口,也就是uwsgi配置端口
uwsgi_pass 127.0.0.1:9000;
include uwsgi_params;
}
}
4.启动nginx
/usr/sbin/nginx
# 停止
/usr/sbin/nginx -s stop
# 重启
/usr/sbin/nginx -s reload
-
遇到坑:开发环境下通过 django-cors-headers 解决跨域问题,但是部署完之后又出现跨域问题,就可以解决了。
1.在Vue前端封装axios加一个头参数 axios.defaults.headers['Access-Control-Allow-Origin'] = '*' 2.后端配置允许头参数 CORS_ALLOW_HEADERS = ( ..., 'Access-Control-Allow-Origin' )
-
nginx解决跨域问题配置