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 --> DjanoNginx
安装nginx在服务器配置有详细介绍
启动nginx
#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配置文件进行配置：
# 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 collectstaticnginx测试
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使用.ini对uWSGI进行设置
创建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的，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文件,与主配置文件分离
