linux 前后端分离

lf访问入口是 81端口

部署过程

前后端部署过程

端口划分

nginx + vue 端口是多少 81 ,看到lf首页

vue向后台发起数据请求,首先找到的是nginx反代 ,此时这个反代端口是多少 8001

django restframe work 端口是多少 8002

 

 

  1. 前端搞起(nginx+vue )

    获取代码
    wget https://files.cnblogs.com/files/pyyu/07-luffy_project_01.zip

     

  2. 解压缩代码,修改vue的提交数据地址,以及编译打包生成 dist

    修改这个提交数据的地址js文件 
    /opt/luffys23/07-luffy_project_01/src/restful/api.js文件 
    
    进行批量替换
    
    sed 处理文件内容的命令
    
    #语法 
    sed  -i  "s/你想替换的内容/替换之后的内容/g"   文件名    #  s是替换模式,g是global全局替换   -i  将替换结果写入到文件,如果不写-i,只是显示替换后的结果 
    
    
    sed -i "s/127.0.0.1:8000/192.168.198.127:8001/g"  api.js  
     
  3. 配置nodejs环境

        1.下载node源码
            wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz
        2.解压缩,由于这是编译好的二进制命令压缩包,直接配置环境变量即可使用
        3.配置PATH
            PATH="/opt/python367/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin:/root/bin:/opt/tngx232/sbin:/opt/luffys23/node-v8.6.0-linux-x64/bin"
        4.读取/etc/profile ,手动生效
        5.查看node和npm的版本,是否正常
            [root@s23_linux bin]# node -v
            v8.6.0
    
            [root@s23_linux bin]# npm -v
            5.3.0
     
  4.   开始安装vue项目所需的node模块,默认找到当前文件夹的package.json文件 ,这里由于网速问题,可以配置淘宝的npm源

    npm --registry https://registry.npm.taobao.org install     #安装vue的模块 

     

  5. 编译vue代码,生成dist

    npm run build  
     
  6. 此时生成dist文件夹之后,可以丢给nginx去解析了

  7. 配置nginx.conf如下

    #配置第二个虚拟主机,返回路飞的首页内容 
    server {
    listen  81;
    server_name  _;
    #当我访问 192.168.13.117:81的时候,就进入如下的配置
    location  /  {
       #定义网页根目录 ,填写vue的dist绝对路径
       root   /opt/luffys23/07-luffy_project_01/dist;
       index   index.html;
    }
    
    #第三个虚拟主机,用于反向代理,请求转发给drf后台
    
    server  {
        listen 8001;
        server_name  _;
        location  /  {
        include uwsgi_params;
        uwsgi_pass 0.0.0.0:8002;
        }
    
    }
     
  8. 配置drf的后台,提供数据支撑

        获取后台代码
        wget https://files.cnblogs.com/files/pyyu/luffy_boy.zip
        
        创建新的虚拟环境 
        mkvirtualenv luffys23
    
        解决模块依赖问题 
        可以进入本地开发环境,
        pip3 freeze >  requirements.txt 
        
        
        然后安装这个文件(这就是个普通文本,可以手动写)
        touch 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

     

     
  9. 安装这个文件

    pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple  -r requirements.txt
     
  10. 配置uwsgi和配置文件,启动drf

    pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple    uwsgi 
     
  11. 写一个uwsgi.ini配置文件

    touch uwsgi.ini 
    
    
    [uwsgi]
    # Django-related settings
    # the base directory (full path)
    # 填写路飞项目的绝对路径,第一层 
    chdir           = /opt/luffys23/luffy_boy
    
    # Django's wsgi file 
    #填写路飞项目第二层目录中的wsgi文件 
    module          = luffy_boy.wsgi 
    
    # the virtualenv (full path)
    #填写解释器的安装绝对路径(虚拟环境)
    home            = /root/Envs/luffys23  
    
    
    
    # process-related settings
    # master
    master          = true
    # maximum number of worker processes
    #指定uwsgi的多进程数量,指定为cpu的核数即可(填cpu的4倍数量)
    processes       = 4
    
    
    # the socket (use the full path to be safe
    #指定crm启动的协议,当你和nginx结合进行反向代理,就用unix-socket协议 ,这种方式无法直接访问,只能通过nginx反代
    socket          = 0.0.0.0:8002
    
    # ... with appropriate permissions - may be needed
    # chmod-socket    = 664
    # clear environment on exit
    vacuum          = true  
     
  12. 启动drf后端

    uwsgi --ini uwsgi.ini 
     
  13. 登陆LF

    账号密码
    
    alex 
    alex3714
     
  14. 安装redis数据库,可以用于购物车功能

    yum install redis -y  
     
  15. 启动redis

    systemctl start redis 
     
  16. 验证登陆redis

    [root@s23_linux ~]# redis-cli 
    127.0.0.1:6379> ping
    PONG

     

  17. 检查redis的key信息

    127.0.0.1:6379> keys *
    (empty list or set)

     

  18. 解决路飞首页刷新404问题的办法

        server {
        listen  81;
        server_name  _;
        #当我访问 192.168.13.117:81的时候,就进入如下的配置
        location  /  {
           #定义网页根目录 
           root   /opt/luffys23/07-luffy_project_01/dist;
           index   index.html;
           try_files $uri $uri/ /index.html;    #这个参数是解决vue刷新404问题的参数 
        }
    
        }
    
    

 

 

1

posted @ 2020-01-06 20:15  驰念  阅读(287)  评论(0编辑  收藏  举报