一、部署前端代码
部署前端代码,就是一些静态文件,丢给nginx去解析
前端node js + vue的部署 + nginx的部署
1、下载vue的代码
wget
2、编译vue的代码
编译vue的代码,生成dist静态文件夹,需要用到node js解释器环境
# 下载nodejs的源代码包
wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz
3、解压缩node的源码包
tar -zxvf node-v8.6.0-linux-x64.tar.gz
4、配置环境变量
进入源码包目录,直接配置环境变量即可,人家已经编译好了
找到node可执行程序
# 进入目录/opt/s20luff/node-v8.6.0-linux-x64/bin
# 将上面的路径加到/etc/profile中的PATH环境变量里
# 配置完需要执行下
source /etc/profile
node -v
npm -v
5、修改vue的请求发送路径
修改vue的请求发送路径,vue向服务器发起请求,修改127.0.0.1为linux的ip地址
# 进入前端页面(07-luffy_project_01 )找到src文件下的restful,修改ip
sed -i "s/127.0.0.1:8000/192.168.61.129:9000/g" api.js
修改api.js中的请求ip
6、开始编译vue的代码
# 由于网速问题,下载包可能超级慢
# 修改npm的下载源,如同pip 更改豆瓣源一样
# 进入/node-v8.6.0-linux-x64/bin/ 将npm的路径添加到环境变量
# 修改安装源·
npm config set registry https://registry.npm.taobao.org
# 找到/opt/s20luff/07-luffy_project_01执行:
npm install #找到package.json然后安装模块,如同pip install
npm run build #这一步会生成dist静态文件夹,路飞首页在这index.html
# (如果修改了vue向向服务器发起请求的ip地址,那么我们修改后需要重新编译vue的代码,也就是重新执行第六步的操作)
在这里执行:
7、配置nginx.conf
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
# 只需要找到第一个虚拟主机,配置dist的静态文件夹即可
# 第一个虚拟主机的配置
location / {
# 网站首页的静态文件路径
root /opt/s20luff/07-luffy_project_01/dist;
index index.html index.htm;
# 确保刷新不出现404
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
# 第二个虚拟主机的配置,用作反向代理
server {
listen 9000;
server_name localhost;
location / {
include uwsgi_params;
# django运行的ip端口
uwsgi_pass 127.0.0.1:9999;
}
}
}
1、客户端访问默认是80端口,先走nginx
2、nginx配置文件中我们给80端口配置了,返回网站首页的静态文件
3、路飞学成除了首页以外的所有请求都是用的9000端口,这时候我们用到了反向代理
二、后端uwsgi+django的部署
1.激活虚拟环境
mkvirtualenv s20luffy
workon s20luffy
2.解决运行路飞所需的依赖环境
方式二选一
方式1:
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
方式2:手动解决依赖关系
pip3 install -i https://pypi.douban.com/simple django==2.0
pip3 install -i https://pypi.douban.com/simple django-rest-framework
pip3 install -i https://pypi.douban.com/simple requests
pip3 install -i https://pypi.douban.com/simple django-redis
pip3 install -i https://pypi.douban.com/simple crypto==1.4.1
pip3 install -i https://pypi.douban.com/simple pycrypto==2.6.1
3、下载uwsgi
下载uwsgi,编写uwsgi.ini配置文件,去运行路飞学城后端
pip3 install -i https://pypi.douban.com/simple uwsgi
【在任意位置创建uwsgi.ini文件】
【注意我们用uwsgi启动项目的时候也要在该目录下】
下载项目包wget https://files.cnblogs.com/files/songzhixue/luffy_boy.zip
uwsgi.ini内容如下
[uwsgi]
# Django-related settings
# the base directory (full path)
# 项目目录的绝对路径【第一层】
chdir = /opt/s20luffy/luffy_boy/
# Django's wsgi file
# 项目目录的第二层目录【wsgi同级】
module = luffy_boy.wsgi
# the virtualenv (full path)
# 虚拟环境路径【虚拟环境中执行cdvirtualenv,pwd查看路径】
home = /root/Envs/s20luffy
# process-related settings
# master
master = true
# maximum number of worker processes
# 开启的进程数
processes = 4
# the socket (use the full path to be safe
socket = 0.0.0.0:9999
# clear environment on exit
vacuum = true
4.启动uwsgi后端
# 找到uwsgi.ini这个文件的目录下执行下面命令
uwsgi --ini uwsgi.ini
# 重启nginx
# 访问页面
5.还得启动redis,才能添加购物车
# 最省事的安装
yum install redis -y
systemctl start redis
6、将商品添加到购物车,查看redis中的数据
# 登录账户密码
alex
alex3714