B2C在线教育商城--前后端分离部署

博客地址：https://www.cnblogs.com/zylyehuo/

技术栈：vue + nginx + uwsgi + django + mariadb + redis

基本流程

vue打包之后，生成了dist静态文件夹 ，前端的静态文件，都在这里了，静态文件，都是丢给nginx直接去返回即可

vue的dist静态文件运行之后，能够立即看到路飞的首页内容了，此时还没有和后端的数据交互

当你在前端的单页面应用中，点击课程列表，向后台发送ajax请求，提交post

vue请求课程列表的post请求，应该是发给谁去处理的？
答案是DRF后台去处理的

注意在线上部署的架构图流程中，，django后台，是躲在了防火墙之后的，只能通过nginx反向代理去访问

路飞前后端分离部署的示意图

• 

前端环节

配置node的环境，用于 npm run build 对前端的vue代码进行打包

1.获取前端vue的项目代码

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

2.解压缩代码，进行编译打包vue的代码，注意要配置nodejs环境

(s25_crm) [root@localhost s25luffy]# unzip 07-luffy_project_01.zip
(s25_crm) [root@localhost s25luffy]# ls
07-luffy_project_01  07-luffy_project_01.zip  __MACOSX
(s25_crm) [root@localhost s25luffy]# deactivate
[root@localhost s25luffy]#

3.配置nodejs环境，下载nodejs源码包

# 这里特殊的是这个地址是node的二进制源码包，是已经编译完成了的node解释器
# 直接解压缩，配置PATH即可，无需再编译了
[root@localhost s25luffy]# wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz
[root@localhost s25luffy]# ls
07-luffy_project_01  07-luffy_project_01.zip  __MACOSX  node-v8.6.0-linux-x64.tar.gz
[root@localhost s25luffy]# tar -zxvf node-v8.6.0-linux-x64.tar.gz

# 添加node的环境变量，如下
[root@localhost s25luffy]# cd node-v8.6.0-linux-x64/
[root@localhost node-v8.6.0-linux-x64]# ls
bin  CHANGELOG.md  include  lib  LICENSE  README.md  share
[root@localhost node-v8.6.0-linux-x64]# cd bin/
[root@localhost bin]# ls
node  npm  npx
[root@localhost bin]# pwd
/s25luffy/node-v8.6.0-linux-x64/bin
[root@localhost bin]# vim /etc/profile
PATH="/opt/tngx232/sbin:/opt/python369/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/s25luffy/node-v8.6.0-linux-x64/bin:"

4.重新读取/etc/profile，加载node的环境，查看是否正常

[root@localhost bin]# source /etc/profile
[root@localhost bin]# node -v
v8.6.0
[root@localhost bin]# npm -v
5.3.0

5.进入vue的代码目录下，修改数据提交地址，这一步非常重要

# 这里是vue页面运行之后，出发js的数据提交动作，向某个地址，发出了请求，这个地址对吗？
# 为什么不对呢？是因为vue向当前机器的本地去发送请求了，是错的
# 应该向后台服务器去发送请求
# 那么，应该发给谁呢？
# 应该发给刚才9000端口还是9005端口呢？
# 这里是数据提交地址，应该发给代理服务器，也就是9000端口，然后再通过9000端口，转发给uwsgi，也就是9005端口

sed命令

批量修改的命令

是用于文本内容处理的强大命令，可以直接替换文件中的内容

类似notapad++的全局替换功能

# sed命令 -i参数是把替换结果写入到文件
# 's/127.0.0.1:8000/10.0.0.129:9000/g'
# s是替换指令  /你要替换的内容/替换之后的内容/   g是全局替换，global的意思

[root@localhost bin]# cd /s25luffy/
[root@localhost s25luffy]# ls
07-luffy_project_01  07-luffy_project_01.zip  __MACOSX  node-v8.6.0-linux-x64  node-v8.6.0-linux-x64.tar.gz
[root@localhost s25luffy]# cd 07-luffy_project_01/
[root@localhost 07-luffy_project_01]# ls
build  config  index.html  package.json  package-lock.json  README.md  src  static

