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，进行登录，选择课程，添加购物车等操作了。
