记一次简单的Django uwsgi + React + Nginx 服务器部署

Django uwsgi

1、首先将代码拉到服务器

cd /home/bigllxx     # 我把代码放这里，大家随便放，记住这个位置即可
git clone git@github.com:xxxx/MeijiTestPlatform.git  # 我的项目名称叫 MeijiTestPlatform

2、新建虚拟环境并拉依赖

pip3 install virtualenv
cd MeijiTestPlatform  # 进入项目主目录
python3 -m venv 「myvenv」    # 创建虚拟环境，虚拟环境就创建在当前目录
source myvenv/bin/active     # 激活虚拟环境
while read requirement; do pip install $requirement; done < requirements.txt # 安装依赖（跳过错误）
# python manage.py runserver   # 启动看看，看是否有依赖没拉下来，手动拉。

3、安装uwsgi并配置

pip install uwsgi
uwsgi --version    # 查看 uwsgi 版本
vim uwsgi.ini
  [uwsgi]
  socket=127.0.0.1:8997  # 配置和nginx连接的socket连接
  chdir=/home/bigllxx/MeijiTestPlatform/  # 配置项目路径，项目的所在目录
  wsgi-file=/home/bigllxx/MeijiTestPlatform/MeijiTestPlatform/wsgi.py  # 配置wsgi接口模块文件路径,也就是wsgi.py这个文件所在的目录名
  processes=4  # 配置启动的进程数
  threads=2  # 配置每个进程的线程数
  master=True  # 配置启动管理主进程
  pidfile=uwsgi.pid  # 配置存放主进程的进程号文件
  daemonize=uwsgi.log  # 配置dump日志记录

4、启动uwsgi并查看

uwsgi --ini uwsgi.ini   # 启动uwsgi，输出：[uWSGI] getting INI configuration from uwsgi.ini 代表启动成功，之后会自动在当前目录新建 uwsgi.pid 和 uwsgi.log
uwsgi --stop uwsgi.pid  # 停止
uwsgi --reload uwsgi.pid  # 重启

React 项目打包上传

在React项目主目录执行：npm run build

build成功之后，会在该目录生成一个 build 文件夹

将build文件夹上传到服务器指定目录，我放在了django项目的主目录，用github直接拉

所以我的 build 目录是： /home/bigllxx/MeijiTestPlatform/react-project/build

Nginx 安装配置

1、安装

yum install nginx  # 我用的是centos，用yum安装就行
cd /etc/nginx      # 进入nginx安装目录
mkdir conf.d       # 如果没有这个目录就创建下，有的话就cd进去
touch django.conf
touch react.conf   # 创建两个nginx配置文件，因为/etc/nginx/nginx.conf 中  include /etc/nginx/conf.d/*.conf 了 , 所以我们直接在这目录下新建.conf结尾的文件，nginx就会自动读

2、配置

#react.conf
server {
	listen 80;
	server_name www.xxx.com; # "对外访问的域名,没有域名的话就随便写，不可与uwsgi端口冲突"

	location / {
		# 一些跨域头
		add_header 'Access-Control-Allow-Origin' '*'; 
		add_header 'Access-Control-Allow-Credentials' 'true';
		add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
		add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
		# 指定你的前端目录文件,上面React写的有
		root /home/bigllxx/MeijiTestPlatform/react-project/build; 
		# React 的 build 目录下默认有index.html 指定默认文件
		index html index.html; 
		# 这个得加上
		try_files $uri /index.html; 
	}
}

# django.conf
server {
	listen 8000;
	server_name 127.0.0.1; 
	
	# 固定写法
	location  / {
		include uwsgi_params;
		uwsgi_pass 127.0.0.1:8997; # 这里就是uwsgi.ini配置文件中的地址
	}
}

3、启动

启动nginx前先启动python的uwsgi服务，命令上面写的有，注意我是在虚拟环境装的uwsgi，所以要先激活虚拟环境才能用uwsgi命令

启动nginx：nginx

关闭nginx：nginx -s stop

重新加载nginx配置文件：nginx -s reload

访问公网ip，自动进入react项目，大功告成！

补充：django admin 样式

按照上面的流程，打开admin后台之后，找不到样式文件，解决方法如下：

1、修改项目settings.py文件，加一行。

2、搜集静态文件

执行：python manage.py collectstatic

之后可以看到静态文件都被放在了该目录下，之后push代码，远端pull下来

3、配置nginx

打开django.conf，加几行

# django.conf
server {
	listen 8000;
	server_name 127.0.0.1; 
	
	# 固定写法
	location  / {
		include uwsgi_params;
		uwsgi_pass 127.0.0.1:8997; # 这里就是uwsgi.ini配置文件中的地址
	}
	# 这次加的
	location /static/ {
		root /home/bigllxx/MeijiTestPlatform/MyApp/;
		break;
	}
}

4、重启服务

重启uwsgi可能会失败，因为种种原因可能导致uwsgi.pid的pid和真实的不一样。只需要查出来uwsgi的pid，全部kill掉，再执行启动命令就好了，启动命令上面写得有。

重启uwsgi：uwsgi --reload uwsgi.pid

重启nginx：nginx -s reload

刷新页面，大功告成！