部署前后端分离项目

后端

创建目录,下载包

(crm118) [root@localhost ~]# mkdir s17luffy
(crm118) [root@localhost ~]# cd s17luffy/
(crm118) [root@localhost s17luffy]# wget https://files.cnblogs.com/files/pyyu/luffy_boy.zip
(crm118) [root@localhost s17luffy]# wget https://files.cnblogs.com/files/pyyu/07-luffy_project_01.zip

部署django后台环境

新建虚拟环境
[root@localhost s17luffy]# mkvirtualenv s17luffy

解压
(s17luffy) [root@localhost s17luffy]#  unzip luffy_boy.zip 

环境依赖包

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

安装依赖包

pip3 install -i https://pypi.douban.com/simple -r requirements.txt 

安装uwsgi启动后端

(s17luffy) [root@localhost luffy_boy]# pip3 install uwsgi

用配置文件启动

创建文件
(s17luffy) [root@localhost luffy_boy]# touch uwsgi.ini

写入内容

[uwsgi]
# Django-related settings
# the base directory (full path)
chdir           = /root/s17luffy/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

启动后端

(s17luffy) [root@localhost luffy_boy]# uwsgi --ini uwsgi.ini 

 

前端

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

[root@localhost s17luffy]# wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz

解压缩node包

[root@localhost s17luffy]# tar -zxvf node-v8.6.0-linux-x64.tar.gz 

添加环境变量

[root@localhost s17luffy]# cd node-v8.6.0-linux-x64/bin/
[root@localhost bin]# pwd
/root/s17luffy/node-v8.6.0-linux-x64/bin


[root@localhost bin]# vim /etc/profile
PATH="/opt/python36/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin:/opt/nginx1-12/sbin:/root/s17luffy/node-v8.6.0-linux-x64/bin/"

开始编译打包前端vue文件

进入到前端文件夹中

[root@localhost bin]# cd /root/s17luffy/07-luffy_project_01/

编辑api.js文件,更改接口内的地址

[root@localhost 07-luffy_project_01]# sed -i "s/127.0.0.1/10.0.0.21/g" /root/s17luffy/07-luffy_project_01/src/restful/api.js 

进入vue代码的第一层文件夹

[root@localhost 07-luffy_project_01]# pwd
/root/s17luffy/07-luffy_project_01

安装node模块,这是找到package.json，安装它的内容

[root@localhost 07-luffy_project_01]# npm install

编译打包vue代码，这一步会生成dist静态文件夹，用于nginx展示，路飞的页面都在这了

[root@localhost 07-luffy_project_01]# npm run build

将dist文件夹移动/opt目录下

[root@localhost 07-luffy_project_01]#  mv dist/ /opt/

配置nginx

 虚拟主机1，用于找到vue页面
            server {
                listen       80;
                server_name  www.wl.com;
                location / {
                    root  /opt/s17luffy/dist;
                    index index.html;
                }
   　　　　　　}
 虚拟主机2，用于反向代理，找到django
             server{
                listen 8000;
                server_name  10.0.0.21;
                location / {
                        include uwsgi_params;
                        uwsgi_pass 0.0.0.0:6666;  #wusgi.ini设置的端口号
                    }

        }       

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

redis-server