这似乎是一个非常基本的问题,我对找不到任何明智的教程感到困惑。我正在尝试设置Django + React生产版本。运行各种编译,缩小等之后。我最终得到了.js
和.css
包,index.html
和其他几个文件,例如favicon,service-worker.js
等。现在,我需要在Django中使用它。
所有这些文件都是静态文件,可能应该由http服务器(在我的情况下为nginx
)用作静态文件。我想出的变体是修改index.html
以使其成为有效的Django模板:{% load static %}
首先,将所有硬编码链接替换为{% static 'filepath' %}
并使用TemplateView
进行提供,其他文件由[C0提供] ]。这很好,但是,修改构建结果似乎是个坏主意。生成的包为每个构建包含一个唯一的哈希,我将需要在每个构建之后在模板中替换该哈希。我显然可以自动化,但是看起来很奇怪。我不希望完全不涉及构建结果,但是那我应该如何提供静态文件呢? nginx
配置为在nginx
路径下提供静态文件,而不能将/static/
之类的文件作为静态文件提供。
所以问题是如何配置Django + React进行生产,这样我就不必手动修改构建结果并可以使用nginx正确提供静态文件?
1)您可以在js文件中创建组件。例如:service-worker.js
2)您使用babel将JSX文件编译为本机Javascript,并且小贝创建例如component.js
。 Django将提供编译后的文件,因此react将仅在开发任务中使用,因为所有的React代码在进入生产之前都将转换为JS。对于django,所有的react组件将只是已经编译的JS代码。
3)您可以使用Webpack自动将component.build.js
移动到django可以为它们提供服务的文件夹中,例如component.build.js
4)您创建了一个django模板your_project/static/your_app/component.buid.js
,它将用作所有模板将要扩展的基础模板。在这里,您将放置标头以及所有常见的脚本和样式。例如,如果使用引导程序,则应在此处。请记住,将块保留在此基本模板中,以在要扩展base.html
的模板中使用它们。这是我们使用的base.html
:
base.html