使用Reactjs前端容器化Django全堆栈应用程序作为django应用程序与webpack和babel一起使用

Question

我正在用react js，webpack和巴别塔构建一个全栈的Django应用程序。我的django后端通过端口8000作为应用程序为我的react前端提供服务，而webpack则捆绑了我的reactjs。我希望能够将我的应用程序容器化，这样我就可以拥有独立的服务，即前端作为容器，后端作为容器，可能postgresql作为容器。

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

最终，我的文件夹结构类似于下面的内容

-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

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

Answer 1

如果你想分离/解耦你的前端和后端，我建议你在开发中使用像webpack dev server这样的东西来服务前端。对于后端，您应该能够将Django应用程序复制到基于official Python Docker image的Docker镜像中。

这将解决开发问题，然后对于试运行/生产，您可以使用任何云产品来服务后端(我喜欢使用Google Cloud Run)，以及任何静态内容主机来服务前端(我喜欢使用Netlify )。这将允许您的应用程序组件独立自动扩展。