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 

 

 

转载于:https://www.cnblogs.com/yidashi110/p/10268178.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值