[root@localhost 07-luffy_project_01]# sed -i 's/127.0.0.1:8000/10.0.0.129:9000/g' src/restful/api.js

6.明确vue的数据提交地址，正确修改之后，开始安装node的依赖

# 类似python项目要运行，需要安装pip3模块一样
# node项目要运行，也需要 npm install package.json  # 安装模块
# 以下这个命令，是更换npm的源的含义，加速下载
# --registry https://registry.npm.taobao.org 这是临时更换淘宝源的含义
# 结尾什么都不跟上，默认是安装当前路径的 package.json文件
[root@localhost 07-luffy_project_01]# npm --registry https://registry.npm.taobao.org install

7.安装完node的模块之后，开始编译vue

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

• 

8.此时应该会生成了dist文件夹，直接丢给nginx去返回页面即可

由于在 https://www.cnblogs.com/zylyehuo/p/17684304.html 中80端口已经给crm项目用了，因此路飞需要换成81端口

[root@localhost 07-luffy_project_01]# cd dist/
[root@localhost dist]# ls
index.html  static
[root@localhost dist]# pwd
/s25luffy/07-luffy_project_01/dist

9.修改nginx.conf，添加一个server{}虚拟主机，返回路飞的页面

[root@localhost dist]# vim /opt/tngx232/conf/nginx.conf

注释版

# 添加第二个虚拟主机，给路飞使用
    server {
        listen 81;
        server_name  _;
        location  /  {
            # 直接返回vue的打包内容即可
            root   /s25luffy/07-luffy_project_01/dist;
            index  index.html;
        }
    }

无注释版

    server {
        listen 81;
        server_name  _;
        location  /  {
            root   /s25luffy/07-luffy_project_01/dist;
            index  index.html;
        }
    }

重启nginx服务

[root@localhost dist]# nginx -t
nginx: the configuration file /opt/tngx232//conf/nginx.conf syntax is ok
nginx: configuration file /opt/tngx232//conf/nginx.conf test is successful
[root@localhost dist]# nginx -s reload

浏览器访问 10.0.0.129:81 查看效果

• 

后端环节

• 

1.获取drf项目代码，本地上传，git克隆

[root@localhost ~]# cd /s25luffy/
[root@localhost s25luffy]# wget https://files.cnblogs.com/files/pyyu/luffy_boy.zip
[root@localhost s25luffy]# ls
07-luffy_project_01  07-luffy_project_01.zip  luffy_boy.zip  __MACOSX  node-v8.6.0-linux-x64  node-v8.6.0-linux-x64.tar.gz

2.解压缩项目代码之后，安装依赖，使用虚拟环境管理不同的项目

[root@localhost s25luffy]# unzip luffy_boy.zip
[root@localhost s25luffy]# ls
07-luffy_project_01      luffy_boy      __MACOSX               node-v8.6.0-linux-x64.tar.gz
07-luffy_project_01.zip  luffy_boy.zip  node-v8.6.0-linux-x64
[root@localhost s25luffy]# cd luffy_boy/
[root@localhost luffy_boy]# virtualenv --python=python3  s25_luffy
[root@localhost luffy_boy]# ls
api  db.sqlite3  keys  luffy_boy  manage.py  s25_luffy  static  templates
[root@localhost luffy_boy]# source s25_luffy/bin/activate
(s25_luffy) [root@localhost luffy_boy]#

3.解决路飞后台代码所需的依赖，下载 requirements.txt 文件即可

(s25_luffy) [root@s25linux luffy_boy]# vim 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

4.安装路飞的依赖文件

(s25_luffy) [root@localhost luffy_boy]# pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple -r requirements.txt

5.测试路飞代码是否能够运行

(s25_luffy) [root@localhost luffy_boy]# python3 manage.py runserver 0.0.0.0:8080

• 
• 

6.测试通过之后，配置uwsgi.ini，启动路飞后端，uwsgi.ini内容如下

(s25_luffy) [root@localhost luffy_boy]# vim uwsgi.ini

注释版

