一贯的废话开头。
其实这个在四月中旬就已经基本都做完了，本想着四月末之前发出来，但实验室老师抓我做了点别的东西就一直没来得及更新，直到今天才有大块的时间做一下记录……人生艰难啊……
本文也可以看成是我从嵌入式转到前后台全栈的milestone吧（笑
下面是目前Demo的样子，只实现的简单的登录 + React-Router 简单跳转。
这里写图片描述

准备工作

代码

老规矩，首先放出代码跟Nginx配置（处于活跃更新状态）

https://github.com/769484623/TestWebServer

两个branch，master跟dev。在dev 完成了某个功能后会merge到master，在功能都完成后，关闭dev，提供有限更新。
前后端分离。

安装

安装nginx、react脚手架、python + Django + Gunicorn。
很简单。直接apt install。react脚手架需要npm跟node v9。我记得安装没遇到什么问题，遇到了也能百度到，不多说。

创建React跟Django项目

create-react-app App-Name
django-admin startproject MySite
manage.py startapp Auth

很简单，网上很多教程，不多说。

Nginx 设置

这里我想稍微细致的说一下。
GIthub上的nginx.conf是在我Nanopi Neo上的配置。
配置基本上照搬那个就可以，但刚接触Nginx的同行应该注意，Nginx的匹配规则是正则匹配，如果根目录匹配不加 = 严格匹配，那么所有其他没有匹配到的网页不会返回404，而是返回主页。

另外如果nginx无法显示静态图片，注意nginx配置中的使用的用户权限是否足够。上线的时候强烈建议新建一个权限不大的用户并只给他读权限。

使用 Gunicorn 加载Django框架

这里困扰了我一段时间。查阅相关网站，其正确方法如下（我写了个脚本，可通过设定环境DEBUG来决定是否使用Gunicorn）：

gunicorn -w 3 -b 0.0.0.0:8080 MySite.wsgi:application

扫描二维码关注公众号，回复： 747622 查看本文章

具体细节可以移步百度

Django 的设置

Django 我搭配的是MySQL数据库，所以setting.py那里需要进行更改

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'MySite',
        'USER': 'django',
        'PASSWORD': 'djangothewebsite',
        'HOST': 'localhost',
        'PORT': '3306',
    }
}

这是我的配置。Django第一次运行需要创建数据库，所以需要的权限大一些。之后只给他update select insert基本就可以满足需求，这样可以提高安全性。

具体的Url匹配什么的，请移步代码，我觉得比我说的更清楚。

React的设置

使用Axios来进行数据传递。因为前后端分离，现在还没想好csrf这个问题怎么解决（因为得不到django的cookies）
UI之类使用Bootstrap。
其他的貌似没什么。

PS：具体开发遇到的问题实在太多了（毕竟新手），前端的东西又多又杂，拖了一段时间真的不知道从何说起了……但东西肯定都在代码里了（笑）

会继续更新～

Nginx + React + Gunicorn + Django简单网站搭建