Django + Vue + Nginx + uWSGI 部署

Django + Vue + Nginx + uWSGI 部署

如果您的英语阅读能力尚可，那么我推荐您阅读官方文档进行部署，
本篇内容就是参考官方文档进行部署的。

环境

操作系统：CentOS 7
Python版本：Python 3.7.3
Django版本：Django 2.2.4
Vue版本：Vue 3.11.0

概念

• Django: Python的前端框架。
• Vue: 前端框架。
• Nginx: Web代理服务器。处理静态文件的发送。动态请求则交予uWSGI处理。
• uWSGI: 一个基于自有的uwsgi协议、WSGI协议和http协议的web网关。处理动态请求，将处理的结果回发给Nginx。

简单的表示一下就是：

准备工作

注意！！！：以下名称皆为作者本人的项目中使用到的名称，实际部署时应该替换为您自己项目中的名称。

虚拟环境名：support-center-env
域名：qcoolweb.cn
Web项目名：support-center
Django项目名：server
Vue项目名：client

虚拟环境

创建一个用于该项目的独立的运行环境。在虚拟环境下，每一个工程都有自己的依赖包，而与其它的工程无关。不同的虚拟环境中同一个包可以有不同的版本。

python -m venv support-center-env	# 也可以使用 vituralenv 创建虚拟环境
cd support-center-env
source bin/activate		# 激活虚拟环境

退出虚拟环境的命令是deactivate，不过暂时先不要退出，因为下面的操作是需要虚拟环境的哦。
然后将你的 Django 项目和 Vue 项目移动到该虚拟环境中。
这是我的目录：

support-center-env
|-- bin
|-- include
|-- lib
|-- lib64 -> lib
|-- pip-selfcheck.json
|-- pyvenv.cfg
`-- support-center		# web 项目
    |-- client			# Vue 前端项目
    `-- server			# Django 后端项目

Django及其它第三方库

安装 Django 以及项目运行所需的第三方库

pip install django	# 将 django 安装到虚拟环境中

uWSGI

安装 uWSGI 到虚拟环境中

pip install uwsgi

简单测试一下

创建test.py

# test.py
def application(env, start_response):
    start_response('200 OK', [('Content-Type','text/html')])
    return [b"Hello World"] # python3
    #return ["Hello World"] # python2

运行 uWSGI：

uwsgi --http :8000 --wsgi-file test.py

选项的含义：

• http :8000 使用 http 协议，8000端口。
• wsgi-file test.py 使用 test.py 作为与 uWSGI 交互的文件。

访问 http://qcoolweb.cn:8000，输出“Hello World”，说明该程序是这么工作的：

测试Django项目

首先，先确保你的 Django 项目能够正常运行。

python manage.py runserver 0.0.0.0:8000

如果能正常运行，那就测试 uWSGI，

uwsgi --http :8000 --module server.wsgi

• module server.wsgi 需要加载的 wsgi 模块。
  因为静态资源没有加载进来，所以有可能什么都没有显示，不过没关系，确保能够访问即可，关于加载静态资源后面我会讲到的。下面这是它的工作原理：

当然，让Nginx这个专业的Web服务器来处理http请求更为合适，同时也可以用Nginx做负载均衡，比直接访问uWSGI好得多。那么，我们接下来就来配置Nginx。

Nginx

安装 Nginx

yum install nginx
/etc/init.d/nginx start    # 开启 nginx

然后访问qcoolweb.cn:80或者qcoolweb.cn（默认80端口），你将会看到 Welcome to nginx on Fedora! 说明你安装成功了，此时它的工作状态是这样的：

配置 Nginx

接下来我会开启这三个端口：

• 80端口 显示Nginx欢迎界面，测试Nginx是否能正常运行
• 8000端口 Nginx接收请求的端口，自行处理静态请求，动态请求则转发给uWSGI的8001端口处理
• 8001端口 uWSGI接收动态请求的端口，处理完毕后将处理结果发给Nginx的8000端口

检查一下是否有uwsgi_params文件（后面的配置文件需要用到），它应该在nginx的目录里（/etc/nginx/uwsgi_params），如果没有，可以点击这里下载。

现在创建一个叫作/etc/nginx/sites-available的目录（创建这个目录是为了兼容Ubuntu和Debian），在目录里创建support_center_nginx.conf配置文件进行配置：

# support_center_nginx.conf

# the upstream component nginx needs to connect to
upstream django {
    # server unix:///home/webs/support-center-env/server/support_center_sock.sock; # for a file socket
    server 127.0.0.1:8001; # for a web port socket (we'll use this first)
}

