React+Django项目部署过程

React项目介绍

很早就有搭博客的想法，近期才去做这件事，花了几天搞了个小博客。本文不讲技术，额，也讲不来，只记录部署的过程。
前端技术栈：React+Redux+React Keeper+Antd
脚手架：create-react-app
格式检查：prettier+eslint（配置方法)
前后端交互：Fetch
因为刚搞React，完全面向搜索引擎编程，做的其实有些惨不忍睹。。。先把链接扔上（懒得备案啊，轻喷）：
展示：http://www.xingce.xyz:81
管理：http://admin.xingce.xyz:81

Django项目介绍

后台其实就是个开启个服务，增删改查写几个接口，将一下遇到的两个问题：

• 跨域问题
  因为前后端不在一个端口，势必要跨域交互，采用的方案是CORS，配置如下：

  
  
  image.png
  
  
  image.png
• 前端请求报403
  可通过注释CsrfViewMiddleware中间件解决，如图，不过这样会产生安全问题，我没深究暂时先这样。

部署过程

服务器：aliyun centos7
Http服务器：Nginx
Application服务器：uwsgi
所有的静态资源都用Nginx来控制，Django后台用uwsgi服务器。

• python环境
  因为centos7自带的事python2.7，通过wget下载python3.6的源码，自己进行编译安装

wget https://www.python.org/ftp/python/3.6.2/Python-3.6.2.tar.xz
tar -xvJf  Python-3.6.2.tar.xz
cd Python-3.6.2
./configure prefix=/usr/local/python3
make && make install
ln -s /usr/local/python3/bin/python3 /usr/bin/python3
ln -s /usr/local/python3/bin/pip3 /usr/bin/pip3

安装好python后打算使用virtualenv创建虚拟环境

pip install virtualenv
cd my_project_dir
virtualenv venv
source venv/bin/activate

接下来就可以随意安装包了，不会影响系统环境，首先安装好项目必须包，然后安装uwsgi

pip install uwsgi

• uwsgi配置

在项目根目录新建uwsgi.ini文件，具体配置如下：

[uwsgi]
socket = :8000 # 端口号
chmod-socket = 666
chdir = /home/usr/wwwblog/blog_server # 项目路径
module = blog_server.wsgi:application # 用来加载wsgi.py文件
processes = 1 # 进程数
daemonize = /home/usr/wwwblog/blog_server/uwsgi.log # 日志文件，配置之后才会在后台运行
pythonpath = /home/usr/wwwblog/blog_server/virtualenv/venv/lib/python3.6/site-packages # Django包的位置

还有很多配置我没用到，然后运行uwsgi --ini uwsgi.ini就可以启动服务了，对了还有装mysql和配置在上一篇文章，通过python manage.py migrate就可以生成表结构。

• Nginx配置
  安装过程上网查就行，Nginx的配置文件一般在/etc/nginx/，编辑nginx.conf文件，注释掉默认监听80端口的server块，我是采用include的方式引入其他配置文件。

  
  
  image.png
  
  

  我的配置如下：

server {
    listen       81;                        # 监听端口
    server_name ~^(.+)?\.xingce\.xyz$;    # 站点域名，第一部分匹配二级域名确定root路径

    if ($host = xingce.xyz){
        rewrite ^ http://www.xingce.xyz permanent;
    }
    index index.html index.htm;   # 默认导航页
    root /home/usr/wwwblog/$1/;
    location / {
        try_files $uri $uri/ /index.html;
        index index.html;
        autoindex on;
    }
    location /images/ { # 博客中用到的图片
        root /home/usr/wwwblog/;
        autoindex on;
    }
    error_page  404 403 500 502 503 504  /404.html;
    location = /404.html{
        root /home/usr/wwwblog/www;
    }
    gzip on;
    gzip_buffers 32 4k; # 缓存
    gzip_comp_level 9; # 压缩级别，0-9，级别越高压缩越小，越占用更多CPU资源
    gzip_min_length 200; # 超过200b则压缩
    gzip_types text/css text/xml application/javascript; # 压缩文件类型
    gzip_vary on;
}

Nginx的配置去网上查就行，我也不是很懂，这是我前端页面的配置，讲一下后面的gzip。因为使用了很多antd的组件和一个编辑器（500kb），最后管理页面打包出来js有1.1M，通过各种手段优化webpack打包也效果不甚理想，最后通过开启Nginx中的gzip压缩，压缩到了320kb，效果还是很好的，当然也是只有这种没人访问的小网站这样搞没影响，想要真正解决问题还是要优化打包过程。
下面是Django服务的Nginx配置：

server {
        listen 8000;
        server_name xingce.xyz;
        index index.html;
         location / {
             include uwsgi_params; # 参数是Nginx自带的
             uwsgi_pass localhost:8001; # 服务真正的地址
         }
}

service nginx start启动nginx即可，nginx -s reload重新加载配置文件。

大功告成，可喜可贺~