使用Reactjs前端将Django Fullstack应用容器化为带有Webpack和Babel的Django应用

问题描述

我正在使用react js，webpack和babel构建一个全栈Django应用。我的django后端通过webpack捆绑我的reactjs通过端口8000将我的react前端作为应用程序提供。我希望能够对我的应用进行容器化，以便我将拥有独立的服务，即将前端作为容器，将后端作为容器以及可能将postgresql作为容器。

现在我面临的主要挑战是，考虑到我的Django后端正在通过端口8000服务于我的前端reactjs应用程序，我如何最好地分离这两个主要服务前端和后端。我不想使用create react app服务于我前端在其自己的端口3000上，我想走webpack和babel路线，在Django中创建一个前端应用程序，它将托管我的react js应用程序及其静态文件。

最终我的文件夹结构看起来与此类似

-django-app
   -fontend-app
       -src-react
          -components
          -actions
          -reducers
          App.js
       -static
       -templates
          index.html
       urls.py
   -another-app
   -django-app
      settings.py
   Dockerfile
   manage.py
   package.json
   webpack.config.js
   .babelrc

还考虑一种能够使应用程序可扩展的解决方案，即分别为前端应用程序和后端应用程序服务提供扩展功能。

解决方法

如果您希望分离/分离前端和后端，我建议您使用webpack dev server之类的东西来服务开发中的前端。对于后端，您应该只能够基于official Python Docker image将Django应用复制到Docker映像中。

这将解决开发问题，然后对于登台/生产，您可以使用任何云产品来服务后端（我喜欢使用Google Cloud Run），也可以使用任何静态内容主机来服务前端（我喜欢使用{ {3}}）。这将使您的应用程序组件能够自动独立扩展。