linux Vue+nginx+django 实现前后端分离

示例项目 -- LuffyCity.com 的上线

具体解释,vue前端提供静态页面,且可以向后台发起get,post等restful请求

django后台提供数据支撑,返回json数据,返回给vue,进行数据页面渲染

下面是部署笔记:

-- 先从后端搞起  解决环境依赖 -- 
    解决环境依赖的办法:
        1 挨个报错的处理
        2 pip3 freeze >requirements.txt 
        3 传这个txt文件到linux 
            linux通过命令安装  
            pip3 install -r requirements.txt
        4 或者自己创建 touch requirements.txt
            vim requirements.txt  写进去包数据

(s17luffy) [root@master luffy_boy]# 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

5 安装uwsgi启动项目后端
启动方式1 :用参数启动 uwsgi --socket :8000 --module luffy_boy.wsgi
方式2     用配置文件启动  创建 touch uwsgi.ini   
                vim uwsgi.ini 写入  
 启动命令 (虚拟环境) [root@web02 opt]# uwsgi --ini luffy_boy/uwsgi.ini    找见 .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

#后台运行uwsgi
daemonize=yes

-- 前端代码 vue 打包搞起  --
    1 准备node环境,下载node环境包
     wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz
    2 解压包
    tar  -zxvf   node-v8.6.0-linux-x64.tar.gz
    3  添加到环境变量   vim /etc/profile
        PATH="......"   
    4  编译打包前端的vue文件
        1 修改vue提交的请求地址,修改文件是
            /opt/s17luffy/07-luffy_project_01/src/restful/api.js 
        2  更该接口内的地址
        原来是 127.0.0.1:8000/
        改成服务器的ip地址和端口
        sed -i "s/127.0.0.1/192.168.11.186/g"   /opt/s17luffy/07-luffy_project_01/src/restful/api.js 
        
        此时进入vue代码的第一册层文件夹,  
cd /opt/s17luffy/07-luffy_project_01
 3  安装node模块,这是找到package.json,安装它的内容
npm install 
 4  编译打包vue代码,这一步会生成 dist 静态文件夹,用于nginx 展示,路飞的页面都在这里了
   npm install build 
 5  配置nginx去找到这个路飞学城页面
修改 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;
                    }
        }      

　　　　　　nginx -t 检查

　　　　　　nginx -s reload 重启使得配置生效

-- 启动redis数据库,支撑购物车数据

　　　　redis-server redis.conf 默认6379端口

-- 确保前端vue正常,后端django正常,nginx启动正常,redis正常,在Windows中访问页面

-- 确保可以添加购物车数据,用户登陆

更多请访问 https://www.cnblogs.com/pyyu/p/10160874.html