linux 前后端分离
lf访问入口是 81端口
部署过程
前后端部署过程
端口划分
nginx + vue 端口是多少 81 ,看到lf首页
vue向后台发起数据请求,首先找到的是nginx反代 ,此时这个反代端口是多少 8001
django restframe work 端口是多少 8002
-
前端搞起(nginx+vue )
获取代码 wget https://files.cnblogs.com/files/pyyu/07-luffy_project_01.zip
-
解压缩代码,修改vue的提交数据地址,以及编译打包生成 dist
修改这个提交数据的地址js文件 /opt/luffys23/07-luffy_project_01/src/restful/api.js文件 进行批量替换 sed 处理文件内容的命令 #语法 sed -i "s/你想替换的内容/替换之后的内容/g" 文件名 # s是替换模式,g是global全局替换 -i 将替换结果写入到文件,如果不写-i,只是显示替换后的结果 sed -i "s/127.0.0.1:8000/192.168.198.127:8001/g" api.js
-
配置nodejs环境
1.下载node源码 wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz 2.解压缩,由于这是编译好的二进制命令压缩包,直接配置环境变量即可使用 3.配置PATH PATH="/opt/python367/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin:/root/bin:/opt/tngx232/sbin:/opt/luffys23/node-v8.6.0-linux-x64/bin" 4.读取/etc/profile ,手动生效 5.查看node和npm的版本,是否正常 [root@s23_linux bin]# node -v v8.6.0 [root@s23_linux bin]# npm -v 5.3.0
-
开始安装vue项目所需的node模块,默认找到当前文件夹的package.json文件 ,这里由于网速问题,可以配置淘宝的npm源
npm --registry https://registry.npm.taobao.org install #安装vue的模块
-
编译vue代码,生成dist
npm run build
-
此时生成dist文件夹之后,可以丢给nginx去解析了
-
配置nginx.conf如下
#配置第二个虚拟主机,返回路飞的首页内容 server { listen 81; server_name _; #当我访问 192.168.13.117:81的时候,就进入如下的配置 location / { #定义网页根目录 ,填写vue的dist绝对路径 root /opt/luffys23/07-luffy_project_01/dist; index index.html; } #第三个虚拟主机,用于反向代理,请求转发给drf后台 server { listen 8001; server_name _; location / { include uwsgi_params; uwsgi_pass 0.0.0.0:8002; } }
-
配置drf的后台,提供数据支撑
获取后台代码 wget https://files.cnblogs.com/files/pyyu/luffy_boy.zip 创建新的虚拟环境 mkvirtualenv luffys23 解决模块依赖问题 可以进入本地开发环境, pip3 freeze > requirements.txt 然后安装这个文件(这就是个普通文本,可以手动写) touch 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.tuna.tsinghua.edu.cn/simple -r requirements.txt
-
配置uwsgi和配置文件,启动drf
pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple uwsgi
-
写一个uwsgi.ini配置文件
touch uwsgi.ini [uwsgi] # Django-related settings # the base directory (full path) # 填写路飞项目的绝对路径,第一层 chdir = /opt/luffys23/luffy_boy # Django's wsgi file #填写路飞项目第二层目录中的wsgi文件 module = luffy_boy.wsgi # the virtualenv (full path) #填写解释器的安装绝对路径(虚拟环境) home = /root/Envs/luffys23 # process-related settings # master master = true # maximum number of worker processes #指定uwsgi的多进程数量,指定为cpu的核数即可(填cpu的4倍数量) processes = 4 # the socket (use the full path to be safe #指定crm启动的协议,当你和nginx结合进行反向代理,就用unix-socket协议 ,这种方式无法直接访问,只能通过nginx反代 socket = 0.0.0.0:8002 # ... with appropriate permissions - may be needed # chmod-socket = 664 # clear environment on exit vacuum = true
-
启动drf后端
uwsgi --ini uwsgi.ini
-
登陆LF
账号密码 alex alex3714
-
安装redis数据库,可以用于购物车功能
yum install redis -y
-
启动redis
systemctl start redis
-
验证登陆redis
[root@s23_linux ~]# redis-cli 127.0.0.1:6379> ping PONG
-
检查redis的key信息
127.0.0.1:6379> keys * (empty list or set)
-
解决路飞首页刷新404问题的办法
server { listen 81; server_name _; #当我访问 192.168.13.117:81的时候,就进入如下的配置 location / { #定义网页根目录 root /opt/luffys23/07-luffy_project_01/dist; index index.html; try_files $uri $uri/ /index.html; #这个参数是解决vue刷新404问题的参数 } }
1