Django+Vue+Nginx+uWSGI部署


Django+Vue+Nginx+uWSGI部署

参考

准备工作

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

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交互的文件。

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

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

测试Django

测试django

在创建的django目录,执行

python manage.py runserver 0.0.0.0:8000

先将IP设置下ALLOWHOSTS

服务器配置有详细介绍

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

测试uWSGI

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

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

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

Nginx

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

启动nginx

#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配置文件进行配置:

# 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)指向它:

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

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

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

 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中添加:

STATIC_ROOT = '/root/mysite/static'

然后,将静态资源集中:

python manage.py collectstatic

nginx测试

systemctl restart nginx

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

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

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

graph LR;
客户端 --http--> Nginx
Nginx --uwsgi--> uWSGI
uWSGI --> Python

使用.iniuWSGI进行设置

创建uwsgi.ini

[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

uwsgi --ini uwsgi.ini

转发80端口

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

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

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

vim nginx_fonter.conf

在文件中加入

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

 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文件,与主配置文件分离


文章作者: Mug-9
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Mug-9 !
评论
  目录