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

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

准备工作

代码

老规矩,首先放出代码跟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

具体细节可以移步百度

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:具体开发遇到的问题实在太多了(毕竟新手),前端的东西又多又杂,拖了一段时间真的不知道从何说起了……但东西肯定都在代码里了(笑)

会继续更新~

你可能感兴趣的:(前端开发)