Django + Vue前后端分离项目部署
后端用的Django REST Framework,使用的是uwsgi+nginx,前端使用的Vue。一、配置uwsgi.ini进入服务器项目文件目录下,我的django项目放在了“/us...
后端用的Django REST Framework,使用的是uwsgi+nginx,前端使用的Vue。
一、配置uwsgi.ini
进入服务器项目文件目录下,我的django项目放在了“/usr/myProjects/”目录下了。在manage.py同级目录下创建uwsgi.ini文件,配置如下:
#添加配置选择
[uwsgi]
#配置和nginx连接的socket连接
socket= :8888
#配置项目路径,项目的所在目录
chdir=/usr/myProject/dacts
#配置wsgi接口模块文件路径,也就是wsgi.py这个文件所在的目录名(dacts/wsgi.py)
module=dacts.wsgi
#配置启动的进程数
processes=4
#配置每个进程的线程数
threads=2
#配置启动管理主进程
master=True
#配置存放主进程的进程号文件
pidfile=uwsgi.pid
#配置dump日志记录
daemonize=uwsgi.log
测试效果命令:
uwsgi --http :8000 --module dacts.wsgi
如果访问:xxx.xxx.xxx.xx:8000 成功, 则uwsgi.ini配置成功。
二、配置nginx
我的nginx.conf所在位置是“/etc/nginx/nginx.conf”
配置文件如下:
user root nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
events {
worker_connections 1024;
}
http {
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
include /etc/nginx/mime.types;
default_type application/octet-stream;
# 前端vue服务器
server {
listen 8008;
server_name xxxx.com 47.xx.xxx.xx; # 此处填写服务器域名+ 空格+ ip
location / {
root /root/dist; #打包后的vue项目地址,我直接丢root目录下了
index index.html index.html;
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass http://xxxxx.com; # 反向代理地址
proxy_read_timeout 600s;
client_max_body_size 100M;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
# 后端drf服务器
server {
listen 80;
server_name xxxxxx.com; #改为自己的域名
charset utf-8;
location / {
include uwsgi_params;
uwsgi_pass 127.0.0.1:8888; #端口要和uwsgi里配置的一样
uwsgi_read_timeout 2;
}
location /static {
alias /usr/myProject/dacts/static/;
}
location /media {
alias /usr/myProject/dacts/media/;
}
}
}
三、部分配置解析:
1、第一行
user root nginx;
主要就是给nginx加权限,vue部署后使用history路由时会去掉地址后面的‘#’号,打包部署后不加权限会有bug。
2、如配置所示,有两个Server,分别部署了前端服务,和后端服务,值得注意的是两个Server用的是同一个服务器,监听的端口不同。
3、vue部署需要注意的是反向代理地址:
proxy_pass http://xxxxx.com; # 反向代理地址
以及后面的端口问题:
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
4、后端的Server需要注意location中的uwsgi_pass 后面的端口号要和uwsgi.ini中配的相同,否则监听不到
location / {
include uwsgi_params;
uwsgi_pass 127.0.0.1:8888; #端口要和uwsgi里配置的一样
}
5、后端跨域问题。如果遇到跨域需要自己网上找配置,我的没遇到,可能是因为我在django的settings中配置了跨域。
6、我开始后台监听的是8008端口,vue前端监听的是80端口,这样前端显示好看。然而问题出现了,虽然后台api可以正常访问,vue的本地开发环境也能正常运行且文字、图片资源均显示正常,但是前端vue打包线上部署后,文字信息显示正常,图片信息缺失8008端口,导致显示不出来。为图方便我选择了前端监听8008端口,后端监听80,部署后显示正常。原因不太清楚。
7、不要问我为啥都前后端分离了还部署到一个服务器上?穷,而且只是测试,没必要.
8、此文仅适合入门。如果样式缺失,输入如下命令:
python manage.py collectstatic
接下来你就回发现static文件中包含了css文件,此时再打开网站,样式显示正常。uWSGI 通过 xxx.ini 启动后会在相同目录下生成一个 xxx.pid 的文件,里面只有一行内容是 uWSGI 的主进程的进程号。
关于uwsgi,进入同届目录下启动:
uwsgi --ini uwsgi.ini
重启:
uwsgi --reload uwsgi.pid
停止:
uwsgi --stop uwsgi.pid
教训:
获取不到环境,那就指定环境。
另外:记得重启uwsgi,重启Nginx,实在不行就先把监听的端口kill掉再重启。
暴力删端口:fuser -k 80/tcp
netstat -aptn命令行,查看所有开启的端口号
netstat -ntlp | grep 80 查看具体的端口是否使用
ps -ef | grep uwsgi 查看是否有uwsgi端口存在
作者:蜗牛LR
链接:https://www.jianshu.com/p/376b5554c457
来源:简书
推荐阅读
Docker-compose 八步部署Django + Uwsgi + Nginx + MySQL + Redis升级篇
更多推荐
所有评论(0)