博客地址: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 ~] |
| (s25_crm) [root@localhost ~] |
| (s25_crm) [root@localhost s25luffy] |
| (s25_crm) [root@localhost s25luffy] |
| 07-luffy_project_01.zip |
2.解压缩代码,进行编译打包vue的代码,注意要配置nodejs环境
| (s25_crm) [root@localhost s25luffy] |
| (s25_crm) [root@localhost s25luffy] |
| 07-luffy_project_01 07-luffy_project_01.zip __MACOSX |
| (s25_crm) [root@localhost s25luffy] |
| [root@localhost s25luffy] |
3.配置nodejs环境,下载nodejs源码包
| |
| |
| [root@localhost s25luffy] |
| [root@localhost s25luffy] |
| 07-luffy_project_01 07-luffy_project_01.zip __MACOSX node-v8.6.0-linux-x64.tar.gz |
| [root@localhost s25luffy] |
| |
| |
| [root@localhost s25luffy] |
| [root@localhost node-v8.6.0-linux-x64] |
| bin CHANGELOG.md include lib LICENSE README.md share |
| [root@localhost node-v8.6.0-linux-x64] |
| [root@localhost bin] |
| node npm npx |
| [root@localhost bin] |
| /s25luffy/node-v8.6.0-linux-x64/bin |
| [root@localhost bin] |
| 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] |
| [root@localhost bin] |
| v8.6.0 |
| [root@localhost bin] |
| 5.3.0 |
5.进入vue的代码目录下,修改数据提交地址,这一步非常重要
sed命令
批量修改的命令
是用于文本内容处理的强大命令,可以直接替换文件中的内容
类似notapad++的全局替换功能
| [root@localhost bin] |
| [root@localhost s25luffy] |
| 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] |
| [root@localhost 07-luffy_project_01] |
| build config index.html package.json package-lock.json README.md src static |
| [root@localhost 07-luffy_project_01] |
6.明确vue的数据提交地址,正确修改之后,开始安装node的依赖
| |
| |
| |
| |
| |
| [root@localhost 07-luffy_project_01] |
7.安装完node的模块之后,开始编译vue
| [root@localhost 07-luffy_project_01] |
8.此时应该会生成了dist文件夹,直接丢给nginx去返回页面即可
由于在 https://www.cnblogs.com/zylyehuo/p/17684304.html 中80端口已经给crm项目用了,因此路飞需要换成81端口
| [root@localhost 07-luffy_project_01] |
| [root@localhost dist] |
| index.html static |
| [root@localhost dist] |
| /s25luffy/07-luffy_project_01/dist |
9.修改nginx.conf,添加一个server{}虚拟主机,返回路飞的页面
注释版
| |
| server { |
| listen 81; |
| server_name _; |
| location / { |
| |
| 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: 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] |
浏览器访问 10.0.0.129:81 查看效果
后端环节
1.获取drf项目代码,本地上传,git克隆
| [root@localhost ~] |
| [root@localhost s25luffy] |
| [root@localhost s25luffy] |
| 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] |
| [root@localhost s25luffy] |
| 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] |
| [root@localhost luffy_boy] |
| [root@localhost luffy_boy] |
| api db.sqlite3 keys luffy_boy manage.py s25_luffy static templates |
| [root@localhost luffy_boy] |
| (s25_luffy) [root@localhost luffy_boy] |
3.解决路飞后台代码所需的依赖,下载 requirements.txt 文件即可
| (s25_luffy) [root@s25linux luffy_boy] |
| |
| 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] |
5.测试路飞代码是否能够运行
| (s25_luffy) [root@localhost luffy_boy] |
6.测试通过之后,配置uwsgi.ini,启动路飞后端,uwsgi.ini内容如下
| (s25_luffy) [root@localhost luffy_boy] |
注释版
| |
| [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 |
无注释版
| |
| [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] |
| |
| |
| [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进程,把新的任务,管理路飞也加进去
| |
| (s25_luffy) [root@localhost luffy_boy] |
| (s25_luffy) [root@localhost luffy_boy] |
9.此时检查2个任务的状态
| (s25_luffy) [root@localhost luffy_boy] |
| Unlinking stale socket /tmp/supervisor.sock |
| (s25_luffy) [root@s25linux luffy_boy] |
| 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] |
注释版
| |
| 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; |
| } |
| } |
11.重启nginx
| (s25_luffy) [root@localhost luffy_boy] |
12.浏览器访问 10.0.0.129:81,并登录路飞
13.安装redis且启动redis服务
| (s25_luffy) [root@localhost luffy_boy] |
| (s25_luffy) [root@localhost luffy_boy] |
14.添加python和linux的课程,加入购物车,查看个人中心的购物车