Centos7部署Django+Vue项目

1、python3预置环境

sudo yum -y update
sudo yum -y wget 或 sudo yum install wget
yum -y groupinstall "Development tools"  # 如果报错指定组没有可安装或升级的软件包，则yum clean all后再执行安装
yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqlite-devel
yum install python3-devel

2、安装python3

• 下载python3.6到/usr/loca目录
  wget https://www.python.org/ftp/python/3.6.8/Python-3.6.8.tgz
• 解压
  tar -zxvf Python-3.6.8.tgz
• 进入解压好的文件中
  cd Python-3.6.8
• 编译安装到指定的路径
  ./configure --prefix=/usr/local/python3
• 安装python3
  make
make install
• 添加软链接，添加变量，方便直接使用python3命令（如果/usr/bin中已有则无需添加）
  ln -s /usr/local/python3/bin/python3.6 /usr/bin/python3
• 给pip3建立软链接

ln -s /usr/local/python3/bin/pip3.6 /usr/bin/pip3

注： 如果软链建立完成，但是却无法使用的时候执行下面命令：
     mv pip pip2  # (将文件 pip 更名为 pip2 )
     ln -s /usr/local/python3/bin/pip3 /usr/bin/pip 

2、虚拟环境（可选）

• 安装virtualenv, 方便不同版本项目管理（可选）

pip3 install virtualenv
# 创建软链接
ln -s /usr/local/python3/bin/virtualenv /usr/bin/virtualenv3

• 创建目录

mkdir -p /data/env  # 存放虚拟环境

• 创建环境

# 创建虚拟环境
virtualenv3 --python=/usr/bin/python 项目名    

# 进入指定的环境bin目录
cd /data/env/环境名称/bin 
# 开启虚拟环境(启动后出现 (qize_demo)，说明是成功进入虚拟环境。)
source activate 
# 退出虚拟环境的命令
deactivate.bat

3、部署django项目

• 创建目录

mkdir -p /data/wwwroot  # 存放web项目

• 在本地项目目录下用把当前的环境依赖包导出到requirements.txt文件
  pip freeze > requirements.txt
• 把打包的项目放到/data/wwwroot目录下
• 解压项目（.zip文件使用unzip命令解压）
• 进入项目目录
• 安装requirements.txt里的依赖包。
  pip3 install -r requirements.txt
• 如果出现报错Command “python setup.py egg_info“ failed with error code 1 in /tmp/pip-build
  • 解决方案1：可以安装yum install python36u python36u-devel，如果无法安装，则使用yum install gcc mariadb-devel
  • 解决方案2：如果上面的不行，则

sudo python -m pip install --upgrade --force pip 
sudo pip install setuptools==33.1.1

• 安装mysql5.7（设置编码为utf8）
  https://www.jianshu.com/p/59d663d73aab
  https://blog.csdn.net/airtrioa/article/details/85096469
• 在本地把项目对应的sql导出（可用navicat工具界面导出）
  mysqldump -uroot -p password >数据库名.sql
• 把导出的sql脚本放到linux的项目目录下
• 创建项目对应的数据库，并导入数据

# 登录mysql
mysql -u用户名 -p
# 创建项目对应的数据库；判断原来不存在，则创建数据库，并指定编码格式和校验集：
 create database if not exists xxx  default character set utf8 collate utf8_general_ci;
# 创建成功，使用该表
use xxx
# 导入数据
source 脚本所在的路径/数据库脚本名字.sql

    # 如果数据库创建错误，则删除
    drop database xxx;
    # 如果数据库已创建，但是编码忘了设置，则进入该    库，然后设置编码为utf8
    set names utf8;

• 退出mysql，进入django项目根目录，进行数据库迁移（期间如果报错，则检查setting.py中设置的数据库名或用户名密码是否正确）
  python3 manage.py migrate
• 启动django项目（8000端口）
  python3 manage.py runserver 0.0.0.0:8000
• windows机使用telnet命令查看是否能访问
  telnet xxxx 8000
• 如果启动后，外部无法访问，则需要启动端口
  https://www.jianshu.com/p/3c0060444b4b
• 或者检查setting.py的配置

ALLOWED_HOSTS = ['*']

• 编写和启动脚本start.sh，启动sh start.sh
  可以编写一个简单的后台启动+标准输出和错误输出到日志文件中

# 后台启动django服务，输出日志到日志文件中，内容为标准输出和标准错误
MYDATE=`date +%Y%m%d`
ALL_LOGFILE=/data/wwwroot/xxx/log/log_$MYDATE

nohup python3 manage.py runserver 0.0.0.0:8000 > ${ALL_LOGFILE} 2>&1 &

4、部署Vue项目

• 配置node npm环境

# 下载node，建议下载到/usr/local/lib
wget https://nodejs.org/dist/v10.16.3/node-v10.16.3-linux-x64.tar.xz
# 解压node
tar -xvf node-v10.16.3-linux-x64.tar.xz  
# 修改node目录名
mv node-v10.16.3-linux-x64 nodejs
#  创建软链接（注意，源文件需要是绝对路径）
ln -s /usr/local/lib/nodejs/bin/node /usr/local/bin/node
ln -s /usr/local/lib/nodejs/bin/npm /usr/local/bin/npm
# 查看版本，正确则OK
npm -v 
node -v

• 安装全局pm2

# 会安装到上个步骤安装的nodejs/bin目录下
npm install pm2 -g
#不知道为啥，-g在linux中不起作用，需要手动 创建软链接来设置全局（默认安装路径是nodejs/bin）
ln -s /usr/local/lib/nodejs/bin/pm2 /usr/local/bin/

• 修改vue项目设置api文件中的host

// 换成服务器的IP和django项目端口
let host = 'http://xxxx:8000';
export {host};

• 打包vue项目，默认生成一个dist目录，这个文件夹就是我们要部署上线的项目
  npm run build
• 编写个app.js启动脚本，主要目的是是读取dist目录下的单页面文件(index.js)，监听8080端口。

const fs = require('fs');
const path = require('path');
const express = require('express');
const app = express();

app.use(express.static(path.resolve(__dirname, './dist')))
//读取目录下的单页面文件(index.js)，监听8080端口。
app.get('*', function(req, res) {
    const html = fs.readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf-8')
    res.send(html)
})

app.listen(8080);

• 把dist目录、app.js、package.json复制到linux中的项目目录下

• 进入到vue项目目录，安装依赖
  npm install
  

  安装完依赖后的项目结构

• 启动服务
  pm2 start app.js
  

  启动成功

• 放开防火墙8080端口后，则在外网能进行访问了

  
  
  访问成功

未完待续

后续会加上Nginx+uwsgi

参考文章

vue项目部署参考文章