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出现CenOS或Nginx的欢迎界面

配置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

使用.ini对uWSGI进行设置

创建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的，nginx从80端口接收到浏览器的请求，转发到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---------