• 部署前后端分离项目总结


    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

  • 相关阅读:
    [bzoj 2151]种树(贪心)
    [bzoj 1026]windy数(数位DP)
    [BZOJ2038]小Z的袜子(莫队算法)
    spark调优
    从底层谈WebGIS 原理设计与实现(一):开篇
    css兼容性记录
    H5新标签
    AMD 与CMD
    rem 响应 js函数
    SVN服务器搭建和使用(一)
  • 原文地址:https://www.cnblogs.com/Wj-Li/p/10864903.html
Copyright © 2020-2023  润新知