# configuration of the server
server {
    # the port your site will be served on
    listen      8000;
    # the domain name it will serve for
    server_name qcoolweb.cn; # substitute your machine's IP address or FQDN
    charset     utf-8;

    # max upload size
    client_max_body_size 75M;   # adjust to taste

    # Django media
    location /media  {
        alias /home/webs/support-center-env/support-center/server/media; # your Django project's media files - amend as required
    }

    location /static {
        alias /home/webs/support-center-env/support-center/server/static; # your Django project's static files - amend as required
    }

    # Finally, send all non-media requests to the Django server.
    location / {
        uwsgi_pass  django;
        include     /etc/nginx/uwsgi_params; # the uwsgi_params file you installed
    }
}

创建一个软链接(/etc/nginx/sites-enabled)指向它：

ln -s /etc/nginx/sites-available /etc/nginx/sites-enabled

在/etc/nginx/nginx.conf中将该文件夹包含进去，使得Nginx启动时，能够将文件夹中配置的项目运行起来：

include /etc/nginx/sites-enabled/*.conf

处理静态文件

运行Nginx之前，得先把Django的静态文件集中到一个文件夹中（该文件夹就是STATIC_ROOT的值）：
先向settings.py中添加：

STATIC_ROOT = '/home/webs/support-center-env/support-center/static'

然后，将静态资源集中：

python manage.py collectstatic

Nginx 测试

/etc/init.d/nginx restart

向media文件夹中放一张图media.jpg用于测试，然后访问qcoolweb.cn:8000/media/media.jpg，如果能看到图说明至少Nginx能正常服务。

Nginx 和 uWSGI 共同测试

uwsgi --socket :8001 --wsgi-file test.py

此时，工作流程应该是这样的：

用Unix套接字替换端口

之前，我们使用的是TCP端口，但是更好的做法是用Unix套接字，开销更小。
编辑/etc/nginx/nginx.conf：

  server unix:///home/webs/support-center-env/server/support_center_sock.sock; # for a file socket
  # server 127.0.0.1:8001; # for a web port socket (we'll use this first)

然后重启Nginx：

/etc/init.d/nginx restart

接着运行uWSGI：

uwsgi --socket support_center_sock.sock --wsgi-file test.py

如果失败，请查看/var/log/nginx/error.log（这是在nginx.conf中配置的nginx错误日志），如果显示(13: Permission denied)，则说明权限不足，可以重新启动并提权：

uwsgi --socket support_center_sock.sock --wsgi-file test.py --chmod-socket=666

使用 Nginx 和 uWSGI 运行 Django

uwsgi --socket uwsgi_nginx.sock --module server.wsgi --chmod-socket=666

现在，你应该可以看到你自己设计的网页了。
至此，服务器的工作流程应该是这样的：

我们再来看下现在Django的目录结构：

server
|-- core							# Django App
|   |-- admin.py
|   |-- apps.py
|   |-- __init__.py
|   |-- migrations
|   |-- models.py
|   |-- __pycache__
|   |-- tests.py
|   |-- urls.py
|   `-- views.py
|-- manage.py
|-- media						# 在Nginx中配置的media文件夹
|   `-- xiaomai.jpg
|-- server						# Django项目文件夹
|   |-- __init__.py
|   |-- __pycache__
|   |-- settings.py
|   |-- urls.py
|   `-- wsgi.py
|-- static						# 在Nginx中配置的static文件夹
|   |-- admin
|   |-- css
|   `-- js
|-- uwsgi_nginx.sock	# Unix socket，用于Nginx和uWSGI通信
`-- test.py						# 测试uWSGI的代码

使用.ini文件对uWSGI进行配置

之前我们都是使用命令行的方式启动uWSGI，甚是不便，现在我们将配置信息写到配置文件中，方便启动和管理。

创建uwsgi.ini：

# uwsgi.ini file
[uwsgi]

# Django-related settings
# the base directory (full path)
chdir           = /home/webs/support-center-env/support-center/server
# Django's wsgi file
module          = server.wsgi
# the virtualenv (full path)
home            = /home/webs/support-center-env

# process-related settings
# master
master          = true
# maximum number of worker processes
processes       = 10
# the socket (use the full path to be safe
socket          = /home/webs/support-center-env/support-center/server/uwsgi_nginx.sock
# ... with appropriate permissions - may be needed
chmod-socket    = 666
# clear environment on exit
vacuum          = true

然后，启动 uWSGI

uwsgi --ini uwsgi.ini

至此，配置已经基本完毕。如果需要更详细的配置，建议访问uWSGI官网和Nginx官网自行查询。