vue+django前后端项目部署

一.python3的安装

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.下载，解压安装源码包
wget https://www.python.org/ftp/python/3.6.9/Python-3.6.9.tar.xz
xz -d Python-3.6.9.tar.xz
tar -xf Python-3.6.9.tar

3.编译且安装,进入python源码包目录
./configure --prefix=/opt/python3/
make && make install

4.配置python3环境变量
在/etc/profile最后一行添加
export PATH=/opt/python3/bin:$PATH
然后
source /etc/profile

 

二:虚拟环境管理virtualenvwrapper的安装及创建

1.指定豆瓣加速器安装virtualenvwrapper,当然直接安装也可以
pip3 install -i https://pypi.douban.com/simple virtualenvwrapper 

2.修改~/.bashrc,每次开机加载virtualevnwrapper,当然配置在/etc/profile也没问题
写入变量
export WORKON_HOME=~/Envs #设置virtualenv的统一管理目录
export VIRTUALENVWRAPPER_VIRTUALENV_ARGS='--no-site-packages' #添加virtualenvwrapper的参数，生成干净隔绝的环境
export VIRTUALENVWRAPPER_PYTHON=/opt/python3/bin/python3.6 #指定python解释器
source /opt/python3/bin/virtualenvwrapper.sh #执行virtualenvwrapper安装脚本

3.新建一个虚拟环境 my_django_first_project (这会在 ~/Envs 中创建 my_django_first_project 文件夹)
mkvirtualenv my_django_first_project

备注下virtualenv相关命令(下面的不需要执行):
删除虚拟环境
rmvirtualenv my_django_first_project
激活虚拟环境
workon my_django_first_project
也可以手动停止虚拟环境
deactivate my_django_first_project
列举所有的环境
lsvirtualenv

三:Vue部署(在my_django_first_project虚拟环境上部署)

1.xftp上传前后端代码到服务器

2.准备node打包环境,下载node二进制包，此包已经包含node，不需要再编译
wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz

3.解压缩node包
tar -zxvf node-v8.6.0-linux-x64.tar.gz

4.配置环境变量，修改/etc/profile,可以直接使用npm和node命令
PATH=$PATH:/opt/node-v8.6.0-linux-x64/bin

5.检测node和npm
node -v 
npm -v

6.安装vue项目所需的包
cd /opt/software/vue_project
输入npm install,完成之后再接着输入

7.准备编译打包vue项目，替换配置文件所有地址，改为服务器地址
sed -i 's/127.0.0.1/xxx.xxx.xxx.xxx/g' /opt/software/vue_project/src/restful/api.js

8.确保vue的route模式是history
/opt/software/vue_project/src/router/index.js下mode: 'history',//改成history模式

9.npm run build 打包生成一个 dist 静态文件目录，整个项目的前端内容和index.html都在这里了


5.等待nginx加载这个 dist文件夹

 

四:部署后端代码所需的环境

1.激活虚拟环境
workon my_django_first_project

2.通过一条命令，导出本地的所有软件包依赖 
pip3 freeze >  requirements.txt 
	
3.将这个requirements.txt 传至到服务器，在服务器的新虚拟环境中，安装这个文件，就能安装所有的软件包了
pip3 install -r  requirements.txt   	
		
