vue+uwsgi+nginx部署路飞学城

准备前后端项目，vue 和 drf项目

cd /opt/vue_drf
wget https://files.cnblogs.com/files/pyyu/luffy_boy.zip
wget https://files.cnblogs.com/files/pyyu/07-luffy_project_01.zip

解压缩前后端项目

unzip luffy_boy.zip
unzip 07-luffy_project_01.zip

从vue搞起(windows打包也可，linux打包也可以)

下载node二进制包，此包已经包含node，不需要再编译
wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz
解压缩
tar -zxvf node-v8.6.0-linux-x64.tar.gz
进入node文件夹
[root@web02 opt]# cd node-v8.6.0-linux-x64/
[root@web02 node-v8.6.0-linux-x64]# ls
bin  CHANGELOG.md  etc  include  lib  LICENSE  README.md  share
[root@web02 node-v8.6.0-linux-x64]# ls bin
node  npm  npx

将node命令，添加至linux环境变量,修改/etc/profile

vim /etc/profile
在末尾添加如下
/opt/vue_drf/node-v8.6.0-linux-x64/bin/

读取文件，生效PATH

source /etc/profile

测试path

[root@web02 node-v8.6.0-linux-x64]# node -v
v8.6.0
[root@web02 node-v8.6.0-linux-x64]# npm -v
5.3.0

node环境有了，安装node模块，以及打包node项目

进入vue源码目录
cd 07-luffy_project_01/
安装vue模块，默认去装package.json的模块内容，如果出现模块安装失败，手动再装
npm install 

此时注意，你本地写的vue代码，接口很可能连接的服务器地址有问题，注意Axios.POST提交的地址，一定得发送给django应用（如果用了nginx，就发送给nginx的入口端口）
这里为了试验方便，将vue项目和django项目放在了一台服务器，通过nginx反向代理功能(8000端口)，转发vue请求给django(9000)

准备编译打包vue项目，替换配置文件所有地址，改为服务器地址
sed -i 's/127.0.0.1/192.168.119.12/g' /opt/07-luffy_project_01/src/restful/api.js
此时打包vue项目，生成一个dist静态文件夹
npm run build

检查dist文件夹
[root@web02 07-luffy_project_01]# ls dist/
index.html static

配置后端代码，解决虚拟环境，保证项目干净隔离

mkvirtualenv drf

[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

pip3 install -r  allenv.txt 

这个路飞代码数据库用的是sqllite，不需要配置数据库了

购物车用都的是redis，因此要启动服务器的redis-server服务端

 cd /opt/redis-4.0.10/
    mv redis-6380.conf redis-6379.conf
    sed -i "s/6380/6379/g" redis-6379.conf 
    然后去掉最后一行密码设置，具体内容如下：
        (drf) [root@qishione redis-4.0.10]# cat redis-6379.conf 
            port 6379           
            daemonize yes           
            pidfile /data/6379/redis.pid
            loglevel notice        
            logfile "/data/6379/redis.log"
            dir /data/6379            
            protected-mode yes 
         mkdir -p /data/6379

redis-server  redis-6379.conf 

通过uwsgi启动路飞项目

[uwsgi]
        # Django-related settings
        # the base directory (full path)
        chdir           = /opt/vue_drf/luffy_boy
        # Django's wsgi file
        module          = luffy_boy.wsgi
        # the virtualenv (full path)
        home            = /root/Envs/drf
        # process-related settings
        # master
        master          = true
        # maximum number of worker processes
        processes       = 1
        # the socket (use the full path to be safe
        #结合nginx使用的参数，将uwsgi运行在一个socket链接上
        socket          = 0.0.0.0:9000
        #不用nginx，直接向访问到后端的数据页面
        #http = 0.0.0.0:9000


        # clear environment on exit
        vacuum          = true

开始配置nginx软件，用nginx找到vue，且用nginx做反向代理

    1.配置nginx，找到vue的index.html文件
        编译nginx.conf ，写入如下配置
            server {
                listen       80;
                server_name 192.168.11.37;
                #只要请求来自于192.168.11.37；
                location / {
                root /opt/vue_drf/07-luffy_project_01/dist;
                index index.html;
        }
    }
配置nginx，使用nginx反向代理功能
            #虚拟主机1，用于找到vue的静态文件
            server {
            listen       80;
            server_name  192.168.11.37;
            location / {
            root /opt/vue_drf/07-luffy_project_01/dist;
            index index.html;
        }
        }
        #虚拟主机2，用于接受vue发起的8000端口的请求，反向代理转发给9000的uwsgi应用
        server {
            listen 8000;
            server_name  192.168.11.37
            ;
            location  /  {
            include  /opt/nginx112/conf/uwsgi_params;
            uwsgi_pass  0.0.0.0:9000;
        }
        }

重启nginx，加载配置文件

./nginx -s reload 

准备好前后端的 项目配置，确保 以下每一项都正常
1.nginx的配置正常
2.vue的api.js发送数据地址正常
3.保证uwsgi启动项目正常
4.保证redis数据库运行正常

配置supervisor进程管理工具，管理uwsgi

编辑配置文件，写入管理路飞业务的命令
    vim /etc/supervisor.conf 
    写入如下信息
        [program:my_luffy]
        command=/root/Envs/drf/bin/uwsgi   /opt/vue_drf/luffy_boy/uwsgi.ini
        stopasgroup=true     ;默认为false,进程被杀死时，是否向这个进程组发送stop信号，包括子进程
        killasgroup=true     ;默认为false，向进程组发送kill信号，包括子进程

启动supervisord服务端

#启动服务端
supervisord  -c /etc/supervisor.conf 
#管理客户端
supervisorctl -c /etc/supervisor.conf