部署前后端分离项目总结

1、前后端分离，vue前端提供静态页面，且可以向后台发起get，post等restful请求。django后台提供数据支撑，返回json数据，返回给vue，进行数据页面渲染。

vue向后台发起请求  get  服务器ip:8000/课程列表 

django-rest-framework框架接收，“ 服务器ip:8000/课程列表 ” 请求，然后return返回一个json数据
{"课程列表":"python课程，linux课程",.....}

一、

 

1.先从后端搞起,部署django后台的环境依赖
    -解决环境依赖的办法：
       
       把可以正常运行项目的那个机器地下的python包，全部导出来，就可以
        pip3 freeze >  requirements.txt    把这个文件，传输给linux系统
        linux再通过命令安装
         pip3 install -r  requirements.txt 

安装uwsgi启动后端
        pip3 install uwsgi 
        
        启动方式1，用参数启动uwsgi --http  :8000  --module  luffy_boy.wsgi
        启动方式2：用配置文件启动
        touch uwsgi.ini 

写入配置

[uwsgi]

# Django-related settings
# the base directory (full path)
chdir           = /opt/luffy_boy
# Django's wsgi file
module          = luffy_boy.wsgi
# the virtualenv (full path)
home            = /root/Envs/s17luffy
# process-related settings
# master
master          = true
# maximum number of worker processes
processes       = 1
# the socket (use the full path to be safe
socket          = 0.0.0.0:6666
# ... with appropriate permissions - may be needed
# chmod-socket    = 664
# clear environment on exit
vacuum          = true

二、

1、前端代码vue打包搞起

      ①、准备node环境，下载node环境包

       wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz
      ②、解压缩node包
         tar -zxvf node-v8.6.0-linux-x64.tar.gz
      ③、添加node到环境变量
      PAHT="node环境" 
      ④、开始编译打包前端vue文件
        1.修改vue提交的请求地址，修改文件是
        /opt/前端文件/src/restful/api.js 
        2.更改接口内的地址
        原本是 127.0.0.1:8000/ 
        改成服务器的ip地址+端口
        sed -i "s/127.0.0.1/192.168.29.136/g"   /opt/前端文件/src/restful/api.js 
        
        此时进入vue代码的第一层文件夹
        cd /opt/vue文件名
        
        3.安装node模块，这是找到package.json，安装它的内容 
        npm install （出现err后把vue文件删除，重新解压，开始④步骤）
        如果多次出现err,换台电脑打包dist文件，
        4.编译打包vue代码，这一步会生成dist静态文件夹，用于nginx展示，前端页面都在这了
        npm run build  

        5.配置nginx去找到这个前端vue页面
        修改nginx.conf  参数如下
        虚拟主机1，用于找到vue页面

server {
                listen       80;
                server_name  s17dnf.com;
                location / {
                root  /opt/s17luffy/dist;
                index index.html;
                }
    }

               虚拟主机2，用于反向代理，找到django

server{
                listen 8000;
                server_name  192.168.11.250;
                location / {
                include uwsgi_params;
                uwsgi_pass 0.0.0.0:6666;
                    }
        }   
        

            6.重启nginx使得配置生效

             nginx -s reload

            7、启动redis数据库，支撑数据
             redis-server redis.conf