Question

所以我有一个充当后端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 app根文件夹位于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 /建造/静态的。

我还在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下运行，因此这是一个真正的服务器而不是开发服务器。

经历过这个过程的人是否可以解释我需要做些什么来正确地解决这个问题？

Answer 1

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

如何使用webpack将现有的Django应用程序与现有的反应应用程序连接起来

1 个答案: