Django+React 整合

Question

我在一个终端中有 Django Rest Framework 服务器运行ning，在另一个终端中有 React 运行ning。

我使用下面提到的 axios 在 React 中使用 Django API

    axios.get('http://localhost:8000/songs/').then(res=>console.log(res)

它运行良好，在生产模式下我将挂钩 main.js（由 npm 运行 build 创建，React 的构建文件）到 Django 模板。

此方法在服务器中有效吗？值得推荐吗？

我曾经将 Django + React 与此 guid (https://www.valentinog.com/blog/drf/) 集成，但它不支持某些 npm 包

Answer 1

是的，它会起作用。有几种方法可以一起部署 React 和 Django。

但是，我更喜欢的部署方式是使用 docker-compose 并使用 nginx reverse-proxy 部署它。

您能否详细说明为什么某些 npm 包在 Valentino Gagliardi 教程中不受支持？

Answer 2

在包含所有 api 端点 URL 的 src react 文件夹中创建 constant.js 文件。像这样：

const localhost = 'http://127.0.0.1:8000';

const apiURL = '/api';

export const endpoint = `${localhost}${apiURL}`;

export const productListURL = `${endpoint}/products/`;
export const productDetailURL = id => `${endpoint}/products/${id}/`;
export const addToCartURL = `${endpoint}/add-to-cart/`;
export const orderSummaryURL = `${endpoint}/order-summary/`;

否则，您将不得不更改前端的每个请求的端点域，这可能很耗时。

我在实际的网络服务器上部署应用程序； ubuntu 数字海洋上的水滴，使用 NGINX。您可以将 React 和 Django 应用程序部署在同一个 Droplet 上。你只需要为 nginx 编写额外的配置。并正确配置网络服务器。

反应部署文档： https://www.digitalocean.com/community/tutorials/how-to-deploy-a-react-application-to-digitalocean-app-platform

django 部署文档： https://www.digitalocean.com/community/tutorials/how-to-set-up-django-with-postgres-nginx-and-gunicorn-on-ubuntu-20-04

完成这两个教程后，您将了解如何为 MVC 配置 nginx。

Answer 3

找到有用的文档

https://cuckootechnologies.medium.com/integrating-django-rest-framework-with-react-js-9bf9d7f051a1

Django 将在一个终端中运行，而 React 将在另一个终端中运行。来自 Django 服务器的 API 将由 React 使用 Axios 使用。

Django+React 整合

Django+React integration

reactjs

django-rest-framework

django-react