Question

这似乎是一个非常基本的问题，我对找不到任何明智的教程感到困惑。我正在尝试设置Django + React生产版本。运行了各种编译，缩小等操作之后，我最终得到了.js和.css捆绑包，index.html和其他几个文件，例如favicon，service-worker.js等。现在，我需要与Django一起使用。

所有这些文件都是静态文件，可能应该由http服务器（在我的情况下为nginx）用作静态文件。我想到的变体是修改index.html以使其成为有效的Django模板：{% load static %}，首先用{% static 'filepath' %}替换所有硬编码链接，然后使用TemplateView进行服务，其他文件由nginx提供。这很好，但是，修改构建结果似乎是个坏主意。生成的包为每个构建包含一个唯一的哈希，我将需要在每个构建之后在模板中替换该哈希。我显然可以自动化，但是看起来很奇怪。我不希望完全不涉及构建结果，但是那我应该如何提供静态文件呢？ nginx已配置为在/static/路径下提供静态文件，而不能将service-worker.js之类的文件作为静态文件提供。

所以问题是如何配置Django + React进行生产，这样我就不必手动修改构建结果并可以使用nginx正确提供静态文件？

Answer 1

结合React和Django的主要问题是Django希望自己渲染模板，但是React也希望执行渲染，因为它是为此创建的。这就是为什么在使用react时有很多近似方法将django用作REST API的原因。

但是，如果您希望django渲染模板以避免使用单页应用程序（如react提供），并使用django的所有其他工具，那么我们公司使用的主要流程是：

您可以在js文件中创建组件。例如：component.js
您使用babel将JSX文件编译为本机Javascript，并且小贝创建例如component.build.js。 Django将提供编译后的文件，因此react将仅在开发任务中使用，因为所有的React代码在投入生产之前都将转换为JS。对于django，所有的react组件都只是已经编译的JS代码。
您可以使用Webpack自动将component.build.js移动到django可以为它们提供服务的文件夹中，例如your_project/static/your_app/component.buid.js
您创建了一个django模板base.html，它将用作所有模板将要扩展的基础模板。在这里，您将放置标头以及所有常见的脚本和样式。例如，如果使用引导程序，则应在此处。请记住，将块保留在此基本模板中，以在将扩展base.html的模板中使用它们。这是我们使用的base.html：

{% with version="2.0" %}
<!DOCTYPE html>
{% load static %}
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="author" content="">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- base styles goes here -->
  <!-- include here bootstrap or styles that are common to all your website -->
  <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
  <!-- custom styles for each app go into this block-->
  {% block app_styles %}
  <!-- here will go the apps local styles -->
  {% endblock %}

</head>

<body>

  {% block app %}
  <!-- This block will be used by the apps to load their react components -->
  {% endblock %}

  <!-- base js go here -->
  <script src="{% static 'common/pluggins/jquery3.4.1.min.js' %}"></script>
  </script>
  <script src="{% static 'common/pluggins/fontawesome.js' %}"></script>
  <script src="{% static 'common/scripts/base.js' %}?v={{version}}"></script> <!-- File for common utils -->
  <!-- custom js for each app go here. You should define your Content() here -->

  {% block local_scripts %}
  <!-- here will go the app local scripts -->
  {% endblock %}

  
</body>

</html>
{% endwith %}

通过扩展base.html为每个django应用程序创建模板。请记住在这里包括<div>，react将使用它来渲染内容。 Aslo，请记住，这里是包含圣经之前创建的component.build.js编译JS文件的地方。这里有一个示例，我们使用该示例在我们的网站中构建dashboard.html：

{% extends 'common/base.html' %}
{% load static %}

{% block app_styles %}
    <link rel="stylesheet" href="{% static 'dashboard/styles/dashboard.css' %}?v={{version}}">
{% endblock %}

{% block app %}
    <!-- Here is the div used by react --> 
    <div id="myreact-content"></div>
{% endblock %}

{% block local_scripts %}
    <!-- IMPORTANT: Import here the compiled file -->
    <script src="{% static 'component.build.js' %}"></script>
{% endblock %}

在您的项目和应用中设置正确的urls.py
在setting.py中设置正确的配置，以使静态js / css文件和模板可访问

运行django服务器，您就完成了！

在此视频中，您有一个有关如何配置npm，babel和django的小指南。使用正确的配置，当您更改JSX（未编译）文件中的某些代码时，所有内容都会自动更新，因此开发任务将更加友好。 https://www.youtube.com/watch?v=Mx3ChaYA0Gw

Django + React生产设置

1 个答案: