Nginx + Gunicorn 部署 Django + @vue/cli 前后端分离项目

背景知识

Django

Django是一个基于Python的开源网络框架，于2005年公布1.0版本，目前被Django Software Fundation维护。截稿前的Stable版本是3.0.8。Django遵从MVC架构模式，在我们开发的过程中，需要在models.py文件内定义我们的模型，在views.py中定义我们针对每一个HTTP/HTTPS请求所要执行的任务。

举个例子来说，当前端通过GET HTTP://yoursite.com/login/这个URL访问我们的服务器，Django会自动调用views.py文件中，绑定了/login/这个URL的函数或者是方法，再将返回值返回给前端。如果只是单纯的使用Django进行开发的话，最终返回的一般会是一个由django渲染好的html文件，也就是我们平常所见的网页。

但是，现在更多的是前后端分离的项目，前端通过调用API与后端进行数据的传输，在这种情况下，我们就不需要Django来渲染页面，而只是需要后端返回一个json格式的文件。

Django Rest Framework

对于以上的问题，我们可以使用Django REST Framework来提高我们的开发效率。具体的的使用方法，我会在后面的blog中为大家提供。

Vue.js

Vue.js是由华裔工程师尤雨溪开发并维护的渐进式JavaScript前端框架。与2014年发布初始版本。适用于SPA(Single Page Application)开发。Vue.js所关注的，就是MVC架构模式中的View（视图）层。作为前端框架，它可以很方便的通过axios与后端进行数据通信，并根据其遵从的MVVM架构模式，低延迟的将数据渲染到页面上。

@vue/cli

@vue/cli脚手架工具使得vue的开发工作变得更加便捷，这也是现在主流前端的开发方法。

Gunicorn

Gunicorn (Green Unicorn) 是一个Python 的 WSGI (Web Server Gateway Interface) HTTP server。可以用来代理基于python的Web应用程序。在我们的实例中，我们使用Gunicorn代理Django Web Application到Unix Socket，再使用Nginx将与gunicorn绑定的socket代理到我们的域名或者IP地址上。

Nginx

Nginx (Engine X) 是由俄罗斯开发团队开发并维护的异步框架的网站服务器，也可以用作反向代理，负载均衡和HTTP缓存等任务。在我们的例子中，我们主要使用的是其反向代理的功能，将与gunicorn绑定的socket代理到我们的域名或者IP地址上。

任务前提

• 已经有一个可以在localhost运行的 Django project
• 项目前后端分离
• 项目文件是直接从 git clone下来:
  • 前端没有/dist 文件夹
  • 后端没有 migrate

环境搭建

首先需要更新系统内的包：

$ sudo apt update
$ sudo apt upgrade

忽略这一步可能会导致环境安装失败。

安装 Python 环境

• 安装 python3
  • $ sudo apt-get install python3
• 安装 pip3
  • $ sudo apt-get install python3-pip
• 安装 virtualenv
  • $ pip3 install virtualenv
• 新建虚拟环境

$ cd ~
$ virtualenv --python=python3 myenv

• 启动我们刚刚新建的虚拟 Python 环境
  $ source ~/myenv/bin/activate
• 安装其余我们项目所需要的环境：

# 首先安装gunicorn
$ pip