Linux基础—前后端分离项目部署
前面的博客我们已经了解了通过uwsgi和nginx部署前后端不分离的项目,但是在实际工作环境中,前后端分离的项目更加适用于生产环境,所以今天我们来学习部署前后端分离的项目。
项目是通过vue框架和django框架来开发的。
1.项目文件的准备
项目文件大家可以去这里下载
# 路飞学城django代码 https://files.cnblogs.com/files/pyyu/luffy_boy.zip # vue代码 https://files.cnblogs.com/files/pyyu/07-luffy_project_01.zip
有了链接,大家可以直接在linux上下载项目文件,这里我将前后端项目的文件都放在我linux路径/opt/DjangoProject/下。
# 进入/opt/DjangoProject下 wget https://files.cnblogs.com/files/pyyu/luffy_boy.zip wget https://files.cnblogs.com/files/pyyu/07-luffy_project_01.zip
下载好后,通过解压缩来
unzip 07-luffy_project_01.zip unzip luffy_boy.zip
删除压缩文件。
二、前端VUE的部署
1.node环境的安装
既然我们要部署vue项目,那么就必须有node环境,node环境是用来运行vue的后端代码。
1.下载node的源代码包
node的源码包是已经编译过的,所以不需要通过make&&make install来编译。
这里我们安装在/opt下。
# 1.下载node二进制包 wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz # 2.解压缩 tar -zvxf node-v8.6.0-linux-x64-tar.gz # 3.进入有node的路径下 cd node-v8.6.0-linux-x64/bin # 4.将该路径配置到环境变量 vim /etc/profile # 将/opt/node-v8.6.0-linux-x64/bin放在PATH后面,以冒号分开 # 5.执行以下配置文件 source /etc/profile # 6.测试安装是否成功 node -v npm -v
2.vue代码的编译
api.js文件路径的修改
因为vue框架返回的前端页面中的url是写在api.js中,我们需要检查路径是否是我们需要部署的服务器ip地址。
在/opt/DjangoProject/07-luffy_project_01/src/restful下
修改api.js中的路径
sed -i "s/127.0.0.1:8000/192.168.16.122:9000/g" api.js # 192.168.16.122是我们部署项目django后端的服务器ip,9000是django项目的端口
编译vue代码
vue的静态文件需要通过node的编译才能生成,一般都会生成在项目第一层路径下。
安装vue项目运行需要的node环境,如果下载太慢,可以修改下载源,原理和pip更改豆瓣源一样。
npm config set registry https://registry.npm.taobao.org # 更改下载源为淘宝源 # 安装node环境的包 npm install # 找到package.json然后安装模块,如同pip install npm run build # 这一步会在前端vue项目路径下生成dist静态文件夹,路飞首页在这index.html
查看dist路径下,有index.html和static文件夹。
vue编译dist文件夹的坑
在编译生成dist文件夹之前,我们是修改了api.js文件中的路径的。
这里有一个坑,就是如果我们开始不小心修改错了,然后编译生成了dist文件夹,启动项目后发现api.js中路径写错了,然后我们自然而然的将api.js中路径修改过来了。
重启项目后,发现还是一直访问不到后端数据,这是为什么啊?
这里我们忽略的很重要的一点,dist文件夹也是通过api.js编译后生成的,而我们在修改了api.js后,dist文件其实没有动,也就是说dist文件夹还是错误的。
解决方法:
把dist文件删除掉,通过正确的api.js再次编译一下即可。
npm run build
配置nginx.conf,内容如下
在配置nginx.conf前,我们需要注意一个事情,之前我们在nginx.conf中配置了crm的部署环境,现在我们需要配置vue+django的luffy项目。
我们将之前的nginx.conf复制一份为nginx.conf.ObCRM,然后复制默认的nginx.conf.default覆盖nginx.conf。
在新的nginx.conf中配置我们的luffy项目部署文件。
cp nginx.conf nginx.conf.ObCRM cp nginx.conf.default nginx.conf # 直接覆盖 # 只需要找到第一个虚拟主机,配置dist的静态文件夹即可 #第一个虚拟主机的配置,用于前端vue项目的页面展示 server { listen 80; server_name 192.168.16.122; location / { root /opt/DjangoProject/07-luffy_project_01/dist; # 配置前端vue项目的dist路径 index index.html index.htm; # 确保刷新不出现404 try_files $uri $uri/ /index.html; } } # 第二个虚拟主机的配置,用作django后端项目的反向代理 server { listen 9000; # 配置django项目的端口,注意不要别的端口冲突 server_name localhost; location / { include uwsgi_params; # 导入配置文件 uwsgi_pass 127.0.0.1:9999; # 反向代理分发 } }
到这里,我们启动nginx,就可以访问到前端页面了,但是你发现其他的链接点了,都没有数据,那是因为后端的django项目并没有部署启动。
访问效果如下
三、后端django项目的部署
通过我们之前创建的virtualenvwrapper工具,快速新建虚拟环境。
mkvirtualenv luffycity # 新建虚拟环境
workon luffycity # 进入虚拟环境
虚拟环境中安装项目运行依赖的包
-
1.通过导出requirements.txt文件来安装
pip3 freeze > requirements.txt
# 或者手动写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
2.uwsgi配置文件启动项目
1.先安装uwsgi
pip3 install -i https://pypi.douban.com/simple uwsgi
在Django项目下,这里也就是/opt/DjangoProject/luffy_boy/新建配置文件uwsgi.ini
配置文件配置如下
[uwsgi] # Django-related settings # the base directory (full path) chdir = /opt/DjangoProject/luffy_boy # Django's wsgi file module = luffy_boy.wsgi # the virtualenv (full path) home = /root/Envs/luffycity # 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
注意:
-
配置的路径填写要正确
-
socket指定的端口需要和nginx.conf中的反向代理指定的端口一致,不然会报错。
2.uwsgi启动django后端服务
uwsgi --ini uwsgi.ini # 注意uwsgi.ini文件的路径
3.redis数据库的启用
因为luffy项目的数据是通过redis数据库来存储的,如果不启动redis,加入购物车等操作数据无法进行。
yum install redis -y # 安装redis数据库 systemctl start redis # 启动redis数据库服务
4.登录测试
到这里项目部署就完成了,我们可以通过访问192.168.16.122,进行登录,选择课程,添加购物车等操作了。