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-re@R_502_6422@==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
re@R_502_6422@==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代码,这一步会生成 @R_502_6422@t 静态文件夹,用于Nginx 展示,路飞的页面都在这里了
　　　　   npm install build 
　　　　 5  配置Nginx去找到这个路飞学城页面
　　　　　　修改 Nginx.conf 参数如下所示:

       虚拟主机1，用于找到vue页面
            server {
                listen       80;
                server_name  s17dnf.com;
                location / {
                root  /opt/s17luffy/@R_502_6422@t;  
                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 重启使得配置生效

-- 启动re@R_502_6422@数据库,支撑购物车数据

　　　　re@R_502_6422@-server re@R_502 [email protected] 默认6379端口

-- 确保前端vue正常,后端django正常,Nginx启动正常,re@R_502_6422@正常,在Windows中访问页面

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

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

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

相关推荐