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

b2c,在线教育,商城,前后,分离,部署 · 浏览次数 : 124

小编点评

**配置uwsgi.ini:** ```python # Django-related settings chdir = /s25luffy/luffy_boy# The base directory (full path) module = luffy_boy.wsgi# the virtualenv (full path) process-related settings mastermaster = true# maximum number of worker processes processes = 3# the socket (use the full path to be safe socket = 0.0.0.0:9005# 线上不会用http参数,因为对后端是不安全的,使用socket参数是安全的连接,用nginx反向代理去访问 # Use the full path to the socket for safety ``` **配置nginx.conf:** ``` server { listen 9000; server_name _; 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; } } ``` **其他配置:** * 在 `/etc/supervisord.conf` 中添加一个任务,管理路飞。 * 修改 `nginx.conf` 中的 `server` 块配置代理服务器端口。 * 在浏览器中访问 `10.0.0.129:81`,并登录路飞账号。 * 安装 `redis` 并启动 `redis` 服务。 * 添加 Python 和 Linux 的课程,加入购物车,查看个人中心的购物车。

正文

博客地址: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的课程,加入购物车,查看个人中心的购物车

与B2C在线教育商城--前后端分离部署相似的内容: