Django+Vue+Nginx+uWSGI部署

Django+Vue+Nginx+uWSGI部署

参考

准备工作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
ip:123.56.252.111
vue: dist
django: django_server

├── backend
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── __pycache__
│   │   ├── __init__.cpython-39.pyc
│   │   ├── urls.cpython-39.pyc
│   │   └── views.cpython-39.pyc
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── db.sqlite3
├── element-test
│   └── dist
│   ├── header.ico
│   ├── index.html
│   └── static
│   ├── css
│   ├── fonts
│   ├── img
│   └── js
├── manage.py
├── media
├── mysite
│   ├── asgi.py
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-39.pyc
│   │   ├── settings.cpython-39.pyc
│   │   ├── urls.cpython-39.pyc
│   │   └── wsgi.cpython-39.pyc
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── static
│   ├── admin
│   ├── css
│   ├── fonts
│   ├── img
│   └── js
├── test.py
├── uwsgi.ini
├── uwsgi.log
├── uwsgi_nginx.sock
└── uwsgi.pid

虚拟环境

服务器配置有详细介绍

Django

服务器配置有详细介绍

uWSGI

安装uWSGI

1
pip install uwsgi

简单测试一下

创建test.py

1
2
3
4
5
# 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:

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

选项的含义:

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

访问 123.56.252.111:8000,输出“Hello World”,说明该程序是这么工作的:

1
2
3
graph LR;
客户端 --http:8000--> uWSGI
uWSGI --> Python

测试Django

测试django

在创建的django目录,执行

1
python manage.py runserver 0.0.0.0:8000

先将IP设置下ALLOWHOSTS

服务器配置有详细介绍

在浏览器输入123.56.255.111:8000即出现django欢迎界面

测试uWSGI

1
uwsgi --http :8000 --module mysite.wsgi

在浏览器输入123.56.255.111:8000出现Internal Server Error属于正常现象,因为没有资源

1
2
3
graph LR;
客户端 --http:8000--> uWSGI
uWSGI --> Djano

Nginx

安装nginx服务器配置有详细介绍

启动nginx

1
2
#centos 7
systemctl start nginx

在浏览器输入123.56.255.111:80出现CenOSNginx的欢迎界面

配置nginx

开启这三个端口:

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

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

创建/etc/nginx/sites-available的目录,在目录里创建support_center_nginx.conf配置文件进行配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# support_center_nginx.conf
# the upstream component nginx needs to connect to
upstream django {
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 123.56.252.111; # 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 /root/mysite/media; # your Django project's media files - amend as required
}

location /static {
alias /root/mysite/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)指向它:

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

/etc/nginx/nginx.conf中将该文件夹包含进去,使得Nginx启动时,能够将文件夹中配置的项目运行起来:
include /etc/nginx/sites-enabled/*.conf

注意,这个语句添加在http中,server

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 http {
server {
listen 8888;
# listen [::]:80 default_server;
server_name _;
# root /usr/share/nginx/html;

# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;

location / {
root /root/mysite/element-test/dist;
try_files $uri $uri/ @router;
index index.html index.htm;
}

location @router{
rewrite ^.*$ /index.html last;
}

error_page 404 /404.html;
location = /404.html {
}

error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
include /etc/nginx/sites-enabled/*.conf;
}

处理静态文件

运行Nginx之前,得先把Django的静态文件集中到一个文件夹中(该文件夹就是STATIC_ROOT的值):
先向settings.py中添加:

1
STATIC_ROOT = '/root/mysite/static'

然后,将静态资源集中:

1
python manage.py collectstatic

nginx测试

1
systemctl restart nginx

media文件夹中放一张图media.jpg用于测试,

media的位置在上面support_center_nginx.conf中的location /media的指定位置

在浏览器输入123.56.255.111:8000/media/picture.png出现一张图片

1
2
3
4
graph LR;
客户端 --http--> Nginx
Nginx --uwsgi--> uWSGI
uWSGI --> Python

使用.iniuWSGI进行设置

创建uwsgi.ini

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
[uwsgi]
# 项目路径
chdir = /root/mysite

#django的wsgi文件路径
wsgi-file = /root/mysite/wsgi.py

# 使用mmcsite.wsgi模块
module = mysite.wsgi

# 虚拟环境的路径
home = /root/Envs/Django

# 启用master
master = true

# 启动五个进程
processes = 10

# 每个进程启动30个线程
threads = 30

# 指定socket监听的地址和端口
socket = 0.0.0.0:8001

# socket权限
chmod-socket = 666

# 结束后清理环境
vacuum = true

# 日志文件
daemonize = /root/mysite/uwsgi.log

# pid文件
pidfile = /root/mysite/uwsgi.pid

# 允许用内嵌的语言启动线程,这将允许你在app程序中产生一个子线程
enable-threads = true

然后,启动 uWSGI

1
uwsgi --ini uwsgi.ini

转发80端口

/etc/nginx/sites-available/support_center_nginx.conf重命名/etc/nginx/sites-available/nginx_backend.conf

1
2
cd /etc/nginx/sites-available/
mv support_center_nginx.conf nginx_backend.conf`

新建一个文件/etc/nginx/sites-available/nginx_fonter.conf

1
vim nginx_fonter.conf

在文件中加入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
server {
# 监听端口
listen 8888;

#ip
server_name 123.56.252.111;

# 编码规则
charset utf-8;

client_max_body_size 75M;

# 主页面内容,
# root:指向vue的dist文件
# try_files:使用vue内部的路由转发
# index:
location / {
root /root/mysite/element-test/dist;
try_files $uri $uri/ @router;
index index.html index.htm;
}

location @router {
rewrite ^.*$ /index.html last;
}

error_page 404 /404.html;
location = /404.html{
}

error_page 500 502 503 504 /50x.html;
location = /50x.html{
}

}

修改/etc/nginx/nginx.conf

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 http {
server {
listen 8888;
# listen [::]:80 default_server;
server_name _;
# root /usr/share/nginx/html;

# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;

location / {
proxy_set_header Host $host:$server_port;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Connection "";
proxy_set_header X-Nginx-Proxy true;
proxy_pass http://123.56.252.111:8888/;
}

location @router{
rewrite ^.*$ /index.html last;
}

error_page 404 /404.html;
location = /404.html {
}

error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
include /etc/nginx/sites-enabled/*.conf;
}

简单说下这样做的目的:

客户的所有请求都是通80端口,与默认端口通信是不需要加:80的,nginx80端口接收到浏览器的请求,转发到8888端口,8888接收到在/etc/nginx/sites-available/fonter.conf文件处理

后端界面客户不会主动访问所以不用转发来隐藏端口,

/etc/nginx/sites-available/fonter.conf/etc/nginx/sites-available/nginx_backend.conf,都在 /etc/nginx/sites-available中,通过软连接/etc/nginx/sites-enabled/etc/nginx/nginx.conf中的include /etc/nginx/sites-enabled/*.conf;导入nginx.conf文件,与主配置文件分离

---------Thanks for your attention---------