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重新加载配置文件。
大功告成，可喜可贺~
