Fluent Blog
首页
归档
友链
关于
Fluent Blog
现在向第一缕阳光宣誓,走出尘埃与那茫然彷徨。
首页
归档
友链
关于
React + Django项目部署
技术相关
余弦G
2020/8/12
231
0
## 前言 现在替实验室做的项目,前端用的是React,后端是Python的Django,并且要前后端分离,前端通过向后端端口发送fetch请求调用后端api,数据通过json交换。因此需要用Nginx分别部署前端和后端。 ## 前端 先在React项目文件下运行`npm run bulid`进行打包,然后上传至服务器。服务器安装完Nginx后就可以新建站点配置。 ``` server { listen 80; server_name www.xxxx.com; # 网站域名 index index.html; root /www/wwwroot/React; # React项目的路径 # url转发 location /{ try_files $uri $uri/ @router; index index.html; } location @router { rewrite ^.*$ /index.html last; } } ``` 因为React只有一个index.html,url需要都转发至index.html才能正常访问。比如在React中编写访问`/login`跳转到登录,但是如果不转发,访问时会找不到资源提示403。而转发后则能正常调用相应的js等从而正常访问。 重启一下Nginx服务,浏览器输入域名就可以访问了。  ## 后端 后端相对麻烦一些,还额外需要安装uWSGI。大概思路是Nginx接收并处理静态请求,一旦收到动态请求,则转发给uWSGI,再由uWSGI交给Django进行处理。 另外这样前后端分离可能涉及到跨域,得安装django-cors-headers来解决Django的跨域问题,需要的话可以百度一下设置的教程。 先将Django项目打包上传至服务器。安装uWSGI以后,在Django项目路径下新建一个uwsgi.ini,然后进行配置。 ``` [uwsgi] socket=127.0.0.1:8001 chdir=/www/wwwroot/Django module=Django.wsgi workers=4 ``` `socket`:定义项目运行的端口 `chdir`:项目路径 `module`:Django项目会自动包含一个wsgi.py,一般在路径下的同名文件夹中,例如`.../Django/Django/wsgi.py`。这里只要填写`wsgi.py所在文件夹.wsgi`即可。 `workers`:进程数 有需要的话,还有其他额外的配置参数,可以参考官方文档。 接着需要在Nginx中对uWSGI进行配置。 ``` server { listen 8000; # 端口,前端请求往这发 server_name api.xxxx.com; root /www/wwwroot/Django; #项目路径 location / { include uwsgi_params; uwsgi_pass 127.0.0.1:8001; # uWSGI中配置的项目端口 uwsgi_param UWSGI_SCRIPT Django.wsgi; # 同前面的wsgi.py uwsgi_param UWSGI_CHDIR /www/wwwroot/Django/; #项目路径 } location /static/ { alias /www/wwwroot/Django/static/; #静态资源路径 } } ``` 这里Nginx监听了8000端口,从8000端口接收请求,而uWSGI中项目工作在8001端口,注意区分。 运行: ``` uwsgi --ini /www/wwwroot/Django/uwsgi.ini ``` Django项目就会被启动。 通过杀掉uWSGI中设定的项目端口: ``` fuser -k 8001/tcp ``` 就可以停止Django项目的运行。 另外通过Supervisor,能够实现开机自启与进程保护。 配置可以参照: ``` [program:django_auto] command=/usr/local/bin/uwsgi --ini /www/wwwroot/Django/uwsgi.ini directory=/www/wwwroot/Django/ autorestart=true startsecs=3 startretries=3 stdout_logfile=/www/server/panel/plugin/supervisor/log/django_auto.out.log stderr_logfile=/www/server/panel/plugin/supervisor/log/django_auto.err.log stdout_logfile_maxbytes=2MB stderr_logfile_maxbytes=2MB user=root priority=1 numprocs=1 process_name=%(program_name)s_%(process_num)02d ``` 重启Nginx,后端部分应该就可以正常工作了。 前端只需要发送请求到上面Nginx设置的后端域名处(没有域名就发到`公网ip地址:8000`),就可以实现调用。例如前端(这里仅包含请求的收发,不包括处理): ``` fetch('http://api.xxxx.com/login/',{ method: "POST", body: JSON.stringify(values), headers: { 'content-type': 'application/json' } }) ``` 后端urls.py: ``` urlpatterns = [ path('login/', views.login), ] ```
公告栏
欢迎来到Fluent Blog,一个基于ASP.NET Core 5.0 MVC的博客。前往主站请访问www.cosineg.com
文章目录
文章标签
#Django
#React
#网站
#Linux
#编程
#服务器
#软件
热门文章
阅读量
评论量
1 - WPF控件LiveCharts——实现动态折线图
590
2 - AX200断流断网解决方法
427
3 - 校园网实现自动网页认证
322
4 - Fluent Blog上线了
276
5 - 记一个ASP.NET调用原生C++ DLL的坑
264
1 - 写了一个OpenCC.NET
2
2 - Fluent Blog上线了
2
3 - WPF控件LiveCharts——实现动态折线图
1
4 - 正在用ASP.NET Core写一个博客框架
1
5 - 校园网实现自动网页认证
1