4.准备uwsgi 支持高并发的启动python项目(注意uwsgi不支持静态文件的解析，必须用nginx去处理静态文件)
	1.安装uwsgi 
	pip3 install -i https://pypi.douban.com/simple uwsgi

	2.学习uwsgi的使用方法(注:简单启动可以用下面的,项目启动一般用配置文件启动)
		通过uwsgi启动一个python web文件
		uwsgi --http :8000 --wsgi-file   testuwsgi.py
				--http 指定http协议 
				--wsgi-file  指定一个python文件
			
		通过uwsgi启动django项目，并且支持热加载项目,不重启项目，自动生效新的后端代码
			
		uwsgi --http  :8000 --module django_project.wsgi    --py-autoreload=1
		
				--module 指定找到django项目的wsgi.py文件
				--py-autoreload=1 热加载
					
					
	3.使用uwsgi的配置文件，启动项目
		1.创建一个uwsgi.ini配置文件，写入参数信息
			touch uwsgi.ini 
									
			[uwsgi]
			# Django-related settings
			# the base directory (full path)
			# 指定项目的绝对路径的第一层路径(很重要)
			chdir = /opt/python_project/qkyAdmin

			# Django's wsgi file
			# 指定项目的 wsgi.py文件
			# 写入相对路径即可，这个参数是以chdir参数为相对路径
			module = qkyAdmin.wsgi

			# the virtualenv (full path)
			# 写入虚拟环境解释器的绝对路径(cdvirtualenv可以直接跳转进入,然后pwd可以查看绝对路径)
			home = /root/Envs/my_django_first_project

			# process-related settings
			# master
			master = true

			# maximum number of worker processes
			# 指定uwsgi启动的进程个数(机器配置好的话可以写多点)			
			processes = 5

			# 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 = yes
					
		2.使用uwsgi配置文件启动项目
		uwsgi --ini  uwsgi.ini 

五.supervisor进程管理工具安装及使用

前言: 将linux进程运行在后台的方法有哪些(扩展知识)
			第一个，命令后面加上 & 符号
			python  manage.py  runserver & 
			
			第二个 使用nohup命令
			nohup python test.py

			第三个使用进程管理工具
	
	注意:由于supervisor在python3下无法使用，因此只能用python2去下载
	2.安装supervisor，使用python2的包管理工具 easy_install (注意，此时要退出虚拟环境)

	如果没有命令，使用以下命令，安装
	yum install python-setuptools
	easy_install supervisor

	3.通过命令，生成一个配置文件，这个文件就是写入你要管理的进程任务
	echo_supervisord_conf > /etc/supervisor.conf

	4.编辑这个配置文件，写入操作  django项目的 命令 
	vim /etc/supervisor.conf  
	直接到最底行，写入以下配置
	[program:django_project]	# 是被管理的进程配置参数，django_project是进程的名称
	command=/root/Envs/my_django_first_project/bin/uwsgi  --ini  /opt/python_project/qkyAdmin/qkyAdmin/uwsgi.ini

	5.启动supervisord服务端，指定配置文件启动
	supervisord -c  /etc/supervisor.conf

	6.通过supervisorctl管理任务
	supervisorctl -c /etc/supervisor.conf 

	7.supervisor管理django进程的命令如下
	supervisorctl直接输入命令会进入交互式的操作界面
	>  stop django_project 
	>  start django_project 
	>  status django_projecty 
	>  status all # 停止全部 
	

	8.启动luffy的后端代码(这里需要修改settings下面的ALLOWED_HOSTS = ['*'],允许所有人访问)
	start django_project 

 

六.配置nginx步骤如下

1.编译安装nginx
	2.nginx.conf配置如下

	#第一个server虚拟主机是为了找到vue的dist文件， 找到dist下的index.html
	server {
			listen       80;
			server_name  192.168.0.104;
			
			#当请求来自于 192.168.0.104/的时候，直接进入以下location，然后找到vue的dist/index.html 
			location / {
				root   /opt/python_project/lf_project/dist;
				index  index.html;
				#这一条参数确保vue页面刷新时候，不会出现404页面
	　　　　  	try_files $uri $uri/ /index.html;
			}
			
		}
		
	#由于vue发送的接口数据地址是 192.168.0.104:8000  我们还得再准备一个入口server
	server {
		listen 8000;
		server_name  192.168.0.104;
		
		#当接收到接口数据时，请求url是 192.168.0.104:8000 就进入如下location
		location /  {
			#这里是nginx将请求转发给  uwsgi启动的 9000端口
			uwsgi_pass  192.168.0.104:9000;
			# include  就是一个“引入的作用”，就是将外部一个文件的参数，导入到当前的nginx.conf中生效
			include /opt/nginx1-12/conf/uwsgi_params;
		}
	}




	3.启动nginx 
	./sbin/nginx  直接启动 
	此时可以访问 192.168.0.104  查看页面结果




注明: mysql和redis根据自己的配置修改settings里面的地址即可