React + Django + nginx + uwsgi 生产环境部署(一步一步教你从开发环境到线上环境）

刚刚在本地测试环境写完项目,目前本地测试是一切顺利,未发现异常,准备打包到生产环境服务器上.

1. 前端React + antd + React-Router + axios
2. 后端Python3.6 + Django1.10.1
3. 脚手架用的是create-react-app所以我们无需 用webpack来编译

#####1: 前端打包:

项目用的是yarn,所以我们编译的话直接执行yarn build 这个命令在我们的package.json的文件里面定义的

执行之后如下:

###注意：
1：大家用过Django的都知道普遍的模式是mtv，html css js文件也是在后端中,当用了前端之后，前端的文件会独立出来,也就是我刚刚编译之后的内容 ⇒ build目录 ,这个目录非常重要,我们需要把这个目录拷贝到生产服务器上,他用做我们最终的前端配置文件

#####2: 后端打包:
到我们后端项目Backend目录中,将数据库里面的数据统一倒入到.json文件中：

除了json文件命名无所谓以外,其他格式是严格要求这个写法(除了python版本)

然后将后端目录拷贝到生产服务器上

#####3: uwsgi:
服务器上的一些包什么的这里就不一一说了，大家肯定有缺少的，少什么就pip装什么,推荐pip国内镜像:

mkdir ~/.pip
touch ~/.pip/pip.conf
vim ~/.pip/pip.conf

[global]
timeout = 6000
index-url = http://pypi.douban.com/simple/
[install]
use-mirrors = true
mirrors = http://pypi.douban.com/simple/
trusted-host = pypi.douban.com

然后将开发环境打包的.json文件倒入到本地数据库中:

安装uwsgi:

pip3.6 install uwsgi

安装之后我们现在本地创建一个脚本文件进行uwsgi测试 ：

vim /root/test.py

def application(env, start_response):
        start_response('200 OK',[('Content-Type', 'text/html')])
        #return ['Hello world'] # Python2
        return [b'Hello world'] # Python3
执行测试: uwsgi --http 127.0.0.1:9090 --wsgi-file test.py #返回200即OK

然后我们进入后端目录的settings.py的同级目录下创建uwsgi.ini文件 (本地是以配置文件形式,以sock文件形式输出)

[uwsgi]
socket = 127.0.0.1:8000  				"这部分是uwsgi开启的端口号,注意不能和nginx占用同一个端口,同时也是nginx 代理的地址"
chdir =  /src/Backend/   				"后端项目目录"
wsgi-file = /src/Backend/back/wsgi.py 	"后端项目的wsgi.py 位置都是一样的"
master = True							"启动一个master进程来管理其他进程"
processes = 2							"同时启动uwsgi进程的个数"			
daemonize = wsgi.log					"uwsgi的日志输出文件"
threads = 4								"同时启动的线程个数"
pidfile = uwsgi.pid						"uwsgi的pid文件"
buffer-size  = 30000					"此处可不写,我这buffer较高,所以我设置了"

启动uwsgi：

uwsgi --ini uwsgi.ini 

查看日志输出是否正常:

一般看到我画箭头的那块就差不多成功启动了

#####4: nginx:
现在我们需要做的就是ngixn的配置了,首先需要将你的前端编译过的目录build放到nginx根目录下:

编辑nginx配置文件随便命名.conf结尾

cd conf/conf.d/
vim api.conf

前端配置server
server {
	listen 80;
	server_name www.project.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';
		root build; "这里就要指定你的前端目录文件了,也就是刚刚放进nginx根目录的文件夹"
		index html index.html; "build 目录下默认有index.html 指定默认文件"
		try_files $uri /index.html; "这块分重要,曾经不加尝试过,当我访问login路径时,他不会自动跳转,具体自行百度"
	}
}
后端配置server
server {
	"这部分是我前端axios 请求的时候的地址也就是每次前端异步请求是http://www.igolang.cn:9000"
	listen 9000;
	server_name www.igolang.cn; 
	
	"项目app 叫api,也就是匹配到api路径,加载uwsgi模块 代理到本地地址"
	location  ~ /api/ {
		include uwsgi_params;
		uwsgi_pass 127.0.0.1:8000; "这里就是uwsgi.ini配置文件中的地址"
	}
}

有问题欢迎前来咨询:
QQ:1301927919
QQ群: 340164542

个人博客: https://igolang.cn