2

所以我有一个充当后端 REST 服务器的 Django 项目，我想将它与一个现有的 React 项目集成，该项目对该 REST 服务器进行 AJAX 调用。同样，这两个项目都已经存在，我只想将它们连接起来。假设我的 Django 项目的根是 DJANGOROOT，这就是 manage.py 所在的位置。我的 Django 项目有几个 Django 应用程序是项目的一部分。假设我的 Django 项目名为“mydjangoproj”，两个 Django 应用程序名为“myapp1”和“myapp2”，React 项目名为“myreactproj”。这两个项目中的每一个（带有两个应用程序的 Django 项目和 React 项目）都存储在一个单独的 GIT 存储库中，为了将它们连接到我的服务器上，我有以下目录结构：

DJANGOROOT/
DJANGOROOT/mydjangoproj
DJANGOROOT/mydjangoproj/settings.py
DJANGOROOT/mydjangoproj/urls.py
DJANGOROOT/mydjangoproj/static/
DJANGOROOT/mydjangoproj/templates/
DJANGOROOT/myapp1
DJANGOROOT/myapp2
DJANGOROOT/myreactproj
DJANGOROOT/myreactproj/package.json
DJANGOROOT/myreactproj/src
DJANGOROOT/myreactproj/src/index.js
etc

请注意，React 应用程序根文件夹位于 DJANGOROOT 内，并且与我的 django 项目和应用程序文件夹平行。

React 应用程序使用一个名为 react-scripts 的 npm 模块（请参阅https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build ) 有一个构建脚本，它将构建 DJANGOROOT/myreactproj/src 中的所有内容（以 index.js 为目标），并将所有这些内容放在一个名为 DJANGOROOT/myreactproj/build 的文件夹中。当我运行构建（使用“npm run build”）时，它会填充文件夹 DJANGOROOT/myreactproj/build，如下所示：

DJANGOROOT/myreactproj/build
DJANGOROOT/myreactproj/build/index.html
DJANGOROOT/myreactproj/build/{several other files}
DJANGOROOT/myreactproj/build/static
DJANGOROOT/myreactproj/build/static/css
DJANGOROOT/myreactproj/build/static/js
DJANGOROOT/myreactproj/build/static/media

所以看来，要将 Django 连接到我的 React 应用程序，我必须找到一种方法让 Django (mydomain.com/) 的根路径指向 DJANGOROOT/myreactproj/build/index.html。我知道我必须创建一个由运行在 mydomain.com/ 的 Django 视图启动的“主页”模板，并且该主页模板必须启动 React 应用程序，如下所示：

{% load render_bundle from webpack_loader %}
{% render_bundle 'main' 'js' 'DEFAULT' %}

但是我不确定我需要如何告诉 Django 在哪里寻找 main.js（或者是 index.js），并且我不确定如何让 Django 查看 DJANGOROOT/myreactproj/build 中的所有静态内容/静止的。

我还在 DJANGOROOT/myreactproj 中运行了“npm list webpack”来获取 webpack 的版本，它显示了这个：

└─┬ react-scripts@1.0.11
  └── webpack@3.5.1

我认为这意味着 webpack 3.5.1 正在被使用，并且以某种方式与 react-scripts v 1.0.11 捆绑在一起

另请注意，Django 应用程序已经在 NGINX 和 UWSGI 下的 HTTPS 下运行，因此这是一个真正的服务器而不是开发服务器。

经历过这个过程的人能否阐明我需要做些什么才能正确连接这一切？

4

1 回答 1

0

如果您的 react 应用程序使用 django 只是为了通过 REST 获取数据，为什么要在 django 模板中使用 react？我认为这里的首选方法是分离而不是集成。使用自己的服务器创建独立的 react 应用程序（当然两者都可以在一台物理服务器上运行） - 这样您的 react 应用程序和 django 应用程序将仅通过休息调用进行通信，无需其他任何东西。如果您在 django 应用程序中有一些资产 - 将它们移动到前端反应应用程序。

于 2018-04-12T18:04:47.680 回答