[uwsgi]
# Django-related settings
# the base directory (full path)
#  填写crm项目的第一层绝对路径
chdir           = /s25luffy/luffy_boy
# Django's wsgi file
# 填写crm项目第二层的相对路径，找到第二层目录下的wsgi.py
# 这里填写的不是路径，是以上一个参数为相对，找到第二层项目目录下的wsgi.py文件
module          = luffy_boy.wsgi
# the virtualenv (full path)
# 填写虚拟环境解释器的第一层工作目录
home            = /s25luffy/luffy_boy/s25_luffy
# process-related settings
# master
master          = true
# maximum number of worker processes
# 代表定义uwsgi运行的多进程数量，官网给出的优化建议是 2*cpu核数+1 ，单核的cpu填写几?
# 如果是单进程，十万个请求，都丢给一个进程去处理
# 3个工作进程，十万个请求，就分给了3个进程去分摊处理
processes       = 3

# the socket (use the full path to be safe
# 这里的socket参数，是用于和nginx结合部署的unix-socket参数，这里临时先暂停使用
# 使用此协议运行后台，就无法通过浏览器访问了，协议不一样
socket          = 0.0.0.0:9005
#  线上不会用http参数，因为对后端是不安全的，使用socket参数是安全的连接，用nginx反向代理去访问
# 后端程序是运行在防火墙内部，外网是无法直接访问的
# 临时使用http参数，便于我们用浏览器调试访问
#http =  0.0.0.0:8000

# ... with appropriate permissions - may be needed
# chmod-socket    = 664
# clear environment on exit
vacuum          = true

无注释版

[uwsgi]
chdir           = /s25luffy/luffy_boy
module          = luffy_boy.wsgi
home            = /s25luffy/luffy_boy/s25_luffy
master          = true
processes       = 3
socket          = 0.0.0.0:9005
vacuum          = true

7.此时给supervisor再添加一个任务，用于管理路飞

(s25_luffy) [root@localhost luffy_boy]# vim /etc/supervisord.conf

# 在最下面，添加如下

[program:s25_luffy]
command=/s25luffy/luffy_boy/s25_luffy/bin/uwsgi --ini /s25luffy/luffy_boy/uwsgi.ini
autostart=true
startsecs=10
autorestart=true
stopasgroup=true
killasgroup=true

8.此时重启supervisord进程，把新的任务，管理路飞也加进去

# 先杀死所有的supervisor进程
(s25_luffy) [root@localhost luffy_boy]# pkill -9 supervisor  # 杀死supervisor进程，用于重启
(s25_luffy) [root@localhost luffy_boy]# pkill -9 uwsgi  # 杀死crm的进程，用于待会重启

9.此时检查2个任务的状态

(s25_luffy) [root@localhost luffy_boy]# supervisord -c /etc/supervisord.conf
Unlinking stale socket /tmp/supervisor.sock
(s25_luffy) [root@s25linux luffy_boy]# supervisorctl -c /etc/supervisord.conf
s25_luffy                        RUNNING   pid 125193, uptime 0:00:19
s25crm                           RUNNING   pid 125194, uptime 0:00:19
supervisor>

10.此时还差一个代理服务器的配置，修改nginx.conf如下

(s25_luffy) [root@localhost luffy_boy]# vim /opt/tngx232/conf/nginx.conf

注释版

    # 再添加一个虚拟主机，作用是给路飞后台的反向代理使用
    server {
        # 这里应该填写9000的代理服务器端口
        listen 9000;
        server_name  _;
        # nginx的9000代理服务器，接收到任意请求之后，直接转发给后端的uwsgi
        location / {
            uwsgi_pass   0.0.0.0:9005;
            include  uwsgi_params;
        }
    }

无注释版

    server {
        listen 9000;
        server_name  _;
        location / {
            uwsgi_pass   0.0.0.0:9005;
            include  uwsgi_params;
        }
    }

11.重启nginx

(s25_luffy) [root@localhost luffy_boy]# nginx -s reload

12.浏览器访问 10.0.0.129:81，并登录路飞

账号： alex
密码： alex3714

• 
• 

13.安装redis且启动redis服务

(s25_luffy) [root@localhost luffy_boy]# yum install redis -y
(s25_luffy) [root@localhost luffy_boy]# systemctl start redis

14.添加python和linux的课程，加入购物车，查看个人中心的购物车

• 
• 
• 
•