vue+drf的前后端分离部署笔记

前端部署过程

端口划分：

vue+nginx的端口 是81 
vue向后台发请求，首先发给的是代理服务器，这里模拟是nginx的 9000 
drf后台运行在  9005端口上

1.获取前端代码

wget

2.解压缩，准备编译前端代码

unzip 07-luffy_project_01.zip

3.下node源码，配置nodejs编译环境

wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz

4.配置nodejs的环境变量

tar -zxvf node-v8.6.0-linux-x64.tar.gz
# 加入PATH中
PATH="/opt/python367/bin/:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin:/vuedrfs24/node-v8.6.0-linux-x64/bin"

5.安装vue代码所需的模块

进入前端代码的目录，找到package.json文件，里面定义了前端所需要的模块信息
[root@s24_linux 07-luffy_project_01]# pwd
/vuedrfs24/07-luffy_project_01

6.修改vue的数据提交地址，修改如下配置文件

/vuedrfs24/07-luffy_project_01/src/restful/api.js 

# 批量替换ip地址信息
sed -i  's/127.0.0.1:8000/192.168.16.85:9000/g'  src/restful/api.js

7.执行安装模块的命令

# 进入vue源码目录
# 安装vue模块，默认去装package.json的模块内容，如果出现模块安装失败，手动再装
npm install 
# 始编译前端代码，生成dist静态文件夹，前端所有代码，都打包编译生成了一个dist
npm run build

8.生成了dist静态文件夹之后，丢给nginx去处理即可

#返回路飞首页的静态文件服务器
server {
	listen 81;
	server_name _;
	#最低级url匹配，所有请求都走到了这里
	location / {
	root  /code/07-luffy_project_01/dist;
	index  index.html;
	}
}

#反向代理虚拟主机，vue的请求转发给drf
server {
listen 9000;
server_name _;
location / {
uwsgi_pass 0.0.0.0:9005;
include uwsgi_params;
}

}

9.重启nginx

nginx -s reload

后端部署过程

1.整一个新的路飞虚拟环境，然后下载后端代码

mkvirtualenv s24luffy

2.下载后端代码

wget

3.解决drf运行的模块问题（最好使用requirements.txt文件去处理模块问题）

[root@web02 opt]# cat requirements.txt
	certifi==2018.11.29
	chardet==3.0.4
	crypto==1.4.1
	Django==2.1.4
	django-redis==4.10.0
	django-rest-framework==0.1.0
	djangorestframework==3.9.0
	idna==2.8
	Naked==0.1.31
	pycrypto==2.6.1
	pytz==2018.7
	PyYAML==3.13
	redis==3.0.1
	requests==2.21.0
	shellescape==3.4.1
	urllib3==1.24.1
	uWSGI==2.0.17.1

4.用uwsgi去启动drf后台

  • 创建uwsgi.ini文件，写入如下参数
[uwsgi]

# 填写项目的完整绝对路径，第一层
chdir = /vuedrfs24/luffy_boy

#指定django的wsgi文件路径，填写相对路径
module  = luffy_boy.wsgi  

#填写虚拟环境的绝对路径
home = /root/Envs/s24luffy

master = true

#定义程序的多进程数量的，以cpu核数的2倍+1数量填写   2n+1 数量 
processes = 9

#把uwsgi启动在socket协议上，的8000端口

socket = 0.0.0.0:9005
  
#指定http协议的话，用户是可以直接访问到的，不安全的，因此使用socket协议
#http =0.0.0.0:8000
vacuum = true

5.使用supervisor进程管理工具，同管理crm和路飞的进程

[program:s24luffy]
command=/root/Envs/s24luffy/bin/uwsgi --ini //luffy_boy/uwsgi.ini    ; 程序启动命令
autostart=true       ; 在supervisord启动的时候也自动启动
stopasgroup=true     ;默认为false,进程被杀死时，是否向这个进程组发送stop信号，包括子进程
killasgroup=true     ;默认为false，向进程组发送kill信号，包括子进程

6.启动路飞后台

在学习阶段吧，先干掉所有的crm和supervisor
pkill -9 uwsgi 
pkill -9 supervisor 

然后重启supervisor
(s24luffy) [root@s24_linux luffy_boy]# supervisord -c /etc/supervisord.conf 
Unlinking stale socket /var/run/supervisor/supervisor.sock
(s24luffy) [root@s24_linux luffy_boy]# 
(s24luffy) [root@s24_linux luffy_boy]# 
(s24luffy) [root@s24_linux luffy_boy]# supervisorctl -c /etc/supervisord.conf 
s24crm                           RUNNING   pid 42172, uptime 0:00:04
s24luffy                         RUNNING   pid 42173, uptime 0:00:04

7.还得启动redis数据库，才能够访问购物车功能

1.安装redis
 yum install redis -y 
 2.启动redis
 systemctl start redis
 
 3.检查redis是否正常

8.访问路飞的课程列表，以及添加购物车数据