通过Nginx使Django、React App项目共存

服务器是 CentOS 7 系统

部署Django项目

安装Gunicorn

不错的Python WSGI UNIX的HTTP服务器

# 安装依赖
$ pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple gunicorn
# 使用 gunicorn 运行项目
$ cd [Django项目路径]
$ gunicorn -w 3 -b 0.0.0.0:8001 --log-level=info [Django项目同名文件夹名称].wsgi

[2020-05-28 19:28:01 +0800] [13203] [INFO] Starting gunicorn 20.0.4
[2020-05-28 19:28:01 +0800] [13203] [INFO] Listening at: http://0.0.0.0:8001 (13203)
[2020-05-28 19:28:01 +0800] [13203] [INFO] Using worker: sync
[2020-05-28 19:28:01 +0800] [13206] [INFO] Booting worker with pid: 13206
[2020-05-28 19:28:01 +0800] [13207] [INFO] Booting worker with pid: 13207
[2020-05-28 19:28:01 +0800] [13208] [INFO] Booting worker with pid: 13208

安装Supervisor

让 Supervisor 去管理 Django 应用进程

# 安装依赖
$ pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple supervisor
# 生成配置文件
$ echo_supervisord_conf > /etc/supervisord.conf
# 编辑配置文件
$ vim /etc/supervisord.conf

在配置文件的最后面添加下面的内容

[program:[Django项目名称]]
command=gunicorn -w 3 -b 0.0.0.0:8001 --log-level=info [Django项目同名文件夹名称].wsgi
directory=/[Django项目路径]
process_name=%(program_name)s_%(process_num)d
startsecs=0
stopwaitsecs=0
autostart=true
autorestart=true
stdout_logfile=/root/logs/[Django项目名称]_%(process_num)02d.log

[program:[Django项目名称]_schedulers]
command=/usr/local/bin/python3 schedulers
directory=/[Django项目路径]
process_name=%(program_name)s_%(process_num)d
startsecs=0
stopwaitsecs=0
autostart=true
autorestart=true
stdout_logfile=/root/logs/[Django项目名称]_schedulers_%(process_num)02d.log

保存以上配置文件，创建配置中指定的日志目录及sock文件，同时要赋予访问权限

$ touch /tmp/supervisor.sock
$ chmod 777 /tmp/supervisor.sock
$ mkdir /root/logs
$ chmod 777 /root/logs
$ sudo chmod 777 [Django项目路径]

然后使用以下命令启动 Supervisor

# 重新加载配置文件
$ supervisorctl update
# 启动全部应用
$ supervisorctl -c /etc/supervisord.conf start all
# 停止全部应用
$ supervisorctl -c /etc/supervisord.conf stop all
# 重启全部
$ supervisorctl -c /etc/supervisord.conf restart all

部署Nginx

安装PCRE

让 Nginx 支持 Rewrite 功能

# 下载 PCRE 安装包
$ cd /usr/local/src/
$ wget http://downloads.sourceforge.net/project/pcre/pcre/8.35/pcre-8.35.tar.gz
# 解压安装包，进入解压目录
$ tar zxvf pcre-8.35.tar.gz
$ cd pcre-8.35
# 编译安装  
$ yum -y install gcc-c++
$ ./configure
$ make && make install
# 查看pcre版本 
$ pcre-config --version

8.32

安装Nginx

安装 Nginx 本体

# 下载 Nginx
$ cd /usr/local/src/
$ wget http://nginx.org/download/nginx-1.6.2.tar.gz
# 解压安装包，进入解压目录
$ tar zxvf nginx-1.6.2.tar.gz
$ cd nginx-1.6.2
# 编译安装
$ ./configure --prefix=/usr/local/webserver/nginx --with-http_stub_status_module --with-http_ssl_module --with-pcre=/usr/local/src/pcre-8.35
$ make
$ make install
# 查看nginx版本
$ /usr/local/webserver/nginx/sbin/nginx -v

nginx version: nginx/1.6.2

配置Nginx

通过 Nginx 反向代理到 8001 端口

$ vim /usr/local/webserver/nginx/conf/nginx.conf

Nginx配置文件内容按如下修改

user  root;
worker_processes  1;
………………
http {
    ………………
    #gzip  on;
    
    server {
        listen       8002;
        server_name  localhost:8002;

        location / {
            root   /[React App项目路径];
            index  index.html index.htm;
        }
    }

    server {
        listen       80;
        server_name  localhost;

        client_max_body_size 99M;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            proxy_pass http://localhost:8001;
            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        location /static {
            alias /[Django项目路径]/collect_static/;
        }

        location /static/download {
            alias /[Django项目路径]/media/download/;
        }

        location /static/upload {
            alias /[Django项目路径]/media/upload/;
        }

        location /client/wifi {
            proxy_pass http://localhost:8002/;
            root   /[React App项目路径];
            index  index.html index.htm;
        }

        ………………

然后要给Django打包的静态资源文件授权

$ chmod 777 /[Django项目路径]/collect_static -R

启动Nginx

# Nginx 启动命令
$ /usr/local/webserver/nginx/sbin/nginx
# 检查配置文件nginx.conf的正确性命令
$ /usr/local/webserver/nginx/sbin/nginx -s reload
# 重新载入配置文件
$ /usr/local/webserver/nginx/sbin/nginx -s reload
# 重启 Nginx
$ /usr/local/webserver/nginx/sbin/nginx -s reopen
# 停止 Nginx
$ /usr/local/webserver/nginx/sbin/nginx -s stop

部署React App项目

在Nginx的配置中，有如下配置信息

    server {
        listen       8002;
        server_name  localhost:8002;

        location / {
            root   /[React App项目路径];
            index  index.html index.htm;
        }
    }

所以这里只需要将打包好的React App项目代码放到这里指定的目录下，就可以通过Nginx反向代理进行访问